Typography Guide

Rj Ellazar

8 min readOct 16, 2023

Learn more about the Anatomy of Typography: Typedecon Type Glossary

Choosing The Right Typeface

Things to consider:

Scope: What projects will this be used for? Is it a long term project with diverse typography needs?
Mood: Is the project formal or informal? Contemporary or traditional? Fun or serious?
Functionality: Where will the font be used? Will it be used at large or small sizes? For big blocks of text or just headlines? Make a list of all the ways it can be used. Consider if a typeface has a full set of ligatures and if it contains true small cap characters. Missing ligatures can look unattractive at large sizes and fake small caps usually look odd because of the stroke widths.
Versatility: Does the typeface need to be used in just one medium or will it be used across an entire brand’s marketing materials?
Message: What is the message that needs to be communicated? What is the purpose of the design?
Readability: At what size will the font be used? Headlines can use more detailed or elaborate fonts that aren’t readable at small sizes, while fonts for body text need to be highly readable even at small sizes. Why look at your font’s x-height? Because larger x-heights tend to translate easier legibility-wise when set at small sizes. Also, use easily distinguishable letterforms. Here are the most common culprits for letterform confusion: a c e o (that’s A, C, E, and O), Il1 (capital I, lowercase L, and the number 1), and O0 (capital O and zero).
Languages: Will the text be translated into different languages? Will special characters (such as umlauts) be used? If translations or special characters are necessary, the font family needs to include them.
Style: Serif or sans serif? Display or script? The style should be determined based on how the typeface will be used (body text, headlines, captions, etc..).
Brand: Does the font match the overall brand message and mood? Is it consistent with other branding materials? Is it a deviation from what consumers expect? Look at a typeface and write down several words the typeface “says” to you about itself, and then compare that to what your design objective for the typeface is. Do they correlate?
Licensing: Will the font be used online? In printed materials? For packaging? While many fonts use general blanket licensing terms, some do not. Designers need to understand how fonts are licensed to make sure they don’t violate the terms.
Combinations: Will the typeface be combined with other typefaces? Will it be used alone?
Large Font Families: Is the typeface a part of a larger family? Does it include serif, sans serif, and display options? Large font families provide more usage options for a variety of projects. You may realize, after a thorough analysis, you need five fonts (not typefaces) to cover your various heading, sub-headings and call-outs. Can your typeface provide enough variation with bolds, italics and small caps? Or do you need two typefaces to create more distinction in the hierarchy? Three? Use a mind-mapping tool or make a traditional outline to see as much as you can before you start choosing typefaces.

Source: Toptal Font Tips

Tips:

If you use too many typefaces, it can cause issues in the user’s experience with the product. Every font has to be rendered which will add to the application’s loading time.
When choosing typefaces, try to find ones that compliment and contrast each other well so that the nuances are not lost.
When designing, make sure that readability, accessibility, and legibility are considered.
A good thing to remember is that the smaller the typeface then the tighter the leading.
It’s ideal to keep a single line’s length to around 45–75 characters so that you can reduce reader fatigue.
When designing for web and mobile, make your font scalable.
Avoid trite correlations (i.e. unoriginal and repetitive). If your category is “ancient”, avoid using Papyrus.
Avoid anachronisms (i.e. attributing something to a period to which it doesn’t belong). If you’re unclear about the history of that specific typeface, you could end up choosing a typeface that is offensive or unrelated.

Pairing Type Together

Common brand classifications:

Clean/simple — modern, minimalist
Classy — luxurious, erudite, classic
Friendly — casual, informal
Quirky — design-forward, creative
Techie — futuristic, geeky

Use brand workshops as a way to ensure that the fonts you pair together match the values of that company. If you need some inspiration, Literal Humans has a good resource for how to conduct one: https://literalhumans.com/brand-workshop-exercises/.

Tips:

Either use fonts from the same typeface OR stick to a max of 2–3 different typefaces
Make sure to contrast your font sizes and weights
It’s good practice to do an audit of your platform, so that each font has a distinct role in the UI
When establishing your brand style, don’t use fonts that mix different moods together
Mix distinct fonts with neutral types. Create a balance where one font can be more distinct and attention-grabbing and the other as more of a supporting role.
Avoid discordant combinations. When combining fonts, look at the x-heights to make sure they’re proportionate with one another but still have distinct aspects that differentiate them.

Great resources:

Fontjoy Font Pairing Tool

Fontpair Font Pairing Tool

