Get resource (opens in a new tab)pairing-notes.example
About this resource
Pairing Notes shows 220 typeface pairings set in real layouts: a blog post, a pricing page, an app screen and a poster, so you judge the pair in context rather than in a two-word sample. Each pairing explains why it works, lists sizes and weights used, and suggests a free alternative for each paid font.
It's useful for designers choosing type for a new brand and developers who want something better than the default stack. The site is free and pairings can be exported as CSS snippets. The caveat: it covers Latin scripts only, and some suggested free alternatives are noticeably weaker than the originals, which the notes admit.
Highlights
- 01Every pairing set in four real layouts
- 02Free alternative suggested for each paid font
- 03CSS snippet with sizes and weights