While typography itself is a complex and nuanced subject, there are few great tools and shortcuts that I've found to be really helpful when learning to pair fonts and choose better combinations for your UI designs.
So without going into typography theory here are my favorite typography hacks to help you find, pair and manage fonts for your design projects.
FontJoy
Fontjoy uses machine learning to generate pairs of fonts that have been selected to go well together based on principles of typography theory.
Select the level of contrast you'd like to see between them the three sizes and then hit generate.
Fonts with high contrast with be very different from each-other while fonts with low contrast will be almost indistinguishable.
You can further fine-tune the contrast levels manually between heading, subheading and paragraph, lock in the ones you like and run it again until you find that perfect balance.
Archetype App
Archetype app goes a step further to let you fine tune things like size, color, spacing and hierarchy and then visualize your fonts in a page layout.
Best of all you can view your selection on mobile, download the fonts, export the final layout to Sketch or export the CSS to use on your website.
Femmebot
Femmebot is a great way to browse some lovely Google font pairings in context.
Get inspired by beautiful typography layouts and designs.
FontPair
FontPair shows you different combinations of headings and paragraph fonts and where you can view them being used on actual live websites.
Sometimes it's really nice to see how others are actually implementing these pairing in the wild and this site is a great resource for that.
FontBase
After you've collected a number of wonderful fonts that go well together, FontBase can help you keep everything organized on your computer system.
View, organize and search through all your fonts easily, works on Windows and Mac and it's totally free.
...and that's it, my top typography hacks for UI designs.
