A beginner’s guide to web and mobile typography
As a non-formally educated designer, typography was something that I struggled the most with initially. So much jargon, so many typefaces to choose from, and so many use cases to worry about would leave me baffled!
At first, I played it safe and just worked within the recommendations from HIG and Material design. But slowly and steadily, I have learned enough to start enjoying and experimenting with it. In this article, I am summarizing what I have learned so far, in the hope that it will help others as well.
Specifically, we will go over the:
- Important terminology
- Font types and where to use them
- 7 rules of thumb to create a type system
Let’s get the jargon out of the way…
Yes, it would be great if we understood and remembered all of the above 🤓. But don’t let that stop you from being confident about typography.
Here are the basics to get you started 👉🏼
Typeface and Font
A typeface is a collection of fonts while a font refers to a specific style or weight within a typeface family. Often, although incorrectly, they are used interchangeably. So don’t get confused if you come across something like that.
Leading and Line-height
In hand typesetting, leading is the thin strips of space that were inserted between lines of type to increase the vertical distance between them. Hence, it is more relevant to print design.
Line height is the vertical space between the baselines. For web and mobile design, this is what you will be using. But often, as we have seen above, you will see people use both these terms interchangeably.
Tracking, Kerning or Letter spacing
While tracking refers to the spacing over a range of characters, kerning refers to the spacing between individual letters. And together, they make Letter Spacing. Usually, fonts are automatically adjusted for letter spacing in apps like Figma and Sketch. So, you generally don’t have to worry about it!
Typefaces and where to use them?
There are mainly four types of typefaces, namely Serif, Sans Serif, Script or Handwriting, and Decorative or Display. Script and Decorative typefaces tend to become illegible on small devices and hence are rarely used except in headlines and logos. This leaves us with two main options — Serif & Sans Serif
Serif
A serif is a small shape or projection that appears at the beginning or end of the stroke in a letter. Typefaces with serifs are called serif typefaces. They’re traditional and used in newspapers, magazines, and the body text of books.
For the web and mobile, they are generally used only in the headlines and logos as it can get difficult to read the lengthy body text.
Sans Serif
A Font without serifs is called a sans serif typeface, from the French word “sans” that means “without.”
It is the most widely used font type in digital applications. It’s a popular choice for the body text, but feel free to use it anywhere else as well.
If you would like to learn more about the different typefaces, their style, and usage psychology, check this link.
Now the big question, how to use it?
Well, typography is more of an art than science. So there are no laws here. To get you started, here are 7 simple things to keep in mind-
1. Alignment
Font alignment controls how the text aligns in a given space. There are four type alignments: Left-aligned to the left margin, Right-aligned to the right margin, Center-aligned when the text is adjusted to the center, and justify when the text is adjusted to fit a given space.
Some thumb rules 👉🏼
- Most languages are read left to right. It gives a defined axis and anchor if the text is left-aligned.
- If it’s only the numbers, then align to the right. Like how you did it when adding numbers with pen and paper.
- NEVER justify the text. It creates rivers flowing between your text
- For headlines, subtext, call to actions, quote, etc. experiment with center alignment.
- Adjust the copy, line length, or letter spacing to avoid bad rags, widows, and orphans.👇🏼
2. Size
While small text size can hurt the user’s eye, bigger text fills up the screen fast and breaks the reading coherence. Hence, it is important to get it just right!
The minimum suggested body text size is 👉🏼
- Material Design Guidelines: 16sp
- Human Interface Guidelines by Apple: 17pt
3. Line Height
Line height is the space between the lines of text. When the line height is too tight, it undermines the horizontal reading flow and increases doubling. When the line height is too loose, the text appears to float away from each other.
👍🏼 A good thumb rule is to set it at approx. 140% — 160% of the font size.
4. Line Length
The most useful way to measure line length is by average characters per line. As line length increases, your eye has to travel farther from the end of one line to the beginning of the next. This makes it harder to track your progress vertically.
👍🏼 A good thumb rule is an average of 45–70 characters depending on mobile or web, including spaces. You can use this tool to calculate characters.
5. Spacing
Space in web typography mainly consists of space between the lines, the margins, and the paragraph space. If used correctly, it can bring focus or even relaxation. But used incorrectly, it can end up confusing the users.
- According to the Gestalt principle, when you cluster individual elements into one area, the users will recognize them as related to one another. Keep this in mind when defining hierarchy or placing related images or elements.
- 👍🏼 A good thumb rule is to keep paragraph spacing in the range of .75x and 1.25x of the font size.
6. Hierarchy
Hierarchy creates contrast and defines emphasis. While creating a Type System, you could start with a blank canvas consisting of placeholder headlines, subtext, and body text and then experiment with the following thumb rules 👉🏼
- Choose a distinct and contrasting typeface. E.g. Serif for the Heading and Sans Serif for the body text.
- Limit Typefaces to two or three max.
- Skip a weight between two font sizes. E.g. Body text is light weight, and the heading is medium weight.
- Multiply the increasing font hierarchy by 2 or the Fibonacci golden ratio (1.61). E.g. Body text is 16pts and the Heading is 25pts
- Experiment with color, like using greys or accent colors for Headings.
7. Accessibility
We would all want everybody to be able to enjoy what we have created. You can check the WCAG guideline to design for accessibility in detail. Some good rules of thumb 👉🏼
- Follow the WCAG 2.0 Contrast Standards. You can use this website to calculate the contrast.
- System typefaces(San Francisco for iOS and Roboto for Android) scale better for all devices. Try using them for body text and to add more style to your designs using other typefaces for headings.
Play around!
Now, enough with the thumb rules! We would all create better if we had more fun doing it. So, don’t shy away from breaking the rules, experimenting, and finding your style! 😎
Some useful tools and resources
Guidelines
Plugins/Websites
- Like what you see? Find the font on any web page.
- Accessibility Contrast Check
- Material Design Type scale tool
- Character count tool
- Placeholder text generator
Fonts
- List of Type foundries
- Free typefaces and fonts — Google fonts, 1001fonts, Fontsquirrel, dafont
References
Typography Terminology
Material Design
Different type of fonts and when to use them
Kerning guide
