CSS For Designers (3 Part Series)
Choosing a typeface is a critical part of any design project, but there’s more to typography than picking a couple of nice looking fonts and hoping for the best.
Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.
Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?
There’s no quick fix, but here are 20 top resources for web typography today.
The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.
A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.
A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.
One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.
Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.
A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.
OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.
These tools can help you decide and improve on typographical choices.
If you want your font sizes to feel coherent, rather than random, a scale can help.
To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.
This tool lets you experiment with variable fonts and their different feature sets.
If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.
There’s more to life than Adobe Fonts, Google Fonts and Monotype.
A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.
This is another collection of high-quality open-source fonts.
I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.
I know, this was mentioned above...but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration – a fantastic resource.
Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.
A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.
Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif + serif, sans-serif + serif, etc).
What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.
Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.
These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.
Originally published on CSS For Designers.