Shape
Blog / / Designer Tools

Typography hacks: Choosing and Pairing Fonts in UI design

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.

FontJoy App
FontJoy 

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.

Archetype app
Archetype app 

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.

Femmebot App
Femmebot

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.

FontPair
FontPair

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.

FontBase
FontBase

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.

Master-Course-Promo-Banner-14

This post was a collaboration between

Elizabeth Alli, DesignerUp

  • Elizabeth Alli

    Elizabeth Alli

    Mindful designer and mentor helping to create meaningful products and experiences.

    More posts by Elizabeth Alli.

    Elizabeth Alli
  • DesignerUp

    DesignerUp

    Read more posts by this author.

    DesignerUp