Here is what the style section for this page looks like:
<style type="text/css">
body
{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: medium;
}
h1
{
font-size: 135%;
font-weight: bold;
}
h2
{
font-size: 120%;
font-style: italic;
}
h3
{
font-size: 120%;
font-weight: normal;
}
h4
{
font-size: 120%;
font-family: serif;
}
h5
{
font-size: 120%;
font-family: sans-serif;
}
h6
{
font-size: 120%;
font-family: monospace;
}
</style>
Compare the headings below with the styles assigned to them:
Remember that search engines will categorize the importance of your text by which heading type you use. Just because you can redefine the sizes, that does not redefine the importance assigned by search engines. Always use h1 and h2 for your most important headings.
font-family: "Trebuchet MS", Arial, sans-serif;
Be careful when selecting fonts. You may have a specific font on your computer, but what matters is which fonts are available on the computer that's viewing your page! Fonts are NOT sent with your web page. If you specify a font that is not available on the target computer, they will likely see the default font that you saw on our first HTML pages. This is not a desirable result!
For example, with this page you may or may not see my intended font, Trebuchet MS, which is a newer Microsoft font found on many but not all Windows-based computers. And you won't find it on a Macintosh. If you don't have the Trebuchet MS font on your computer, this page is displayed with my second or third choice, Arial or the generic sans-serif.
Unless you choose one of the three generic fonts, you should always specify a list of fonts, in descending order of preference, ending with one of the the three generic fonts: serif, sans-serif, or monospace. See the font-family list in the body style above to see how that's done.
font-size: medium;
font-size: 135%;
Although there are a few different measurements in which you can specify font sizes for a web page, all the options for absolute measurement are just an illusion. You do not have any control over the absolute text size on the web browser screen! Anyone can increase or decrease the text sizes at will. Just look up in your browser menu!
The only control you have is over relative sizes of the various fonts used on your page. In the example above, notice that the body font size is set to "medium" and all the other font sizes are given as a percentage relative to what is used for the body.
The choices for base sizes are xx-small, x-small, small, medium, large, x-large and xx-large. If you feel compelled to try an absolute size, you can use something like "16px", which means 16 pixels or "12pt" for 12 point. Just remember that the user controls the size that they really see.
Other units of measure that you can use for font-size are "in" for inches, "cm" or "mm" for centimeters or millimeters, or "pc" for picas (1 pica = 12 point type). You can also use "em" instead of "%" for relative sizes. "1.5em" is another way of writing "150%".