It's easier than ever to implement beautiful typography online, but it's still helpful to have a few pointers along the way to prevent yourself from unleashing an ugly user experience (opens in new tab) packed with clashing retro fonts (opens in new tab) in random point sizes.
So make sure you bookmark this selection of essential web type resources, covering everything from the fundamentals of typography through to advanced techniques. They'll help you create amazing websites without any typographic fails.
01. Glossary of typographic terms (opens in new tab)
FontShop has assembled tons of concise definitions (and visuals) for every typographic term that you can imagine. When you're confused by an option in the Typography panel, here's where to find your answer.
02. Unicode character table (with HTML) (opens in new tab)
When you're searching for any character's unicode value – or its corresponding HTML entity – this is your one-stop shop. Inserting these special characters via CSS content is also possible; see number 10 in this list.
03. Caring about OpenType features (opens in new tab)
Looking to implement these fancy font features on your website? This article covers exactly how to use the various CSS properties that enable the features, and details when to use them appropriately. These are an easy progressive enhancement for any website, and browser support has become quite good.
04. Professional Web Typography (opens in new tab)
This free online book (although you should donate if you find it useful) by Donny Truong covers the fundamentals of web typography, starting with a brief history of type on the web and moving on to the use of web fonts, creating headings, animating type and much more.
05. Glossary of typographic terms (opens in new tab)
Typography is full of specific and confusing terms. In this article, we've pulled together a glossary of words and phrases you might come across, and explained what each one means. Do you know your descender from your diacritic? No? Look here.
06. Typoguide (opens in new tab)
A great bite-size guide to a number of typographic issue, Benedikt Lehnert's Typoguide is a fab one-page resource covering subjects such as font size and line height, apostrophes, quotes and dashes, and the age-old question of whether it's a font or a typeface.
07. Fontology (opens in new tab)
It's all too easy to fall down the Fontology rabbit hole; it's an in-depth typographic curriculum from Fonts.com that's divided into four levels, each with three or more modules consisting of several sections, covering a wealth of typographic information and guidance.
Read more:
- 63 best free fonts for designers (opens in new tab)
- 5 typography trends for 2018 (opens in new tab)
- 9 responsive typography tips (opens in new tab)
