Designating Font Sizes Using CSS

HTML provided a tag for changing the size of your text. With CSS you can easily use a series of different font sizes for different attributes of your site without changing any HTML code!

Font sizes are defined within CSS for any HTML element that contains text. This means that you can define font-size styles for paragraphs, headings, tables, divs, blockquotes, etc.

Let's take a look at some CSS font-size style settings.

h1   {font-size:xx-large;}
h2   {font-size:smaller;}
p    {font-size:10px;}
h6   {font-size:40%;}

The above style samples show you the four different ways to delineate font sizes within CSS.

The first style tells your visitors browser to set the h1 HTML elements to the font-size xx-large. Different browsers have different interpretations of xx-large, but this designation will be significantly larger than normal text. There are several such style terms for size that you may apply to your styles. Accepted sizes are

xx-small, x-small, small, medium, large, x-large, and xx-large.

These sizes are defined relative to the other fonts. That is, if your paragraphs were set to the size 12px, your xx-large h1 headings would be around 18px, the xx-large command relative to the 18px standard.

The second font-size is also relative to othersin your document. That is the font-size:smaller style we set for h2 headings. The problem here is, smaller compared to what? If the h2 tag immediately followed a h1 tag, then the h2 headings would be smaller than our h1 headings. What if our h2 headings followed a paragraph, however? Then the h2 headings would be smaller than our paragraph text. When using the relative values for font size be careful. Make sure you double check your ordering, or you could wind up with some very unexpected text sizes. The two relative values CSS allows us to use as font sizes are smaller and larger.

Our p value from the above style snipped, set to font-size:10px shows us what is probably the most commonly used font designation, the absolute value. In this case we are using pixels as our unit of measurement, abbreviated in our style code as px. A pixel is one of the tiny little dots of light that you would see if you looked closely at a non-Plasma monitor. Different monitors have different numbers of pixels per inch, which brings us to the chief problem with defining font sizes by pixels. Everyone's monitor is different, so your font will be different sizes on different screens. Fonts sized to be 12px, for example, are as high as 12 of those little dots of light. This could be a perfect size on one computer and appear to large or to small on another.

Because of this pixel descrepancy, CSS allows different absolute values for defining fonts. Other measurements include pt (which stands for points) pc (which stands for pica) in (inches), cm (centimeters), and mm (milimeters). None of these is as favorable as the absolute measurement known as em.

Set in the form of h5 {font-size:2.1em;}, the em designation sets a font size in relation to the "m" character of that particular font, always a lower-case "m". The style meantioned earlier in this paragraph would have h5 level headings equal in height to the size of 2.1 "m" characters of our font. This is the preferred size designation because it remains relative in size to whatever display your visitors are using on their monitors and, also, to whatever display font they are seeing. The ratio of size from one element to the next is kept intact, as you wanted it.

The final font-size designation is the percentage. Like the larger and smaller designations, the percentage is a size relative to the preceeding element. That is, if we set the following style h6{font-size:40%}, the h6 headings would be 40% of the size of whatever came before it, be it a paragraph, a h1 heading, or whatever. When you use this measurement, be sure to keep track of how things are ordered on your site.

You should now be able to designate font sizes using the many different methods afforded the web developer by CSS.