10 great web type resources

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 packed with clashing retro fonts in random point sizes.

So make sure you 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 pitfalls.

01. Glossary of typographic terms

Get your type terminology right here

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)

Need a unicode value? Find it here

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

This article explains how to unleash all those fancy font features

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

Here's a great and comprehensive guide to web type

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. Best Practices of Combining Typefaces

Digest this article before mixing your fonts

Just because you like two particular fonts doesn't mean that they'll work together on a page. Combining typefaces is an art, not a science, but if you follow these best practices from Douglas Bonneville then you won't go too far wrong.

06. Typoguide

Eight big typographic issues are tackled in this useful one-pager

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

Fonts.com's Fontology is a deep well of typographic knowledge

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.

08. The Elements of Typographic Style Applied to the Web

Bringhurst's type bible, adapted for the web

Robert Bringhurst's book, The Elements of Typographic Style, is a must-read for anyone working in typography, or indeed anywhere in the graphic arts. Here Richard Rutter applies its lessons and principles to the web, explaining how to accomplish them using HTML and CSS.

09. A CodePen template for implementing Text on a Path

SVG makes it pretty easy to render type on a line

Traditionally the way to do text on a path online has been to make it in Photoshop and do it as an image, but with SVG you can do it right in the browser. This CodePen template is a great way to get started, but don't overdo it.

10. Special characters in CSS generated content 

Nail those special characters with this reference

Special characters are the web's own special legacy nightmare. In this handy reference, Alan Hogan explains how to use special characters in CSS generated content without getting an ampersand and a string of hex.

Additional words: Peter Nowell

Parts of this article originally appeared in net magazine issue 284; buy it here!