In this section:
Note: All links going to other websites will open in the same window. Use the Back button to return to our site.
Font Comparisons for Use on Websites
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. The following shows examples of readable and unreadable onscreen fonts to demonstrate the importance of font readability.
The first table of font readability comparisons is text-only. 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
- Unicode Fonts
- Open-Source Unicode Typefaces
- Core fonts for the Web
- Typefaces (from Web Style Guide 3rd edition) New
Related Links
