Reading on screen

I’ve been on typography spree lately, motivated partly by esthetics, partly by my increasing dissatisfaction with reading text on computers.
Here are some things I’ve learned:

  • Font size in points is misleading. There is no standard, and “11pt” may not mean any particular dimension in the font is actually 11pt. By the way, a point is not a dot but 1/72 of an inch. At the same point size, Verdana is noticeably bigger than Times New Roman.
Font-tests

A point is not a normalized unit.

  • Thin fonts may appear rickety or washed out in a computer screen. You may be better off choosing fonts that are thicker or “blacker”. For example, Georgia, shown in the picture above, was designed for screen reading, and is thicker than Times New Roman.
  • Size is the most important factor for readability. In the web, we’re at the mercy of web designers. Some choose large sizes for text, some small. We end up reading text at smaller sizes than we should.
    Perform a little experiment: take a page printed in 11pt Times New Roman, or a book you’re reading. Sit in front of your monitor, at your regular distance, and open a text document, set at the text size you usually read in (disable any zooming). Now hold the printed material in front of the monitor, at your normal distance for reading. Put the texts side by side, and adjust the font size until the screen text matches roughly. Is it surprisingly big?
    For me, it was. In order to match the sizes I read in printed material, I need point sizes around 18–20 on my desktop computer. Since I usually tried to read at 13-14, it’s not surprising that I’d have eye strain. Here’s a document that advocates setting size to 3 times the lowest value at which you can read.
  • Your browser can help. In particular, both Firefox and Chrome will allow you to set your preferred “base” font size. This does not work on pages whose text size is specified in absolute units (pixels or points). It does work, however, with sites that set font sizes in relative units, like percentages, “ems” or medium/large/small/…
    Many websites are designed with relative font sizes. Examples are Google, Wikipedia, New York Times. Some that use absolute sizes: Facebook, EL PAIS, Guardian.
    Firefox and Chrome also let you choose the default fonts. Default fonts will be used only for pages that don’t specify their own. Few sites defer to your choice of font, but there are some notable ones: Wikipedia and IMDB, for example.
    I recommend that you set Georgia as default serif font, and Verdana as default sans-serif.
    Lastly, you can use zoom, and both Firefox and Chrome will remember the zoom setting on a per-website basis.
    Safari, regrettably, doesn’t offer the same convenient settings.
  • One last thing: it is worthwhile to adjust your monitor’s brightness and contrast settings.

References:

  1. Reducing eye strain: http://www.wired.com/2013/09/flux-eyestrain/
  2. Font comparisons: http://usabilitynews.org/a-comparison-of-popular-online-fonts-which-is-best-and-when/
Advertisements

About Jaime Silvela

My favorite chemical element is Potassium.
This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Reading on screen

  1. viejecita says:

    Which font and size is your main text here ?
    I had to enlarge it to be able to read it without effort.

  2. The size is a relative one: 100%, so if you use Chrome, which I set up for you, it will be larger. As to the font: Source Sans. It’s all provided by wordpress.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s