There are a lot of amazing libraries out there to work with fonts as well as there are a lot of great fonts out there. I enjoy user interfaces with good font pairings and so do most of the users. Therefore to make an amazing UI we need crazy ass font!

In this post I will list some of the font techniques I found useful while developing user interfaces & then list some of the utilities to pick your own crazy ass font pairing.

Scale fonts carefully

It is very uncommon to find that every pixel value from 10px to 24px is used in the UI, so I highly suggest you to establish a size font.

To choose a scale you have to use modular scales. Long story short your system cannot just scale in a linear way. Why? Static increase & decrease in size may be too significant in your UI!

Modular scale basically stays for assigning ratio to the set value: 4:5, 2:3 & golden ratio (1:1.618). Start off with a default value such as 16px (1rem) or any other and then apply the ratio to it. This way you get to have "ugly" numbers but they're the ones you should use.

Of course there are some inconveniences:

• Browsers such as firefox & chrome handle subpixels differently. Avoid fractional sizes e.g. 48.828px, 24.027px etc.
• Use tighter ratios for higher amount of sizes. Sometimes you just wish to have a size between 12px & 16px.

Hand-picked scales can also be a great way to pick sizes. You get a full control over the sizes you use as well as you avoid rounding issues.

Pick them carefully as well

While not every font is amazing I believe you should use enriched fonts that support a high variety of font weights and characters.

One of the good examples of a poor font in terms of character support is Zilla Slab. Even though it offers a great serif font family look and provides its own purpose, it has its cons. Mozilla's official site uses that font but let's assume that you're russian or you speak any other cyrillic-based language. In that case, the font would fallback to the sans-serif typeface for that single reason.

Not sure if this is true but typefaces that come in a lot of different weights tend to be crafted with more care and attention to detail than typefaces with fewer weights. Thanks Google fonts has a rich filter tool to sort for styles.

Optimization is the way to go

Fonts tend to have a purpose. Simple as is, headline fonts usually have tighter letter-spacing and shorter lowercase letters, while fonts that are meant for paragraphs do vice versa.

This tip has to help you with picking fonts that will be listed in some inspiring & great resources below.

Notable resources

There are a lot of tools and resources you should use to ease your own work. It's not always the case for some things but typeface selection may be hard sometimes.

There are a lot of font libraries, distributors and directories but there are some that deserve to be mentioned.

Google Fonts

Is known by everyone and is a completely free utility that you should use to make the web more beautiful, fast & open through great typography.

Apparently, all of you already know what it is so why not also mention the font pairings catalog provided by it. Whaaat? Yep, it exists & this is why you should be reading my post carefully.

FontForge

Aha, not a library but a free & open-source font editor for all major platforms for any of you who's interested in trying themselves at being a designer.

Not sure if this post can be considered an introduction to typography but it certainly can be a small course to web design.

Archetype

It was previously mentioned before that you could use hand-crafted scales but Archetype automates the modular scale calculations & no mathematics formula needed.

It also provides a good pairing tool but there's always a better inspiration you know.

Beautiful Web Type

Guides you to only the best open-source typefaces. It is a great inspiration catalog that provides some good pairings for free.

Not only you can filter by font families but you can also explore some of the great fonts, providing a full description including ligatures, special characters, figures etc.

Featured Type

Yet another curated gallery of typefaces with some remarkable & finest fonts. It feels like there's a font for everything when you visit this great site but who knows, maybe some good experiment may bring typography to the next level.

Other than that you might struggle pairing them all up but there is a tool that can you help you with it.

Font Pairings By People

Try the pairings and see how they look in your site.

Good combinations require experiments but there are times when you can't just think of anything good. This is why there's a list of available pairings. Check them out.

Honestly, working with typography is hard but it's always a win-win situation! Just make sure you style everything correctly. To find more inspiration check out more resources I use.