HTML & CSS
Article

Stop Maiming Bodies: The Perils of Pixel Font-Size

By Tim Severien
An eye test for pixel size

Artwork by SitePoint/Natalia Balska

Imagine you’re visually impaired or have a reading disability. The browser comes with a font size setting built in, so you increase the default font size and you start browsing. Oddly, the text on most sites still seems small, so you go back to the browsers settings and increase font size to huge. You return to the website you were on and… nothing. The setting has no effect.

Font size setting in Google Chrome

Past few years, we have learned how to use and gradually accepted relative units for typographic content. Instead of using pixels for properties like font-size, most values are rem or ems.

Many developers still set an ‘initial’ font-size on the html or body tag, often using px as unit. If you don’t fully understand (and appreciate) relative units, this might be convenient for you, as all em and rem are now relative to that initial value.

/* A body containing a font-size with absolute value */
body { font-size: 14px; }

/* The h1 will be 2em relative to 14px */
h1 { font-size: 2em; }

Unfortunately, that initial value isn’t convenient for some users. You see, that browser setting I mentioned earlier, only sets the base font size. Every absolute unit (px, pt, inch, etc.) you use, overwrites that.

/* Fictional browser setting */
html { font-size: 18px; }
/* The absolute unit in the body overwrites the browser setting */
body { font-size: 14px; }

As a result, users who change the browser’s font size setting will still see text in 14px, even though they explicitly set the font size to something larger.

Many sites, even high-profile ones, are guilty of this sin:

The Difference Between Zooming and Font Size

One of the arguments I get is: “Zooming works, isn’t that the same thing?”

Pretty much all browsers have the ability to zoom in, which enlarges the entire page. Technically, it enlarges every unit, except for percentages. This is great for the visual impaired, like users suffering visual acuity (clarity). Most visual acuity can be corrected using glasses, but in too many cases, it can’t.

Changing the browser’s font size, however, exclusively changes the base font size. Some people have perfect vision, but have a reading disorder, like Dyslexia. In fact, 3-7% of the population suffer from Dyslexia, but up to 20% can experience its symptoms. Increasing font size can decrease the symptoms’ severity. Why should they zoom into a page, when they have the ability change the font size only?

The Right Way

Absolute units are the bad guys here. If we use relative units, like % and em, the browser’s settings are respected. By default, 1em is approximately 16px. So, if you really want to use a non-default font size, you can set font-size to .875em or 87.5% for 14px.

/*
These are equivalent:
- font-size: 100%;
- font-size: 1em;
- absent font-size property
*/
body { font-size: 1em; }

/* If the users changes the browser setting, both the body text and h1 text will scale accordingly */
h1 { font-size: 2em; }

Sites doing it right:

Conclusion

Absolute units for typographic properties is a common practice in the industry. Probably because it’s explicit, whereas relative units require some digging to find out why a deeply nested element may have a different computed font-size than an element in the body.

The problem is that it is a major accessibility flaw. To make the web great for the visual impaired or those with a reading disability, we have to use relative units.

More:
CSS
  • RoughDraft

    “Imagine you’re visually impaired or have a reading disability.” Or, imagine you’re 55 and trying to read a site built with a damn tiny font. Imagine you’re just grandpappy who doesn’t know how to use a computer and “zoom” is speed, not a browser function. Even now people who’ve ignored the web are learning it across the globe and they have to learn computers, touch, the mouse, they have 50 damn popups a day they don’t know what to do with and you’re giving them 8 pt. type because it’s “precious.”

  • Taruckus

    This has some implications about how to define containing elements of variable-sized texts well. Perhaps measuring those in em’s is the only answer; I’ve practiced and seen in the wild a lot of heights measured in vw-units as well, especially for big hero sections/images.

    I work for a design firm, and while I don’t think a browser that’s set to something other than 16px default font size will ruin the intended design of the site, absolute (sorry to use this word in this context) consistency would require mostly or all relative containing elements.

  • zzzz

    I have a large fonts in browser settings + most of the pages zoomed to 150%. Why?
    Because of two things.

    1: Even this site on 100% with large fonts set in the browser settings has tiny font size for me. I’m only 22; I’m computer science student and I have glasses since the age of 3 – I look at the screen most of the day but because of this “extra large” content (in IDEs/text editors too) I don’t “torture” my eyes.

    2: Let’s be honest, computers have a monitor for the content, not for the 60% emptyness.

  • http://timseverien.nl/ Tim Severien

    I must have missed that. Thanks for mentioning! I’ll have a word with the staff :)

    • adam__roberts

      Hey Tim and Jbt – you’re totally right, we’re not living up to this right now. An upcoming redesign of the page will fix this, though. Thanks for pointing that out, we appreciate the feeback, and apologies for the current situation.

  • paceaux

    Today I finally gave in and boosted the font-size in Chrome. I get tired of wearing my glasses all the time and I especially don’t like _needing_ them when I have to dig in and debug some CSS.

    simply by coincidence, I stumbled upon this article and I noticed something: Your own article content wasn’t scaling up for me. And here’s why:
    .ArticleCopy {font-size: 16px}
    .ArticleCopy p { font-size: 16px }

    1. You make a very valid point that relative units make more sense in the browser
    2. It’d be the nice if the website in which you posted this article followed suit.

    Also:
    It’s generally not a good idea to set a font-size at a non-typographical element (such as a container). That’s what causes the “unpredictability” that px-advocates claim to be the driving force behind not using em. Instead, set the font-size only on the immediate wrappers of your text (such as a p)

  • adam__roberts

    Hey Tim and paceaux – as I mentioned on Jbt’s comment, you’re totally right, article pages aren’t doing this correctly right now. An upcoming redesign of the article page will fix this though. Thanks for the feedback, and apologies for the current issue.

  • Lee

    Excellent article. I have used em for years now. Somewhere in my early-day travels around cyberspace I learned it from one of the “old timers” and it’s worked great! Keep up the excellent work!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.