A beginner’s guide to web and mobile typography

Vichita Baheti
Sep 29 · 7 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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!

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.”

Image for post
Image for post

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.👇🏼
Image for post
Image for post

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.

Image for post
Image for post
  • 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

Fonts

References

Typography Terminology
Material Design
Different type of fonts and when to use them
Kerning guide

Image for post
Image for post
The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.

Bootcamp

From idea to product, one pixel at a time.

Vichita Baheti

Written by

Growth Marketer turned Product Designer! I write about things that I am learning. https://www.linkedin.com/in/vichita/

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Vichita Baheti

Written by

Growth Marketer turned Product Designer! I write about things that I am learning. https://www.linkedin.com/in/vichita/

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store