Font Size with CSS

There are plenty of ways to change the font size with CCS.
You can change the size of your page fonts with the font-size property. The values for the property, however, can be a bit tricky. Take a look at these values for font-size:

font-size: 200%;
font-size: 32px;
font-size: 2em;
font-size: xx-large;

They are actually the same size! Try them out in your code. Add the following highlighted CSS Style:

Save your changes and refresh the page in your browser. You should see the paragraph of text change size.
Now try the other three sizes: 200%, 32px, and 2em. You should find that they are all the same size (or near enough).
Which one you use is up to you. In older browsers, however, using the fixed sizes values of px andem means your users may not be able to increase the size of your fonts. This matters to those whose eyesight may not be perfect, and therefore need a bigger font when reading your text. But browsers allow you to zoom in and out by holding down the CTRL key and pressing + or -. (You reset by pressing CTRL then 0.) So font-size values are not that important. A lot of professionals, though, will set the BODY tag's font-size to 100%, then use em as the value. Like this:

This means that all the font sizes between the two BODY tags are set to the browser's default size of 100%. In pixels, the default size in browsers is 16px. This is equal to 1em. The P tag above is setting the font-size to one and half times the default, while the class ChangeFontSize is setting the font-size to two times the default.
The other sizes are seldom used. But here they are:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger

Try them out and see what happens.

In the next part, you'll learn about styling fonts.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 3 (Getting started with CSS)