em, rem, px or %: The font-size Dilemma

I’m just gonna throw the question out there: What is the right font-size to use for body text on a website?

I’d been wrestling with that recently when trying to pick a good one for the 20-30 site. Googling the answer brings up the above sites and more, which presents a problem — many of them are stale. A couple of results were from last year, but still others were from 2012, 2011, 2010 and earlier. Hell, the first page even included this page from W3C originally written in 2003 and last updated in 2010, encouraging webmasters to use CSS instead of the <font> tag!

Font sizing through the years has been governed by a few things, chiefly devices, resolution, typeface and design trends. Smashing Magazine performed a study on typeface and design patterns in both 2009 and 2013. Here were their results on font sizing:

1. Font sizing over time in Smashing Magazine studies #
Category	2009 Study	2013 Study
Avg. Body Font Size	13px	14-16px
Avg. Header Font Size	25.6px	38px
Heading/Body Size Ratio	1.96	2.5
Avg. Line Height	1.48	1.46

With the exception of average line height, everything is increasing in size over the years. The change in header font size is particularly interesting, jumping 12 pixels in size. And remember — the last year we have data for is 2013, so we’re clearly due for another study soon. And then you need to be sure you design for the right visual arc based on the font you’re using, and for accessibility, and for the breakpoints you need so that your pretty fonts still look pretty on mobile devices, and then repeat this for bold, italic and both.

But just be sure that you use pixels as your reference unit. Unless you use ems. Or rems. Or both ems and rems. Or all three. Or none of them!

I’m not saying the above aren’t valid areas of concern. I’m merely saying there are a lot of them, and it’s hard to keep track and figure out what’s best. You could read article after article and get a few good ideas, but you can be led in many different directions. So for the Active 20-30 site, instead of running a survey or using quantitative measurements, I decided to simply see what my peers are using. I figure that they would want to demonstrate their knowledge and skill through the style of their site, and would pay attention to these details.

Let’s Run a Test

For my unscientific comparison, I took six pages from various development sites, investigated their styles and designs, and compared them based on not just the sizes they used, but the units they do as well. The sites and articles I picked, in no particular order:

Bitsofco.de (Ire Aderinokun), “Viewport vs. Percentage Units”
Smashing Magazine, “A Quick Guide for Designing Better Buttons”
Eric Portis, “srcset and sizes“
Kyle Schaeffer, “CSS Font Size: em vs. px vs. pt vs. percent”
CSS Tricks, “Responsive Images: If you’re just changing resolutions, use srcset“ by Chris Coyier
Cloud Four, “Responsive Images 101, Part 5: Sizes” by Jason Grigsby

I kept track of these four things:

Body width
Body font size
Article¹ width
Article paragraph font size

I then added up the body font size and article font size to get the overall font size, which I will give in both rem and the units they used (if applicable).

Let’s see what they all did.

Bitsofco.de

The Bitsofco.de article did not have a body width but did set the font size to 1.6rem, or 25.6px. The article width was set to 90%, but it also was limited to a maximum of 768px. The font size of the article was 100%, meaning it had an overall font size of 1.6rem.

Smashing Magazine

Smashing Magazine maxes its body size at 2000px. They only set a font size of 1.15em at the body level when the viewport is 100em (800px) or larger — otherwise, it’s at 1em by default. The article width is set according to three breakpoints: 80% between 50-63.75em, 100% between 63.75-76.25em, and 78% at 76.25em and above. The article font size tacks another 1.125em onto whatever the body size is. Thus, its final font size would be 1.125rem below 100em wide and 1.29375rem above that.

Eric Portis

While Eric forces his site to be a minimum of 12rem wide, he uses a lot of breakpoints to govern article width and body text:

