Typography in Design — Part 2
and how not to suck at it
In Part 1 (Click to read here) we learnt about the major categories of typefaces in use today and how we can recognise them. In Part 2 we are going to go a little deeper to try and understand the basics of typography. This is important as the learnings from Part 1 and Part 2 will help you grasp and utilise all the learnings that i have planned for you in Part 3 (Click to read here)
So, without further adieu, lets jump to Part 2
Baseline
In typography, the baseline is an imaginary line upon which a line of text rests. In most typefaces, the descenders on characters such as g or p extend down below the baseline while curved letters such as c or o extend ever-so-slightly below the baseline. The baseline is the point from which other elements of type are measured including x-height and leading. The baseline is also significant in the alignment of drop caps and other page elements.
x-height, Mean line, Cap Line and Line height (Leading)
x- height is the distance between base line and the mean-line
Mean-line is the imaginary line at the top of the x-height.
Cap-line is a line indicating the height within the font of an uppercase letter
Line height has different meaning when used in different contexts, but in common design parlance consider line height as “Distance between two baselines”
*On the web, baseline is an equal amount of space above and below text on a line
How to figure out the optimum line height?
Type specialists suggest a range of co-efficient which when multiplied by the text height gives appropriate line height.
For headers/display texts : A co-efficient of 1–1.2 multiplied by the text height gives optimum line height.
For body texts : For body texts a co-efficient of 1.2–1.6 mutliplied by the text height gives optimum line height.
- Pro-tip — Google material design recommends using baseline grids in multiples of 4. So, keeping your line height within the ratio in such a way that it is always divisible by 4 gives you the best of both the worlds.
For eg — Using a body text of 20 along with a line height of 28 (20x1.4). Of course, don’t be too rigid with these and play around a little for the right balance.
Baseline grids
What is a baseline grid?
A baseline grid is a series of invisible vertical units that can be used to create consistent vertical spacing with your typography and page elements. It is an invisible way of giving order to disorder.
How to set up baseline grids?
Baselines grids are usually set-up proportionally with respect to your primary body text. For eg — If my primary body text is 16px, i will create a baseline grid, say 4px, so that the line height 20px ( 16x1.25) sits perfectly on the grid. For every other font sizes, adjust your line height according to your baseline grid. Lets assume we set out text hierarchy as :
H1— 24 Px — Line height 28 (24x1.16) (*smaller co-efficients for larger texts)
H2–20 Px — Line height 24 (20x1.2)
Primary Body text — 16 Px — Line height 20 (16x1.25)
Secondary Body text — 12 px — Line height 16 (12x1.34)
This ofcourse is just one of the ways you could create baseline grids. There are many ways that baselines grids can be created and used. Feel free to explore what works best for you.
Letter spacing (Tracking)
Tracking is the typographer’s term for letter-spacing. Sometimes confused with kerning(which is used to adjust spacing between individual letters), tracking adjusts the letter-spacing uniformly over a range of characters.
Tracking affects the visual density of a word, phrase or paragraph. Decreasing the tracking makes the words appear more compact, while increasing tracking increases the amount of white space between letters and words, creating a more airy effect.
Why Do Designers Use Tracking?
Designers apply tracking for two main reasons:
- Firstly, when tracking is increased it can improve the readability of text. Letters and words are more visually distinguished from each other, allowing the eye to process them more easily than if characters were pushed closely together. However, don’t go overboard with your tracking as increased tracking can hamper legibility as well
- Many designers apply tracking to improve the look of typeset text. When using tracking to improve the visual appeal, it is applied mostly to text written in CAPS. Tracking for body texts should be kept at default unless you have a very strong reason for it. Proper use of tracking can give a sort of airy and premium feel to your brand. Of course, there are other factors as well, but i am sure you get the intent.
“While playing around i realised if you keep tracking close to your x-height, it starts looking pretty neat. But thats just me!”
- Increasing or decreasing tracking has the power to reduce the amount of hyphenation in a paragraph, and banish widows (lone words at the end of a paragraph) and orphans (lone words at the top of a page, which should belong on the previous page). But its best to keep tracking of your body text to default and solve this problem by playing around with text length.
Kerning
Kerning(often confused with tracking) refers to the amount of space between two letters (or other characters: Numbers, punctuation, etc.) and the process of adjusting that space to avoid awkward-looking gaps between your letters and improve legibility.
Sometimes a font’s default kerning isn’t ideal for certain letter combinations, so you’ll want to manually adjust it so the spacing between all the letters looks consistent. It’s important to note here that kerning is a visual exercise; it’s about the perceived amount of space between letters rather than the actual distance between them. Kerning involves adjusting your typography to look right rather than creating mathematically equal spacing.
Line length
Reading very long lines of text is tiring for our eyes. Our eyes need constant pauses which are provided by line breaks. In that instance of switching to the next line, our eyes get that short pause. Short, but long enough to keep them going for longer. It’s like an engine that doesn’t run on full power all the time, so it can keep going longer without overheating.
The ideal width of a line of text(for web) is from 45 to 75 characters — including spaces and for mobiles( as per material design) is around 20–40 characters. Anything that reaches far from that range becomes hard to read: Too much line switching when lines are too short and too few breaks for the eyes when they’re too long.
This brings us to the end of Part 2. Now that we have learnt the basics of typography lets jump to Part 3, the final part of the series and see how we can apply our newly acquired knowledge to practice.
