Computer Screen Legibility

These files support investigating two issues around screen legibility:

While many screens may look fine in the showroom displaying photos—because the brain fills in so many details—small text rendered poorly is a more taxing test. The brain can still fill in the details but the cognitive load is much higher, which shows up as reduced comprehension density (amount comprehended in a given time) and fatigue.

Color, brightness, blackness, reflectivity, and (if gaming or watching movies) speed are also important screen characteristics to consider, and largely are not covered by these tests.

What To Look For

Read the test text. Notice how easily it scans. Do your eyes keep tripping over words? Do you have to go back and re-read some text, or slow down? Can you easily follow the line, or are adjacent ones too close, such that you mis-track? On a good screen, with a font that works well for you at a size that works well for you, reading will be quick and effortless.

Look closely at the pixel structure, including the inter-pixel separation. The latter can lead to the screen door effect (like looking through a screen door)—especially an issue on LCDs. The black, inter-pixel gaps present in the background can interfere with our vision's edge detection processing, which occurs very early in the vision processing system. Such interference at that stage can mean later stages have to be engaged to detect the edges of the text characters. Notice if, sitting at the distance you will be in normal use, this is an issue for you.

Screen Shots

Here is a 1600x1200 screen shot of NetBeans (a Java Interactive Development Environment). This layout has very high information density. I find it comfortable to read all day on my current 20" Sony Multiscan G500 CRT, which puts the pixel density at 102 dpi. It might be hard to read if viewed at a significantly higher density, such as the 132 dpi of a 17" laptop at 1920x1200, where a larger font size might be called for.

The font used in this NetBeans shot is QuickType II Mono at 8pt. (As the bold face of that font has a wider pitch than the regular face, I mashed in one which is the same width—the bold face from Bitstream Vera Sans Mono—for the font you actually see.)

The sample text file in the righthand pane of the NetBeans shot, "A Wheel By Any Other Name" is used for the comparisons below.

All of the sample files referenced from this page are available.

Font Comparitor

The following panes can be used to compare two different font+size renderings of the sample text file. Look for the font+size which works best for you. Note that, at such small point sizes, you want to pick both the font and size. As there are so few pixels to work with, the font designs don't really take on their salient characteristics until larger sizes, and hand tuning and hinting of fonts at these smaller sizes can make a significant difference in legibility. This may mean one font is more legibile at 8pt, and a different one at 10pt. Find the size and font that works best for you as the "default" way you want to read fixed-pitch text on the particular display you're viewing.

Bitstream Vera Sans Mono
Courier  (9 & 11 pt only)
Courier New
DejaVu Sans Mono
Letter Gothic MT
Lucida Console
Lucida Sans Typewriter
QuickType II Mono
8 pt
9 pt
10 pt
11 pt
Bitstream Vera Sans Mono
Courier  (9 & 11 pt only)
Courier New
DejaVu Sans Mono
Letter Gothic MT
Lucida Console
Lucida Sans Typewriter
QuickType II Mono
8 pt
9 pt
10 pt
11 pt
Test text in selected font 1
Test text in selected font 2

Choosing A Small, Fixed-Pitch Font

For those of us who sit in front of screens for hours a day, including reading lots of text, screen legibility can be very important. While I enjoy the beauty of well-designed fonts rendered in larger sizes, surrounded by lots of whitespace, as much as the next designer, I also recognize the "form vs function" tradeoff in use of precious screen real estate.

The appropriate choice for that tradeoff depends largely on where the presentation falls along the spectrum from entertainment and visual impressions (right brain) to more linear intellectual information (left brain). The files here support decisions regarding high density of textual information, which is more common for left-brain activities. And the fixed pitch part? They're still the best for programming, where layout and alignment are important and doing it by hand is the current state of the art (maybe not for long). When I'm not programming, I seldom use fixed-pitch fonts.

Use the Font Comparitor above to select a font and size which best suits you from the given small, fixed-pitch fonts.

Font Density Metrics

The following table shows metrics relating to font density for each of the font samples available in the screen shots. As a measure of vertical density, the number of lines visible within the fixed pixel height for the screen shots is given, rounded to the nearest whole line. As a measure of horizontal density, the width required for 80 characters is given. That width excludes the 76 pixels for the window trimming, line numbers, and scroll bar which are present in the screen shots.

