Pick better fonts 🔤
A guide to finding the right typeface for your project.
Recognising the right typeface is a skill that requires practice and experience. The more time you spend analysing and using fonts the more you recognise subtle details in type that impact the characteristics of a piece of design. It’s a process of training your intuition to recognise how details within a typeface will affect the feeling of a piece. However there are some easy rules we can follow and basic education that will help us make more informed decisions.
1. Stop using DaFont
The first step of this guide is to stop using DaFont or Creative Marketplace for your fonts if you weren’t already. Don’t get me wrong, these fonts can be great for one time uses, such as wedding invites or Halloween posters but for professional branding projects they will not do. Rather than say the fonts are of bad quality I prefer to use the term 'robust’. To call a font robus it must work at both small and large sizes, be free of imperfections and have proper kerning pairs with many weights and glyphs. It should be baseline and optically adjusted and routed in a strong design concept. The font is robust because you can use it in lot’s of scenarios and it holds up in terms of legibility and aesthetic. Fonts that are the most robust have been made by professional typographers within an agency called a foundry, they will not be free to license but many foundries will still give you access to them via Adobe Fonts, Google Fonts or with trials.
2. Use the correct vocabulary
I don’t want to go too in-depth into technical terms around typefaces as we’re not trying to make a typeface so feel free to skip the next section if you are confident talking about typography. However it’s important to understand key terminology in order to communicate with other designers your intentions and concepts. It’s also important to understand details of typography such as contextual alternates and ligatures as it will help you distinguish well made fonts from the many, many free fonts you can find online.
Typeface
A family of fonts ie. Sabon.
Font
A specific cut of a typeface ie. Sabon Bold.
Text Transform (CSS)
UPPERCASE, lowercase, Sentence case, Title Case, etc. Here is a quick tool to transform text to a case if your application does not support changing case.
You should always type in sentence case and use the uppercase feature within an application to change case, that way you can quickly take one action to revert back to sentence case.
Sans serif & serif
The two main categories of typefaces which refers to the addition of decorative nibs at the ends of strokes (serifs) or the omitting of such details (sans-serifs).
Humanist & grotesque
A trending category that represents a geometric sans serif typeface with slight deliberate inconsistencies that make it feel more ‘human’. Circular by Lineto is a famous and very popular example, you will see this trend heavily adopted in product design. See links in further reading for more information of type styles.
Weight
Bold, Medium, Regular, Light etc. The thickness of the typeface.
X-height
Distance between the baseline and the mean line of lower-case letters in a typeface. Often the horizontal stroked of ascending characters will also match this height for visual harmony within the typeface. The contrast between the height of ascenders and the x-height is a key identifying feature of a more traditional typeface.
Display/Text
Sometimes a typeface will come in two options, display and text. It is what it says on the tin, display typefaces may be more stylised with extra flourishing and exaggerated thick and thins, it should be used for short sentences at larger sizes. Text is used for, text! It’s often more paired back with an emphasis on legibility at smaller sizes while maintaining the stylistic goals of the corresponding display font.
It’s very rare to use a display typeface for body copy and should only be used as such when deliberately trying to break the rules.
Kerning
Although kerning is more about typesetting, fonts will already have kerned pairs baked in as the type designer intended the font to appear (using Metric kerning in Indesign). It’s important to recognise that some fonts will have tighter kerning pairs than others which change the overall appearance of how the font was intended to look.
Std, Pro
You might find some foundries offering fonts as Std or Pro. The difference is often in the glyph set and languages available. A standard font will contain your traditional Latin alphabet and key punctuation glyphs however a professional font may contain multiple alphabets and an extensive glyphs set such as arrows and shapes.
TTF, WOFF, OTF
File types which are interpreted by software to display typefaces based on the unicode system. OpenType should be used primarily with TTF used for variable typefaces. WOFF is a smaller font file used for web and digital applications.
Variable fonts
Uses a number system (similar to CSS) between 100–800 to allow the user to accurately control weight and width. Links to further reading at the bottom of the article.
Contextual alternates
You may find an OpenType font comes with these, they are as the name suggests, alternative glyphs for certain characters, a good example is an ‘a’ which can be shown with a small ascender or stylised like an ‘@’ inside the @ symbol.
Monospace
Where each character occupies the same physical space within a word (only when using Metric kerning in InDesign), often used in IDE’s where it improves legibility to help text align vertically.
3. Semiotics
It’s important that the fundamental style of the typeface aligns with your goals. Here are a few examples:
😊 Rounded = fun playful cute
🛥️ Uppercase + tracking = modern sleek luxury
https://www.daltonmaag.com/library/aktiv-grotesk
📖 Serif + low x-height = traditional serious
https://www.myfonts.com/fonts/linotype/sabon/
🥝 Serif + high x-height = organic fresh human
https://www.colophon-foundry.org/typefaces/value-serif/
🏢 San Serif + bold = modern serious corporate
https://optimo.ch/typefaces/antique_legacy
🪵 San Serif + condensed = letterpress craft artisan
https://f37foundry.com/type-tester/f37-judge
👩💻 Mono spaced = technology code build
https://lineto.com/typefaces/unica77-mono
Being intuitively aware of visual connotations is an important part of design in general, not just typography. Making sure you are constantly engaging with the design world will help you stay up to date with people perceive visual language.
Now that you are intimately aware of the connotations behind the fonts you are choosing it’s up to you to align to these connotations or deliberately rebel against them.
4. How to find typefaces
Now we have a style of typeface in mind we actually need to find them. I covered the importance of keeping your design resources organised in a separate article here but let’s look at how we can explore the endless options of typefaces available to you in an efficient manner.
This is the process I would follow:
i) What’s in your mood boards?
Can you steal any fonts straight from your visual inspiration, they may not be the right choices but they help give context as you collect more options.
ii) Fonts already installed
Spend no more than 15 minutes exploring fonts you may already have installed and use a sample piece of text or word duplicating every time you come across a font that you like.
iii) Look at your favourite foundries
As a designer you are most likely to have your personal favourite type foundries that make the prettiest fonts. See if they have any options for you and embrace the multiple tab life.
iv) Try sites like Fonts In Use or Typewolf
Rather than looking only at type foundries, try some design blogs such as Fonts In Use and see what fonts other designers have used. It can also help to see the font in context as it can often look very different based on how its been set.
v) Font distributors
If you are still struggling for options, hit the big ones, MyFonts, Google Fonts, Adobe Fonts and use their filters to explore their many thousands of fonts. I would recommend holding off before diving head first into these distributors as their many options can be overwhelming and Google Fonts, because of the accessibility, means many of the fonts are used everywhere and may not give you that bespoke branding aesthetic you should be aiming for.
5. Test your typefaces
Make some mockup posters or website pages to get a really good idea of how your typeface can be stretched and pulled into different scenarios. Try oversized type on posters and also tiny body copy disclaimers. See how it looks in a block of text and try adjust the tracking and line height to see what effects you can achieve. If you are using that font for a wordmark that should also be one of the first things you check.
Use InDesigns ‘Fill with placeholder text’ to quickly generate some lorem ipsum.
Summary
Hopefully this has provided you a bit more structure and understanding to using fonts in your design. As I said at the start, picking the right font is a case of trial and error and is only improved through continuous practice. However if you follow my suggestions here you can get a bit of a head start.
Fonts used: Ballinger by Signal & Erode by Indian Type Foundry
