On this page:
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%).
| 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 of Font Screen Captures
Note: All fonts in the table are the same font-weight setting and proportional font-size (96%).
More Information About Fonts and Font Sizes
For additional information, check out the following links:
- Unit Conversion Calculator New
- EM vs. REM vs. PX – Why you shouldn’t "just use pixels" (PDF version) New
- A Bite-Sized Best Practices Guide for CSS Units: Em, Rem, Px, and More (PDF Version) New
- 2016 W3C Web Style Sheets CSS tips & tricks: Font sizes em, px, pt, cm, in… and the New units: rem, vw… (PDF version)
- 2013 CSS Font-Size: em vs. px vs. pt vs. percent (.pdf)
- List of Typefaces. This is a list of typefaces, which are separated into groups by distinct artistic differences. [Wikipedia] Updated
- The Unicode Font [Wikipedia]
- Open-Source Unicode Typefaces [Wikipedia]
- Core fonts for the Web
- Typefaces (from Web Style Guide 3rd edition)
If you have additional tips and tricks for good readable fonts on the web, share them in the comments.