Web Font Readability Test

Web Font Sizing Comparison

A comparison of font sizing to test the readability of Helvetica on screens.

Over the last few years there has been a movement toward larger font size usage on the web. In 2009 the most used font size for body copy was 13px, followed by 14px, and 2013 is shaping up to be the year of 16px copy. Decent arguments for this have been made and typography designers are rethinking the days of 12px type. You are now seeing these larger font sizes used by top authorities on the subject, like iA, and highly awarded sites like Jetsetter.com.

This page sets out to look at this movement as it relates to san-serif fonts by comparing sizes from 12px to 16px using some of the more common type sets used for the web. This page is using Helvetica Neue as a base knowing it is an OS X only font. Further in the article, Lucida Grande and Open Sans are compared as alternatives for both OS X and MS Windows usage.

All test will use the same initial parameters based on best practices:

The line heights, margins, and padding have been evenly proportioned for all headlines and paragraphs to achieve vertical rhythm.
A general maximum line length near 80 characters is used. Learn More >>
A relative line height of font-size + 50% will be used but +20% should also be considered. Learn More >>
A relative margin of [font-size] + 50% will be used between Headlines and paragraphs to maintain vertical rhythm feom headline on through to the end of a paraghraph.
Body copy color is 73% of black to tone down the harshness of black on white.

Size Comparison

The following section presents Helvatica as body copy at different sizes.

Helvetica Neue | 12px | Black | +50% Leading

This Quarter Is on Fire

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176

Helvetica Neue | 14px | Black | +50% Leading

This Quarter Is on Fire

Helvetica Neue | 16px | Black | +50% Leading

This Quarter Is on Fire

What font size do you think is the most readable?

Web Font Set Comparison

A comparison of Helvetica Neue, Lucida Grande and Open Sans to test the readability on screens.

Each font set will display as the Windows or OS X equivalent. For example, Helvetica Neue, Lucida Grand and Open Sans will be seen on OS X and Arial, Lucida Sans Unicode and Open Sans on Windows.

Helvetica Neue | 16px | Black | +50% Leading

This Quarter Is on Fire

Lucida Grande | 16px | Black | +50% Leading

This Quarter Is on Fire

Open Sans | 16px | Black | +50% Leading

This Quarter Is on Fire

What font set do you think is the most readable?

Side by side comparisons

A comparison of Helvetica Neue to alternative fonts for identifying vertical rhythm.

Helvetica/Lucida Grande | 16px | Black | +50% Leading

Helvetica
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176

Lucida Grande
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176

Helvetica/Open Sans | 16px | Black | +50% Leading

Open Sans
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176

Lucida Grande/Open Sans | 16px | Black | +50% Leading

What font set do you think has the best vertical rhythm?