2. Eric Portis’ article width and body font size by breakpoint #
Breakpoint in `em` (in `px`)	Article Width	Body Font Size
< 28em (< 448px)	`calc( 100% - 3rem )`	1rem
28-40em (448-640px)	24rem	1.0625rem
40-48em (640-768px)	32rem	1.0625rem
48-60em (768-960px)	36rem	1.125rem
60-72em (960-1152px)	42rem	1.25rem
≥ 72em (≥ 1152px)	48rem	1.375rem

There is no separate article font size applied, so the final size depends on the viewport width. Also, article widths 28em and above are set using max-width.

Kyle Schaeffer

Kyle‘s body width is set to 85%, maxing out at 58em or 928px wide. His article width is the same, but his nav menu reduces the available space by 10em. Thus, it is effectively calc( 85% - 10em) with an upper limit of 48em. He only provides a body font size of 14px, or 16px above 85em (1360px). 16px = 1em = 1rem, but any viewport below 1360px will render with a final font size of 0.875rem.

CSS Tricks

Update: CSS Tricks has since changed their site layout.

CSS Tricks’ site is pretty straightforward. The body width is set at 1500px max, and the article width is 65% of that. Their body font size is also set at 20px and isn’t changed at the article level. Therefore, their final font size is 1.25rem.

Cloud Four

Cloud Four‘s were even simpler. No set body width and no specific article font size. They merely set the article width to top out at 40rem and set the body font size to 1em, making the final font size 1rem.

The Results

When you break it all down, here’s how each site sized their fonts side-by-side, arranged from largest to smallest:

3. Final article font sizes by site #
Site	Font Sizes in `rem`
Bitsofco.de	1.6
Eric Portis	1.375, 1.25, 1.125, 1.0625, 1
Smashing Magazine	1.29375, 1.125
CSS Tricks	1.25
Cloud Four	1
Kyle Schaeffer	1, 0.875

Of the six sites represented, three of them used font sizes between 1.125rem and about 1.3rem. Expand the range to between 1 and 1.3rem and all sites except Bitsofco.de are covered. Therefore, a good practical range for font sizes appears to be between 1rem and 1.25rem, or between 16 and 20 pixels.

Now that we have a good range of values for font sizes, let’s compare the units everyone used to try and get some de facto standards:

4. Font size units used by site and location #
Site	Body	Article
Bitsofco.de	`rem`	`%`
Smashing Magazine	`em`	`em`
Eric Portis	`rem`	(`rem`)
Kyle Schaeffer	`px`	(`px`)
CSS Tricks	`px`	(`px`)
Cloud Four	`em`	(`em`)

Units in (italics and parens) are carried over from the body.

Arranged by frequency that a unit was used in these locations on these six sites, it looks like this:

5. Frequency of font size units used by location #
Unit	Body	Article
`px`	2	2
`%`	0	1
`em`	2	1 + (1)
`rem`	2	(1)
Raw Results	non-`%`	`px`; `em`

Again, (italic parens) are carried over from the body.

It appears that my fellow web developers use pixels and ems to largely determine their font sizes. I was honestly surprised so many were still using pixels for sizing. However, if you combine em and rem together in a single group, ems and rems definitely win over pixels by a 2:1 ratio. Also, web developers abhor using percentage font sizes, with Bitsofco.de being the only one that uses it. Finally, I found it odd that for all that people have been clamoring about using viewport units for font sizing, none of the sites I looked at used them.

The Takeaway

For my needs, I decided that setting a font size between 1 and 1.25rem is the best course of action. Also, all font sizes will be referenced in rem unless it makes sense to make text proportionally larger or smaller — in those instances, I will use em to achieve this effect. Otherwise, I would need to calculate the overall rem size for each instance.

Improvements

This is a very informal, unscientific study. It doesn’t take into account:

Typeface selection
Line height
Header font size
Header/body font size ratio
Hot new responsive design trends that could upend this entire study

All of these, as covered by Smashing Magazine, are things to consider. Some of these will likely get their own article focus someday. For now, I think a range of 1 to 1.25rems is a good foundation for the modern web.