As a designer, typography is one of the elements that cannot be missed or ignored when you work on a project. If you are starting to work on the UI part, choosing fonts is one of the first steps you are taking.
You will choose the family fonts keeping in mind the type of product you design for, also need to align with the brand and maybe there are other constraints as well. Either if you are building a product or you just work on a personal project, you start to define headings, body text, buttons, etc. for your future design.
We define those from the beginning to help us keep consistency between screens, for a good visual hierarchy, spend less time on choosing a font size and line heights, but also help the developers when you hand off the design.
PS: There are some great tools that will help to define the right proportions and sizes for that, here are some that I use: https://gridlover.net/try or https://archetypeapp.com/
If you struggle to choose fonts for your project, or you are just looking for inspiration, there are many websites out there that can help you find beautiful types and examples of how you can combine them.
I want to share with you some of my latest font pairings that I am using or am going to use in my projects. There is more emphasis on the main font, you can combine the body/secondary with anything else that you think it might suit your needs.
Free Google Fonts
If you are using Figma as your main Tool to design, you will probably find those fonts already installed. If the font doesn’t appear, you can download the family from Google Fonts and install them on your laptop/PC. Here is a link to a FAQ page where you can find more info about Google Fonts: https://developers.google.com/fonts/faq
1. Epilogue and Plus Jakarta Sans
This is a great typeface for the web but also for graphic design, thanks to the many styles that came with it (18 to be precise), allowing you to play with it and build beautiful typography. It also has a variable style with weight axis. Plus Jakarta Sans can be also used for headings, but in this combination, I think it works great since it’s a good readable typeface that complement Epilogue.
Epilogue: https://fonts.google.com/specimen/Epilogue
Plus Jakarta Sans: https://fonts.google.com/specimen/Plus+Jakarta+Sans
2. Unbounded and Work Sans
This is the combination that I am currently using on my portfolio website. Unbounded got my attention the first time I saw it. I like the curves on some letters, makes it feel playful and friendly, also the ink traps bring some modern detail to this typeface. Paired with Work Sans, this looks like a perfect match for me.
Unbounded: https://fonts.google.com/specimen/Unbounded
Work Sans: https://fonts.google.com/specimen/Work+Sans
3. Work Sans and Open Sans
Designed by Wei Huang, a type designer from Australia, Work Sans is a typeface family that is based on some early Grotesques fonts. Beautifully adapted to work great on screens, it’s also a good typeface for graphics and print. Open Sans is one of the most friendly and used typefaces on Google Fonts because can be used on the web, print, and mobile but also from the amount of character sets including Latin 1, Latin CE, Greek, and Cyrillic.
Work Sans: https://fonts.google.com/specimen/Work+Sans
Open Sans: https://fonts.google.com/specimen/Open+Sans
4. Sora and Noto Sans
When using Sora with bold weight as headings, that is the moment when this typeface really shines! I love the lower “y” with the little ink trap that gives the font a modern look, and number characters are awesome! I think Sora works great with any other sans-serif typeface out there, but I picked Noto Sans as a good partner for this pairing.
Sora: https://fonts.google.com/specimen/Sora
Noto Sans: https://fonts.google.com/noto/specimen/Noto+Sans
5. Syne and Lato
Syne has atypical font weights styles that start with a narrow regular style that expands in wideness once you make it bolder. I would consider this typeface more suitable for print and graphic design, rather than web and mobile, since the wide letters may need more space on a screen, but if you still want to use it on the web, take it as a challenge that will boost your creativity. As for Lato, in this pairing is just the older brother that will help and support the younger Syne along the way.
Syne: https://fonts.google.com/specimen/Syne
Lato: https://fonts.google.com/specimen/Lato
Free for personal use fonts
The free-for-personal-use typefaces can only be used in your portfolio website or print, but also as school projects for example. So feel free to play with them as long as you are not using them in a commercial project.
6. PP Neue Machina and Work Sans
PP Neue Machina is one of my favorite inktrap typefaces. Combining some monospace type features with prominent geometrical shapes, this typeface brings a modern look and feel to your designs. Use it as headings and combine it with Work Sans for body texts for perfect results.
PP Neue Machina: https://pangrampangram.com/products/neue-machina
Work Sans: https://fonts.google.com/specimen/Work+Sans
7. Srbija Sans and Nunito
I am not sure exactly where I’ve first seen this typeface, but I somehow landed on the website, downloaded it, tried it, and love it! The free version comes just in bold, but you can play around with different sizes. The thing that got my attention is the curve on some letters, reminds me of Unbounded somehow. For this one, you can try Nunito as a pair.
The website language is Serbian (I guess) but the download button is right on the bottom left part.
Srbija Sans: https://www.srbijasans.rs
Nunito: https://fonts.google.com/specimen/Nunito
8. Clash Display and Roboto
Clash Display it’s a beautiful typeface that works better on large sizes. It has small apertures that give the impression the letters are squeezed. Combine it with Roboto, another hit on Google Fonts, this typeface has some friendly open curves and a variety of weights.
Clash Display: https://www.fontshare.com/fonts/clash-display
Roboto: https://fonts.google.com/specimen/Roboto
Wrap up
Hopefully, you will get some inspiration from this article, and you will use some of those combinations in your next project.