Typography in Design — Part 3
and how not to suck at it
This is the 3rd and last part of the series. Here we take all our learnings from Part 1(Click to read) & Part 2(Click to read) and put to good use. Lets begin!
Choosing a typeface
“Type is hugely expressive: making the right choice is crucial.”
The whole process and perhaps the most imporant one starts with choosing a typeface. Use the following pointers as thumb rules while deciding a typeface. Ahtough there are other factors that you could consider but these are generally a good place to start with :
- Decide the characteristic of your brand : Deciding what characteristics you want your brand to convey. To start with, try and answer the most salient qualities of your brand. What’s your brand personality — is it serious and trustworthy, or jovial and fun? What do you stand for, and what do you want to communicate to your users?
Also think about your target market. What are their interests and aspirations? How do they communicate? This knowledge will help shape your brand identity - Align typeface with your brand’s personality : Make sure the typeface you choose aligns with your brand’s personality. For instance, if you wan’t to convey “premiumness” you don’t want to be stuck with a font that is short, round and exhibits a playful personality. (Remember when we learn’t the various characteristics of typeface in Part 1? That’s how it’s going to come into play now)
- Legibility : Don’t put precedence to aesthetics over usability, EVER! No matter how good your fonts look, if they aren’t legible it’s not going to work. The internet if full of fancy websites that use very “aesthetic” looking fonts but are a pain to read through.
“Tip — In terms of legibility, Humanist fonts with larger x- height are considered to be the most legible”
Pairing font
Great font pairings are essential to great design. But picking great fonts can be quite tricky and time consuming if you don’t do it correctly. We often tend to go by the judgement of our eyes (which is a great thing to do) but inevitably ends up taking a lot of time time.The truth is if you approach this methodically it can be done quite qucikly. Yes yes, i get that designers are rebels, they aren’t restrcited by methods but hey, there always should be a method to madness. Isn’t it?
Choose an achor :
This means deciding on your primary typeface. Once you have finalised your primary typeface you start the hunt for your seconadary and tertiary typefaces.
Its not uncommon to see one typeface being used across one product entirely. While there is no harm in that, the problem with this approach is that it’s too safe and often fails to elicit the emotion that a beautiful typography does.
Find a secondary typeface :
“Contrast is one of the most important principles in typographic design. Any shift in typeface, type size, or type weight should be emphasised.”
— Rob Carter27
Contrast, uniformity & harmony are basic principles that you have to look for when it comes to typography. Sometimes harmony is achieved by contrast sometimes through uniformity. Lets try and understand a few tried and tested techniques that can be used to achieve harmony.
1) Using the same typeface : This is probably the safest approach to match a text (also probably the most boring). However, you need to ensure there is sufficient contrast between your heading and body text. However, one advantage with this technique is that it promotes faster implementation with minimal errors. This approach is also pre dominant in mobiles applications as products tend to stick with just a single typeface as a part of their brand guidelines. Lets have a look at an example below
2) On the basis of x-height : You can create harmony between two different typeface on the basis of their x-height. x-heights that are a complete match or totally different from each other are good candidates, anything in between not so much.
In the first example, Oswald( heading) which is a tall sans-serif typeface goes pretty well with Roboto Slab(Body) which has a standard x-height serif typeface
In the second example i have tried to pair two fonts with the same x-height. Roboto Slab( Heading) has been used with Neuton which again makes for a decent pairing
3) Super typefaces : Some typefaces are meant to be together. They are called super typefaces. Typefaces that come in both sans- serif and serif styles.You simply can’t go wrong by using the styles of one super family. This can be a great way to start developing your typeface-combining skills.
In the example below, Freight Sans Pro(Heading) goes very well with Freight Text Pro
4) Extreme contrast : Font that are polar opposites to each other are generally a good match. However, this might need a little bit of trial and error to find the perfect match as every font may not go very well with your brand image. A good display typeface and a good body typeface will generally go well with each other, better if both the typefaces belong to the same family. Lets have a look at a couple of examples below
5) Same foundry : Fonts pairings from the same author or same foundry are a good option. Type foundries commonly use a base underlying structure to produce different fonts. It’s probably even more common for font authors to do that. If you are a fan of Erik Spiekermann’s work like I am, you would understand what i am saying ;). In the example below FF Meta has been paired with FF Meta Serif, both by Erik Spiekermann.
Well, you can do all of these mentioned above or just go to a good font pairing website such as these below:
https://www.canva.com/font-combinations/
Well, jokes aside, don’t rely entirely on a font pairing website. They are a good place to start but they are definitely not a substitute for experience.
Train your eyes : This bring us to the final and the most important part of the series “Training your eyes”. This will ofcourse require time and effort from your part to be able to judge between good and bad typography. You want to reach a stage where you can tell the difference without having to refer to specifications
Good typorgaphy is closely related to three factors —
1) Font Size
2) Line Height
3) Line Width
The ability to judge a typogrphy will improve tremendously when you can see and understand the co-relation between all the three factors. Matej Latin, has spoked about it in length in his book “Better Web Type” .
He has also created a type game which will help amateurs like us train our eyes and get us up to pace in no time. I highly recommend that you go and play the game a few times if you haven’t already. Its actually quite fun.
https://betterwebtype.com/triangle/
Conclusion
Typography for me has been rather intimidating. But once i dispelled the doubts that i had in my mind, it became an extremely pleasant affair. The process of writing the article has been extremely enriching as well, as i learnt a lot of things while rummaging and collating the contents for this piece. I hope there are at least a few takeaways that you’ve had from this article. If it did help you in anyway, do let me know in the comments. It will motivate me to write more!
Also, I would like to take the opportunity to thank and share some brilliant references without which this piece would not have been possible. You guys make this world all the more awesome. Cheers!
Better Web Type by Matej Latin
http://thinkingwithtype.com/grid/
https://www.toptal.com/designers/typography/typeface-classification
https://viljamis.com/2012/modular-grids/
http://www.verse-co.com/journal/2016/1/27/design-tip-1-use-a-baseline-grid
https://www.indesignskills.com/tutorials/letter-spacing-tracking-typography/
https://www.canva.com/learn/kerning/
https://www.shutterstock.com/blog/3-tips-for-picking-the-right-font-for-your-business
https://www.creativebloq.com/how-to/choose-the-right-typeface-for-a-brand