The relative density of the fonts is indicted by the percentages relative to metrics for a base font, with green indicating more dense and red indicating less dense. A '—' entry indicates the metric is the same as for the base font. We used "Courrier New" as the base font as it's the default fixed-pitch font on Windows, but any font could be used (the original plan was to make the table dynamic based on a user-selected base font).

Font Family Size Visible 80-Char Width
Bitstream Vera Sans Mono 8 pt 60 lines +7% 563 px
9 pt 56 lines +8% 647 px
10 pt 47 lines -4% 733 px
11 pt 44 lines -6% 817 px
Courier 9 pt 65 lines +16% 645 px
11 pt 52 lines +11% 731 px -11%
Courier New 8 pt 56 lines base 565 px base
9 pt 52 lines base 648 px base
10 pt 49 lines base 734 px base
11 pt 47 lines base 817 px base
DejaVu Sans Mono 8 pt 60 lines +7% 564 px
9 pt 56 lines +8% 647 px
10 pt 47 lines -4% 733 px
11 pt 44 lines -6% 817 px
Letter Gothic MT 8 pt 56 lines 564 px
9 pt 52 lines 648 px
10 pt 47 lines -4% 733 px
11 pt 42 lines -11% 818 px
Lucida Console 8 pt 70 lines +25% 562 px -1%
9 pt 65 lines +25% 646 px
10 pt 56 lines +14% 730 px -1%
11 pt 53 lines +13% 814 px
Lucida Sans Typewriter 8 pt 60 lines +7% 563 px
9 pt 56 lines +8% 647 px
10 pt 49 lines 732 px
11 pt 47 lines 817 px
QuickType II Mono 8 pt 60 lines +7% 563 px
9 pt 56 lines +8% 647 px
10 pt 52 lines +6% 731 px
11 pt 49 lines +4% 816 px

What Is The Point?

A point, as relevant to font size, is 1/72nd of an inch. It is resolution independent, so that a character from a particular font rendered at a particular point size should be the same size—as measured with a ruler—everywhere.

Regrettably, that is not the case within much of computing, and particularly in Web technologies. The point is often fixed to a particular number of pixels, and the resolution of display devices is often assumed to be some constant, such as 75 dpi or 92 dpi. So, no matter how careful you are to specify resolution-independent sizes, you'll get what you get.

Discussion Of Fonts

Starting with density metrics, the horizontal densities of the various fonts are identical within rounding error, with one exception, which is what we would expect for fixed-pitch fonts. Courier at 11 pt is the anomoly, being 11% more dense. I wonder if the font file information is incorrect and the font is actually 10 pt, which would bring it into alignment with the others.

The vertical density of Lucida Console is the highest: up to 25% more dense than Courier New. It achieves this by having no vertical separation between lines, with the descenders of one line touching the ascenders of the next. I find it hard to read quickly due largely to this density.

Courier and Courier New are serif fonts. This makes them less plain, and thus more book like. Courier New pays about a 6-8% cost in vertical density over many of the other fonts, which I think adds to its legibility and is needed due to the extra ink for the serifs. I would tend to use this when I needed a fancier look for fixed pitch, which isn't often. Otherwise, I prefer the clean look of a sans serif font for rendering text in smaller sizes and for the purposes where a fixed-pitch font is appropriate.

My Favorite

My favorite of these fonts for legibility is QuickType II Mono. Its vertical density is on par with many of the other fonts, yet it seems more spacious. It achieves this by the characters each being slightly smaller, while being set within the same space as in the other fonts.

For example, compare 8 pt QuickType II Mono and Lucida Sans Typewriter, which have the same density metrics. The difference is partially that the x-height (approximately the height of a lower case 'x') is less for QuickType II Mono, but also that the character width extent is generally less, i.e. its lines don't extend as much out to the bounds for the character. For example, look at the word "two" in the first line of the article. In Lucida Sans Typewriter it seems each letter is touching the next, whereas they're less "crowded" in QuickType II Mono. Conversely, for the lower case 'm' the designer sacrificed the separation from adjacent characters to give more space between the stems.

My decision for small, fixed-pitch fonts is based on legibility, as these are intended for utilitarian purposes. I pick the one that provides the best conprehension density for me, and then try to understand why. If I'm looking for a pretty font, I hope I'm not limited to fixed pitch!

–Dan Craft  (Last updated: 2008-07-02)