loading...

Simple, Readable Fonts Available Via CDN

mattymaloney profile image mattymaloney ・2 min read

Fonts to consider for super-readable latin alphabet copy.

Raleway

New to me, and I like it. But I'll need to look at it for a month before I can decide to use it. Sans-serif, but the q and l both have fine serifs, and the M does not have that long center like Helvetica M. Speaking of comparison to Helvetica, the em height is better, leading to less oblong letters. I'm not a fan of the W.
https://fonts.google.com/specimen/Raleway

Roboto

By now a classic. Heavier than Raleway. Cleaner and more traditional?? than Raleway.
https://fonts.google.com/specimen/Roboto

Helvetica

Wonderfully easy to read letter-to-letter, word-to-word. Unfortunately, from a broader viewpoint, e.g. looking at the whole screen, Helvetica text just doesn't have the calm appeal I'm looking for. When I see it, I always want tampermonkey again so I can have it replaced on the fly.
https://www.fonts.com/font/linotype/helvetica

Rooney

Probably the only serif font that will make this list. But I will probably only use it for sites with less copy.
https://www.janfromm.de/typefaces/rooney/overview/
https://www.janfromm.de/typefaces/rooney/std/

Verdana Pro

Verdana was king of "modern" for years. I find it a bit tiresome now, and it takes up space that I'd rather leave empty. However, I just noticed Verdana Pro today, and maybe that's the happy Verdana that uses the space I want to give it. Probably Windows only, or only for machines with Microsoft Office installed.
https://docs.microsoft.com/en-us/typography/font-list/verdana-pro

https://fonts.google.com/specimen/Quicksand
https://fonts.google.com/specimen/Ubuntu
https://fonts.google.com/specimen/Karla
https://fonts.google.com/specimen/Lato
https://www.fonts.com/font/linotype/futura


Other Font Resources

Identifont

For searching and comparing fonts.
http://www.identifont.com/index.html

Microsoft's Font List

Not a list of web fonts.
https://docs.microsoft.com/en-us/typography/font-list/

Discussion

markdown guide