Relative font sizes and inheritance

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. Here is my preferred method:

Step 1 – applying font-size to the body element

First of all, you can set the font-size on the body element. This can be done using a variety of methods, but the two safest are percentage or em units.

/* font size using percentage units */
body { font-size: 100%; }

/* font size using em units */
body { font-size: 1em; }

Ideally, you should 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.

Step 2 – applying line-height to the body element

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

/* line-height using normal keywork */
body { line-height: normal; }

/* line-height using inherit keyword */
body { line-height: inherit; }

/* line-height using percentage units */
body { line-height: 150%; }

/* line-height using pixel units */
body { line-height: 20px; }

/* line-height using a unitless number */
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: 1em;
	line-height: 1.2;
}

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

Note that any font-family name that includes whistespace should be placed inside single or double quotation marks.

body
{
	font-size: 1em;
	line-height: 1.2;
	font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
}

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

Step 4 – optionally, condensing these rules using the shorthand font property

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

body
{
	font: 1em/1.2 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
}

Step 5 – overwriting the body font styles for specific elements as needed

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.1.

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

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

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: .9em; }

Where possible, avoid applying a percentage-based or em-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.

However, we can specifically increase the line-height of paragraphs to aid readability. In fact, 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

p { line-height: 1.5; }

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: .85em;
	text-transform: uppercase;
}

The final code:

body
{
	font: 1em/1.2 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/
}

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

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: .9em; }

p { line-height: 1.5; }

.date
{
	font-size: .85em;
	text-transform: uppercase;
}

Recent Posts

Follow