Setting the font size is a piece of cake. The CSS property for font size is... font-size! You can set the font size in pixels, in percentage, in points, or in "em".
Setting the font size in Pixels
Setting the font size in pixels will guarantee the same size everywhere. The only problem with setting an exact font size is that in doing so, it disables the option for visitors change the font size in many browsers, which means people that find it hard to read your font on their browser won't be able to make the font bigger. If you do set the font size using the pixel measurement, I recommend no smaller than 12px.
body
{
font-size: 12px;
}
td
{
font-size: 14px;
}
The above sets the font size to 12px for the entire web-page, and then sets the font size to 14px for table cells.
Here's an example of using inline styles to change the font size for a single paragraph, using pixel units.
<p style="font-size: 20px">Woah! Big text, no?</p>
Output
Woah! Big text, no?
Setting the font size using Points
Each browser also allows you to set the font size in "points", or "pt". The benefit of using this system is that browsers will allow the option to change the font size for people who find the font is too big or too small. A slight issue comes with using this method in that 10pt in one browser isn't the same as 10pt in another. Fortunately the difference in menial, so unless you want your web-page to be the same down to every pixel in each browser it's not going to cause any major problems. Specifying the font size in pt will give a fairly similar output to the same size in px!
body
{
font-size: 12pt;
}
h2
{
font-size: 14pt;
}
The above sets the font size for the overall page to 12pt, and the font size for h2 headings to 14pt.
Here's an example of using inline styles to change the font size for a single paragraph, using "points".
<p style="font-size: 20pt">Woah! Big text, no?</p>
Output
Woah! Big text, no?
Setting the font size using percentages and in Em
Setting the font size using the "em" unit, or by using a percentage, sets the size of the font relative to the browsers default font size, which is usually around 12px.
h1
{
font-size: 1em;
}
or
h1
{
font-size: 100%;
}
Both of the above will cause h1 headings to have the same font size as the normal text in the web-page.
Here's an example of using inline styles to change the font size for a single paragraph, using em units.
<p style="font-size: 2em">Woah! Big text, no?</p>
Output
Woah! Big text, no?
Changing the default font size
The following will make the default font size half of the browser's default font size.
body
{
font-size: 50%;
}
or
body
{
font-size: 0.5em;
}
And that's enough of me chatting boot et, try mixing and matching the various font size techniques yourself, and then, take the quiz for this chapter.