Font Pairing Samples

Type Hierarchy

Things to consider:

Size: Generally the first thing new designers turn to when trying to create typographic hierarchy. And for good reason: It’s immediately, easily identifiable by readers. Bigger = more important, smaller = less important. But size can become a crutch when there are so many other options to create hierarchy.
Weight: Making a typeface bolder or thinner is another easily recognizable way to create hierarchy that’s easily identifiable even by non-designers.
Color: Often overlooked as a way to create a hierarchy, but it’s a fantastic option. Even using lighter and darker shades of a given color can create a more distinct hierarchy. Creating more contrast between type and it’s background can also add to typographic hierarchy.
Contrast: Beyond contrasting colors, the contrast between different type sizes, weights, and styles is also key to creating typographic hierarchy. A difference of only one or two points in type size won’t create enough contrast to make the hierarchy apparent to most users. Instead, designers should use easily distinguishable sizes, weights, and styles to easily create contrast between things like headers or body text.
Case: While capitalizing body text is generally not a good idea from a readability perspective, using uppercase characters in headings or subheadings can help differentiate different headings or other type.
Position and Alignment: The positioning of headings and subheadings, along with other type that a designer wants to stand out, can have a lot of impact on where type falls within a hierarchy. Centering type, for instance, tends to make it stand out. Setting type outside of the regular margins of a page can also make that type stand out within the hierarchy of a page.

Source: Toptal Type Hierarchy

Applying the golden ratio:

Two quantities a and b (a>b) are in the golden ratio φ if their ratio is the same as the ratio of their sum to the larger of the two quantities:

Different font sizes can be in a golden ratio. Let’s say the body-font size on your website is 16px. The header-font size could be a golden-ratio multiple of your body size — that is, it could be 16 φ = 16 x 1.618 = 25.88 or roughly 26px.

Some also use the golden ratio to determine the line height needed for a particular font size to be in a golden ratio. (The line height is the font height plus the white space between lines of text — it basically governs how tightly arranged the lines of text are in a paragraph.) For example, if you had a font size of 16px for your body copy, the line height could be 16 φ = 16 x 1.618 = 25.88 or, again, roughly 26px.

Source: NN/g Golden Ratio for Type

Creating an effective Content Hierarchy:

Get a group of your most prominent users together and perform some of these workshops:

Open card sorting: Participants sort a set of cards by groups, and then name the groups themselves. This method helps generate new ideas for grouping and labeling content.
Closed card sorting: Participants sort a set of cards into categories predefined by designers. This method tests existing groups and category labels.
Tree testing: Participants are tasked to find a page or location in a tree using a top-down approach. This method is great for assessing the clarity in a navigation structure, identifying any issues with findability early on.

Laying out type on Web vs. Mobile

To ensure a consistent and legible experience across different devices, font scaling from desktop to mobile is crucial in UI design. On desktop, a common font size for paragraphs ranges from 16px to 18px, while on mobile, a size range of 14px to 16px is ideal for easy reading. To implement proper font scaling, it is recommended to create a style guide that lists all text elements, such as titles, paragraph, link, blockquote, etc.

By defining a default font size for elements like paragraphs and setting a relative scale for other text elements, such as titles, links, labels, and button labels, you can ensure consistency across desktop and mobile devices. Using a tool like type-scale.com can assist in finding a suitable scale and font sizes that work well together. It is important to keep in mind that font scaling should prioritize readability and accessibility, not just aesthetics.

Demographic considerations can play a significant role in determining appropriate font scaling for different audiences. For example, older populations may have difficulty reading small text, so larger font sizes may be necessary. Conversely, younger populations may prefer smaller font sizes, so they can fit more content on their screens. Additionally, cultural and linguistic differences can also impact font scaling, as some languages or alphabets may require larger or smaller font sizes for optimal readability. It’s important to consider these factors when designing a user interface to ensure that text is easily legible and accessible to the target audience.

Using “em” and “rem” units for font scaling in responsive design is a common best practice. “Em” and “rem” units are relative units of measurement that adjust automatically based on the user’s default font size, making it easier to maintain a consistent font size across different devices and screen sizes. Additionally, using “vw” (viewport width) and “vh” (viewport height) units for full-page designs, such as landing pages, can provide precise scaling and ensure that the font size adjusts dynamically as the screen size changes. This approach allows for a more fluid and user-friendly design that adjusts seamlessly to different devices and screen sizes.

Source: Fiorald’s Medium Article on Responsive Design