CSS font-size

The font-size CSS property specifies the height of letters in text. It's one of the most important properties in CSS. Some other properties like line-height are usually set relative to font size. em and rem units are always calculated against font-size (1em = font-size).

%pxptemvw...
font-size: height
font-size: 16px;
font-size: 1.2em;    /* 1.2 times parent's font-size */
font-size: 120%;     /* same as 1.2em */
font-size: 1.2rem;   /* 1.2 times html element's font-size */

Browser Support: Full

Relative font-size with ems

Usually the best way to deal with font-sizing in body text and headings is to use relative units.

One em is equal to parent's font size when used in a font-size rule. When used in other rules (eg. line-height, padding...), one em is equal to the element's font-size. In other words, font-size is the rule that defines what one em is, relative to the parent's em.

div.parent{
font-size: 20px;
} div.child{
font-size: 1.5em; /* 1.5*20px = 30px */ line-height: 1.2em; /* 1.2*30px = 36px */
}
font-size is one of the most important properties in CSS
A lot of other properties can be set relative to font-size using ems and rems

Managing Font Sizes in a Document

A simple hassle-free way to manage font sizing is to set a font size in pixels for the <html> element and use ems and rems for the rest, eg:

html {
	font-size: 18px;
}
.h1 {
	font-size: 2.2em;
}
.h2 {
	font-size: 1.8em;
}
.h2 {
	font-size: 1.5em;
}
...

For elments buried too deeply, keeping track of em changes gets complicated. Thankfully rems are always relative to the <html> element's font size. font-size: 1rem will "reset" the font size of any element.

If you do it this way, scaling the whole document's font-size (eg. in a media query) is as easy as changing the parent element's rule. Changing size in sections of a document is equally easy.

Is font size really the height of characters?

Not really. According to the CSS Specification:

The font size corresponds to the em square, a concept used in typography.

Fonts are drawn relative to this square but they may bleed outside. font-size sets the side of the em square and the glyph height changes accordingly, but the absolute height of the characters (in pixels) depends on the typeface (font-family). The font size does give a good idea of the character's height but there's no guarantee that two font families with the same font size will be the same height.

font-size keywords

Another less known way of setting font-size is using absolute or relative keywords:

  • small, medium, large... are keywords whose size in pixels is calculated by the browser.
  • smaller and larger will make the font size a bit larger or a bit smaller than parent's size.

There's a reason why these are not so popular. They don't give precise control like pixels and ems do.

Recommended font size

There's not a widely recommended font size for text and body copy. However, knowing what the trends are and what font-sizes are the most common today might help.

  • Some sources have found the average body copy font size to be between 14px and 18px in 2013.
  • The average heading font size is near 40px.
  • The trend during the last years has been towards increasing font sizes. 12px is not acceptable anymore for body copy and even 14px is getting less popular.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>