Stop It with the Tiny Font

A modern design trend that drives me absolutely batty is this obsession with tiny text on websites – particularly blog and news sites, where the content is (presumably) intended to be read.

I consider myself mildly visually disabled – I use glasses to correct my nearsightedness, which is not severe. I can read what is on my computer screen equally well with or without glasses. However, I’m using a computer with a 15″ screen and a screen resolution of 1680×1050, which means the following:

  • 1680 / 1050 = 1.6 = aspect ratio of 16:10
  • Using Pythagoras’ theorem, I can calculate that one pixel on my screen is 0.225 mm
  • That means that the 11px font you are using is literally only 2.475 mm high on my screen, which is typically two feet away from my face
  • By comparison, most books are set with an 11pt (that’s point, not pixel) font, which is about 3.9 mm high, and most people read books about 6-12 inches away from their face
  • Since perceived size decreases by about half at double the distance, the 11px font on my screen appears to be about 1.24 mm at 24 inches vs. the 3.9 mm book at 12 inches
  • Conclusion: 11px font on my screen is approximately 3x smaller than the font size of a book held 12 inches from my face

As a consequence, I find myself constantly using my browser’s built-in zoom functionality (ctrl +) to zoom in items that I am reading so that they very nearly fill the screen. I find that a comfortable reading font size is somewhere around 24px on this screen (although on larger monitors, I can get away with less). On one of my 24″ external monitors, which is what I use for writing code all day, I set my font size in my text editor to 20px.

So why the obsession with small font size? Maybe it has something to do with page density and advertising space. Maybe it’s “trendy” and “cool.” As a user, and not a severely visually disabled user, I find it to be incredibly frustrating.

I suspect that part of the difficulty comes from increasing pixel density in devices and a corresponding lack of adjustment in design. The laptop I used a decade ago had a screen not much smaller than this, and its maximum resolution was 800x600px, which would yield a perceived pixel size of roughly twice what my current monitor displays, because design tracks pixels, and pixels aren’t fixed.

Join the Conversation

5 Comments

    1. Because my blog has 13px font? Yeah, that wasn’t lost on me. The perils of using pre-built themes vs. building your own – there are tradeoffs. I consider 13px to be the absolute minimum (and, actually, so does Apple, because they upscale fonts smaller than that to 13px on their email program – see http://www.campaignmonitor.com/blog/post/3339/save-your-layout-by-overriding-the-minimum-font-size-on-the-iphone-and/ for details). However, I work as a web developer at an advertising agency, and I routinely see font sizes smaller than 13px – 11px is common, and sizes down to 9px are used in footer text and certain navigational elements.

      1. I dove into Lightword settings and added some custom CSS to bump up the font size to a much more readable 16px.

    1. Hey now, there’s some orange on here.

      I’d love to build one from scratch instead of using something I downloaded from WordPress.org, but there’s that whole “free time” problem.

Leave a comment

Your email address will not be published. Required fields are marked *