Why Text on the Web is Getting Smaller

Last night, I tweeted:

I increase the font size of at least 1/3 of the web sites I visit.

You can joke about my declining eyesight all you want. But you can’t ignore this:

What 12px Text Used To Look Like

On a 14.1″ PowerBook G3 (Pismo)

12px text - Then

What 12px Looks Like Now

On a 15.4″ MacBook Pro

12px text - Now

Why?

Pretty shocking huh? Why is the text getting smaller? Because notebook screens are staying the same size (or getting smaller) while screen resolution gets sharper.

My beloved PowerBook G3 Pismo had a 14.1″ (diagonal) screen. It had a 4:3 aspect ratio and maxed out at 1024x768. The actual height and width of the screen was 8.44″ tall and 11.25″ wide.

My new MacBook Pro has a 15.6″ screen. It has a 16:9 aspect ratio and maxes out at 1440x900. The actual height and width of the screen is 8.16″ tall and 13.06″ wide.

So, the new MacBook is wider, but actually shorter (over a quarter of an inch shorter, in fact). Despite the screen being shorter, it still vertically displays 132 extra pixels. So…

The pixels are getting smaller.

12 pixels on the new MacBook Pro translates to 0.109 inches. On the Pismo, 12 pixels measured at 0.132 inches. Doesn’t sound like much, but when you start stacking line of text upon line of text, it adds up. And I start page zooming.

For more on this topic, visit the Large Font Coalition.

5 Comments

  1. On November 9th, 2009 at 8:04 am TJ Kelly said:

    Wow, that’s really cool. I kinda wondered about pixel-shrinking (no double entendre or pun intended), but I was never sure how to calculate it. To be honest, I thought a pixel was a fixed measurement, like a bit, byte, or meter.

    My standard font size is typically 14px. Not quite at LFC standards, but closer than most.

    Thanks for sharing!

  2. On November 9th, 2009 at 9:18 am Coryndon Luxmoore said:

    Yup totally agree. I am the bain of many graphic designers as I do all my wireframes with a base font of 14pt. Once the client has gotten used to that size they resist going back ;)

    14pt btw was very well received in some usability tests I conducted with 35-50yr old users. 50-70yrs old did not complain or comment (probably due to almost all having reading glasses or bifocals.

  3. On November 9th, 2009 at 11:37 am Marc Amos said:

    Very nice post here, Adam. I’m proud to say that I dabble with 16px and 14px font-sizes on the few websites I’m in complete control of.

    Large Fonts 4 LYF.

  4. On November 9th, 2009 at 11:42 am Fred LeBlanc said:

    It’s funny when I tell people about the 16px rule of the Large Font Coalition. It can also be described in your stylesheet as 100%. Pretty amazing, eh?

    16px only looks gigantic because people trying changing their design’s content to 16px when it was say 12px before. Of course it looks gigantic and out of place. For one thing, you’ve gotten used to the 12px. Secondly, the other elements of the design were built with the assumption of a 12px context.

    If you start your designs with 16px in mind, it looks as normal as any 12px would. (Or, for example, once you’ve built a design with 16px in mind, change the font size to 12px. You’ll hear the same number of complaints of “too tiny” as you did during the previous attempt of arbitrarily switching 12px to 16px which was said to be “too large.”)

    Large fonts are awesome.

  5. On November 11th, 2009 at 8:52 pm Jeffrey Chupp said:

    Interesting post that provides some hard data on something we’re all suffering from. LFC looks compelling. I’m a big fan of the Readablity bookmarklets by Arc90.

    Thanks