Relative font sizes and inheritance

Date: 23 September 2003
Author: Russ Weakley

I was recently sent this question:

How do you set your fonts and font-sizes for a web page?

Answer

There a wide variety of ways that you can specify the font-size on a web document.

My preferred method involves three simple steps:

set the font-size, line-height and font-family on the body element
allow these values to be inherited by all descendant elements in the document
over-ride these values when needed

Step 1 – applying font-size to the body element

First of all, you can set the font-size on the body element using a percentage value.

body
{
	font-size: 100%;
}

Example 01 showing font-size set to 100%.

Example 01

You should avoid em values under 1em:

Be careful using ems. Internet Explorer for Windows flummoxes text in descendants of body which have a font-size set to less than 1em (“0.5em”, for instance). Please note that this applies only to the font-size (FontSize) and line-height (LineHeight) properties.

Source

You should also avoid using pixels as older versions of Internet Explorer do not allow pixel-defined fonts to be increased or decreased in size by the user.

What font-size should you use?

Ideally, we should always set this primary font-size to 100%, which allows our user to determine the font-size for themselves. However, many clients prefer the font-size to be smaller than 100%, so I often have to scale the font-size down slightly. For example:

body
{
	font-size: 95%;
}

I try not to go below 80% as this can become very hard to read for some users. Before you say “Well, they can always increase their font-size in the browser”, be aware that many users have no idea how to do this – even many users with varying degrees of vision impairment.

Step 2 – applying line-height to the body element

Next, you can specify the line-height using one of five different types of unit.

1. Line-height can be specified as normal.

body
{
	line-height: normal;
}

2. Line-height can be specified as inherit.

body
{
	line-height: inherit;
}

3. Line-height can be specified using a percentage value.

body
{
	line-height: 150%;
}

4. Line-height can be specified using a length value (using px, em etc).

body
{
	line-height: 20px;
}

5. Line-height can also be specified using a number value (a unit-less value).

body
{
	line-height: 1.5;
}

I prefer the setting line-height as a number value, as it scales according to the font-size, no matter what font-size has been set.

You can read more on line-height here: CSS line-height

So, our second declaration is:

body
{
	font-size: 100%;
	line-height: 1.5;
}

Example 02 showing line-height increased to 1.5

Example 02

I use a value of either 1.4 or 1.5 where possible as this leaves more space between lines, allowing them to be more readable.

It’s also worth noting that a line height of 1.5 is a requirement for general paragraphs under WCAG 2.0:

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

Source

Step 3 – applying font-family to the body element

Now, we can apply a font-family to the body element, making sure we follow three guidelines:

Always specify more than one font, as you cannot guarantee which fonts the end user may have.
Font names with white space should be placed inside single or double quotes.
At the end of your list of fonts, always include one of the generic font-families
- ‘serif’ (e.g., Times)
- ‘sans-serif’ (e.g., Helvetica)
- ‘cursive’ (e.g., Zapf-Chancery)
- ‘fantasy’ (e.g., Western)
- ‘monospace’ (e.g., Courier)

In this case, I will specify 5 fonts as a “font-stack”.

You can read more on font-stacks here: CSS Font-stacks

body
{
	font-size: 100%;
	line-height: 1.5;
	font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
}

Example 03 showing a font-family applied to the body, which is inherited by all other elements.

Example 03

At this point, the font-size, line-height and font-family will be inherited by all elements in your document.

Step 4 – condensing these rules using the shorthand font property

Now that we have finished the three declarations (font-size, line-height and font-family), we can combine them all into a single shorthand “font” property:

body
{
	font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/
}

Step 5 – overwriting the body font styles for specific elements

Of course, you can easily overwrite this default font style for specific elements as needed. For example, if you wanted all of your headings to be in a serif font, you could use something like this:

h1, h2, h3, h4, h5, h6
{
	font-family: Georgia, Constantia, "Lucida Serif", Lucida, serif;
}

We can also reduce the line-height for headings, as they often look far too open when set with a value of 1.5. So, we can reduce this value to 1.2.

h1, h2, h3, h4, h5, h6
{
	line-height: 1.2;
	font-family: Georgia, Constantia, "Lucida Serif", Lucida, serif;
}

Example 04 showing an new font-family and line-height applied to headings.

Example 04

We can also specify the font size for each individual heading level as needed:

h1 { font-size: 200%; }
h2 { font-size: 160%; }
h3 { font-size: 140%; }
h4 { font-size: 120%; }
h5 { font-size: 100%; }
h6 { font-size: 90%; }

Where possible, avoid applying a percentage-based font-size for elements such as p, ul, ol, li and especially span as these are already defined by the font-styles in the body element.

Example 05 showing font-size applied to all headings.

Example 05

Step 6 – Specific styling on containers

Finally, there may be parts of the site that require smaller font-sizes. In these cases, you may wish to add new styles such as:

.date
{
	font-size: 80%;
	text-transform: uppercase;
}

Example 06 showing a new font-size and text-transform applied to a <p> element with a class of “date”.

Example 06

The final code:

body
{
	font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/
}


h1, h2, h3, h4, h5, h6
{
	line-height: 1.2;
	font-family: Georgia, Constantia, "Lucida Serif", Lucida, serif;
}

h1 { font-size: 200%; }
h2 { font-size: 160%; }
h3 { font-size: 140%; }
h4 { font-size: 120%; }
h5 { font-size: 100%; }
h6 { font-size: 90%; }

.date
{
	font-size: 80%;
	text-transform: uppercase;
}

How do you specify your font-sizes?

Comments are closed.

Site navigation