11 Font Pairing Tools For Better Legibility [Updated]
When it comes to online content, we want to make sure it is valuable, based on facts and helpful. But one important “detail” is sometimes neglected and it is legibility. Do designers check if websites are comfortable to read? Do they consider font pairings?
Legibility is crucial, especially for websites which are focused on providing lengthy content such as magazines and blogs. But not only these should put effort in the legibility check and optimization.
One of the most significant things to consider when designing web apps and websites is what fonts to use.
Should you stick to Arial or Helvetica? What about the modern ones such as Open Sans and Roboto? Serifs or Sans Serifs? Or combination of both?
If you have some spare time, you may head off to FontReach – an online tool ranking the web according to font – and check what are the most popular fonts used on websites today. Surprisingly or not, Arial is the font used the most – 604, 158 sites. The second place is for Helvetica Neue, used on 281,150 websites and Verdana is on the third place with 258,968 websites.
You can check all the top fonts here.
Using the statistics, we can draw the conclusion that web designers and developers prefer Sans-Serif fonts. Why is that? Arial is one of the oldest fonts used on the web and somehow a default one, if you are not using any particular framework. Bootstrap, on the other hand, have Helvetica Neue as a default font in their main css file. This might be the answer for the popularity of the top two typefaces.
Moreover, serifs are usually considered as more decorative fonts but it does not automatically mean that they are less legible.
Contrastingly, Sans Serifs are perceived as the ultimate choice for websites as they provide better legibility. Again, this does not automatically mean readable.
Sans Serifs and Serifs Combined
In the last couple of years, many websites combine Sans Serifs with Serifs which proves to be an eye pleasing combination. Let’s take Smashing Magazine as an example for this trend. The main titles are presented by using Skolar Bold which is a robust serif, while the main text is laid out with Proxima Nova.
The H2 is defined by Skolar Bold (Serif), the intro text is also with Skolar Bold and for the main article text they use Proxima Nova (Sans Serif).
In terms of legibility, there is no doubt that the titles, subtitles and the copy are easy to read which results in better comprehension of the written content.
A vital role in legibility is also considered the content styling. What is the appropriate line-height for both titles and copy? What about the font sizes? Can letter spacing help?
It used to be a bit easier before the responsive design and all these devices, as people read content only on desktops. Now, not so much. Different device sizes should be considered when designing a responsive size. A Sans Serif typeface can be legible enough on desktop but on smartphone to be a complete disaster. Serifs also can look really good on desktops and totally failing on a mobile phone.
Font Pairing Tools to Help You Choose
Mixfont is a new tool which allows you to pair fonts in an innovative way with the help of AI. The team behind it wanted to help designers and developers by creating a tool that will ease the challenging task of choosing the right fonts for any projects. You can start easily choose the best pair for you app or website. The greatest thing is that you are able to see how a particular pair will look like when it is applied in various interfaces such as blog post cards, an app login screen, an app lists or a calendar. A tool worth using!
If you keen on using free Google Fonts, you may want to check FontPair. This online tool gives a helping hand for designers to pair and choose fonts for their designs. There are different categories to choose from: Sans-Serif/Serif, Serif/Sans-Serif, Cursive/Serif, Cursive/Sans-Serif…
This is a great online tool with some text available to manipulate. You can choose from a long list of fonts and see if the combination looks good enough.
Typ.io is more of an inspiration place as the team searches and reveals the choices of other designers when it comes to typeface combinations, usage. You can use it as an inspiration or a place to check what is trending at the moment.
Font Flame is advertised as a Tinder font pairing because the same principle of hate and love is applied to font combinations. You can either love or hate a particular combination and typefaces names are displayed for you to see. You can see what is trending and there is also a My Type section where you can see what you have liked.
Canva built a tool which can be quite helpful to determine what font goes well with others. You simply choose a starting font and then the tool gives you possible combinations with other fonts. It is quite handy if only have one font selected and cannot choose what will be a suitable match.
Yet another great online tool to help you decide on fonts. You are provided with a title and some body text. All the possible font families are on the right side for you to choose. You also have the option to switch between dark and light background and select All Caps.
This project is using Google Font library and Æsop’s Fables to present different font combinations. A collaborative and ongoing project which is quite inspiring. If you have an idea for a font combination and a favourite Æsop fable, you can contribute on GitHub.
JMT is a collection of font pairings from Hoefler & Co and Typekit. You can see various combinations and figure out (or not) if any is good for you. A nice source of inspiration.
Typewolf is also a typography source of inspiration which explores the work of fellow designers to present different font combinations and how they are used. There are some nice features available when exploring a particular font, such as Similar Fonts, Suggested Pairing and Closes Free Alternatives on Google Fonts.
Created by Aura Seltzer, TypeConnections is a great game which will help you learn how to pair typefaces. The whole process is presented as one that you see on dating websites. You have some potential “dates” for each main character and you play the role of the matchmaker. While you are playing, you learn a lot about type history, technology and you deepen your connection with type.
Additional Reading & Sources:
- Legibility, Readability, and Comprehension: Making Users Read Your Words
- Four Techniques for Combining Fonts
- Serif vs. Sans Serif Fonts: Is One Really Better Than the Other?
- Serif vs. Sans for Text in Print
- Measure Text Readability
This post contains affiliate links to MyFonts.com which helps the author to earn small commissions to continue searching and writing about valuable information for designers and developers.