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.
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:
-
Reducing eye strain: https://www.wired.com/2013/09/flux-eyestrain/
-
Font comparisons: https://usabilitynews.org/a-comparison-of-popular-online-fonts-which-is-best-and-when/
