Awesome typography tips on how to elevate your designs
Typography can make or break your design. Great designers are masters at typography. In 2019 add awesomeness your designs through typography. Establishing a process of choosing fonts is hard yet simple once you’ve mastered it.
In this article, I unpack lessons I’ve learned over the years experimenting on my process of choosing fonts for my design projects. I hope it becomes a starting point for helping you learn how to choose fonts for your designs. But also encourage you to explore and experiment with fonts and font combinations beyond those you’re familiar with.
I won’t go all nerdy with x-heights, glyphs and other technical aspects of typography and fonts. I assume, dear reader, that you know the basics of typography. For those who want to learn the basics of typography, find extra reading links at the bottom of this article.
Table of contents
- What is the purpose of your design?
- Who is the audience?
- 2 principles when choosing a typeface
- My favourite online resources to help you pair fonts and choose font sizes like a Jedi font master.
- Links to read more on basics of typography.
- My typography style guide template
First things first: normally the words fonts and typeface are used interchangeably but they don’t mean the same thing. As designers it’s important we use specific terms.
If this is TL:DR then skim over to the end for a summary of the article.
You know you are destined to be a typographic master when you have a collection of over 200 fonts but only use less than 20 fonts for all your design projects. So, how do I choose the right fonts for my projects?
What is the purpose of your design?
Before anything else, I usually identify the purpose of my design. What message do I want to convey? Fun, happy, sombre, informative e.t.c What is the main medium of my design? Print or screen.
Typography is key to setting mood, tone and style in your designs.
Who are your audience?
After establishing the purpose of my design, It is crucial I identify the primary audience of my designs. Information about my users such as age, interests, and cultural background influences decisions I make for my fonts.
For example, some fonts are more appropriate for children, fun, games and evoke pleasant feelings. A good example of this is Mikado which has been designed as a friendly and casual type.
Tip #1:
Before choosing a font
- Establish the purpose of your design. The message you want to convey.
- Consider also the medium that your design will be consumed, is it print or screen.
- Identify the primary audience of your design.
2 principals to consider when choosing your font
At this stage, I have established the purpose of my design, identified my primary audience and their needs. The fun begins, finding inspiration and choosing my font. There are two principles that I consider before settling on the right font;
- Readability
- Legibility of a font
1. Readability
Readability is how easily a typeface can be read. I choose typefaces that are conventional and easy to read. I avoid decorative typefaces unless that is the purpose of the design. My to-go fonts are from simple and practical typefaces. I’m also usually mindful of the purpose of my choice font, is it better suited as a header or body text?
My tips for improving readability are font pairing and font sizes. In terms of font pairing its good practice to limit your combinations to a max of three fonts. Normally, I like choosing fonts that contrast with each other, for example, serif header text with sans-serif body text. By doing so, I’m able to guide the readers to read the important text first- headers then body text.
I use different font sizes to create visual contrast when using one font. For example, the AkiliPlus brand uses one font, Avenir. To enhance the visual contrast I use a combination of different font sizes, weights and colours.
2. Legibility
Legibility in simple terms is how well you see the letters. Legibility is dependent on the typeface design (think x-height, counters, letterforms) hence out of your control.
For example, children and people struggling to read, need highly legible fonts with ample letter shapes. A good font family would be Sassoon font which was designed based on Rosemary Sassoon research on which letters bridged the gap between reading and writing in children.
Tip #2:
Legibility is dependent on the typeface design, readability is dependent on the manipulation or handling of the font. A highly legible font can be made unreadable by a designer’s poor typographic design choices. Factors which affect readability include line lengths, font size, leading, font selection, spacing, font pairing, colour and background.
Finding Font Inspiration
Inspiration comes from the work of designers who are masters in typography.
If you’re choosing typefaces for a website or landing page the best inspiration is definitely from other websites. For starters check out Typewolf, it’s a treasure trove for designers. I love that Typewolf curates font inspiration from around the web. They also have font recommendations and in-depth typography guides.
You can also visit your favourite sites and check out what fonts they use.
A good tool for this is FontFace Ninja. FontFaceNinja is a Chrome extension that lets you inspect web fonts by hovering over them. In addition, the extensions allow you to download the selected fonts
Choose font size like a master
I always struggled with how the masters determined the font sizes for their web projects. That was until I stumbled on this great tool, Modular Scale by Tim Brown. Modular Scale is a system for identifying historically pleasing ratios to create scales to determine font sizes.
Modular Scale has a variety of ratios based on geometry, nature, and music. For example, I use a scale based on the perfect fourth 4:3 (A musical scale which gives smaller intervals ). Personally, I still struggle to choose a scale when there’re many to choose from. For tips on choosing a scale to use, please read Relational design by Billy Whited, link at the bottom of the article.
Remember, the Modular Scale method is not a guarantee, it’s only a tool to be used as a guide. Use this method as a starting point and then adjust sizes with your eye.
Update: Another amazing type scaling tool is TypeScale. I love that TypeScale gives you the CSS code with the option to edit on CodePen. It also goes an extra mile to give you a great visual of your headers and body text sizes.
Pairing fonts like a match made in heaven
Font pairing is a skill you have to practice to become a master in typography. I highly recommend you start with Typ.io. Typ.io curates font pairing inspiration from different websites. In addition, the site provides CSS font definitions of each inspiration sample.
Another site that you can check out font pairing inspirations is FontPair where you can filter by font style combinations such as sans-serif and serif, or serif and sans-serif. Others are Typography: Google Fonts Combinations and Typography: Google Fonts Combinations Volume 2.
Once I’ve done all this, It’s time to fire up Illustrator or Sketch or Studio to create my typography styleguide.
I hope that by sharing my process, I have stoked a desire to elevate your designs through typography. But also encouraged you to explore fonts and font combinations beyond those you’re familiar with.
Links in the article
Here and here are great links to learn basics of typography.
Relational design by Billy Whited (It’s a long read but really worth it).
Now together for the TL:DR crowd!
- Before choosing a font, establish the purpose of your design. The message you want to convey. Consider also the medium that your design will be consumed, is it print or a screen. Identify the primary audience of your design.
- Legibility and readability are the 2 important principals to consider when settling on the font of your choice.
- Legibility is dependent on the font design, readability is dependent on a designers manipulation or handling of the font.
- Please don’t arbitrarily choose font sizes. Use the Modular scale method to guide your font size scale.
- Pair fonts like a match made in heaven by finding inspiration on Typewolf, FontPair and other online sources.
I have shared my typography guide that you can use a starting point for presenting your fonts.
Originally published at akiliplus.com on January 10, 2019. I’m happy share my articles on UX Collective — the biggest design publication on Medium with over 200k readers.
