Compare fonts for use on your website

Last updated: January 14, 2019

Note:  All links going to other websites will open in the same window. Use the Back button to return to our site.

Will the fonts that you chose for your website appear as you expect them to when viewed on someone else's computer? This is another one of those tiny things that can make a big difference when evaluating the accessibility of your website.

We put together a font comparison table on our accessibility page back when we first made this site. We wanted to show examples of readable and unreadable onscreen fonts to demonstrate the importance of font readability. Now we put the pages into their own blog post for easier sharing.

The first table of font readability comparisons is text-only. Note that fonts that aren't installed on your computer will be shown as the default font that you've set for your computer. For those of you who don't have all the fonts installed on your computer, the second table is a graphic version of the same table made from screen-capture images to show what the actual fonts look like if they were installed on your computer and how they will look on a user's computer who does have them installed.

Font readability comparisons as text-only

Note:  All fonts in the table are the same font-weight setting and proportional font-size (96%).

Font Readability Comparisons

Table contents

The first column shows clear onscreen fonts and the second column shows fonts that are hard to read onscreen.

Clear Onscreen Readable Fonts Hard to Read Onscreen Fonts
Montserrat
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Baskerville
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Open Sans
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Minion Pro
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
LeagueGothic
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Copperplate
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Helvetica
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Garamond
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Helvetica Neue
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Times
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Trebuchet MS
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Times New Roman
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Verdana
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
New York
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Comic Sans MS (good for dyslexic users)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Monotype Corsiva
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Lucida Sans
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Book Antiqua / Palatino
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Lucida Grande
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Futura
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Chalkboard
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Impact
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Sans-Serif
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Serif
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Arial
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Bookman Old Style
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Univers
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Bodoni BT
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Georgia
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Century Schoolbook
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Andale Mono
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Monospace
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Tahoma (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Courier (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Monaco (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Courier New (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±

Font readability comparisons in a graphic

Note:  All fonts in the table are the same font-weight setting and proportional font-size (96%).

Graphic version of the [font comparison table] for those who don't have the fonts on their computer.

More links about fonts and font sizes

For additional information, check out the following links:

If you have additional tips and tricks for good readable fonts on the web, share them in the comments.

Web typography fun with @font-face

Last updated: March 5, 2015

Note:  All links going to other websites will open in the same window. Use the Back button to return to our site.

Dear typography fans, we found a few entertaining links for your enjoyment.

"The Potential of Web Typography" is probably for the hard-core typography geek. Do as the authors say and read John Daggett's primer about @font-face first. Then read about the potential of web typography. As they say, "fine typography has always been one of the stumbling points of web design." Now, with support for @font-face in Firefox 3.5, new magic is possible.

@font-face is the reason why John is messing with fonts in different browsers. It's fun to watch his article load in the browser because the visual can change (which is exactly why John is messing with fonts. 🙂

Typekit should be mentioned, while we're discussing typography. (It's not really related to @font-face, but it is big news for anyone interested in typography.) Read the Typekit blog to discover what plans Typekit has in store. Here's a snippet from one of the first blog posts:

We've been working with foundries to develop a consistent web-only font linking license. We've built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

It seems that typography fans have plenty to keep them busy in the near future.

Hat tip to Kate Walser for inspiring this little post with her tweet about the link to the potential of web typography article.