A Beginners Guide to Typography in Design

While a picture is worth a thousand words, typography illustrates more than just the words it contains. It sets the overall tone of the design, so the decisions you make in this phase are critical, and here’s why:

What is Typography

Typography is the design, selection, and use of letter forms and characters to communicate language in written form. It has evolved from manually setting metal type on paper to a core component of modern design—a movement that embodies both art and science to enrich the design experience.

Typography in Design

While a picture is worth a thousand words, typography illustrates more than just the words it contains. It sets the overall tone of the design, so the decisions you make in this phase are critical, and here’s why:

As designers, it is well–understood that the effectiveness of copy in a design can make or break a user’s experience. While this is true, the presentation of the content is just as important. No matter the quality of the copy, a user is more likely to scan the content—or skip reading it altogether—when fonts are illegible or used inappropriately.

Choosing a Font

Here’s the truth: you can study typography for years and still feel overwhelmed when choosing a typeface that evokes the intended impression. However, you can follow a few simple steps to take your typography game up a notch.

Personality

Every font has a unique personality that conveys meaning differently. When choosing a typeface, you should consider how it will look and connect with your project.

Analyze the tone of your project in order to truly understand how it connects with a typeface. Is it more formal than playful? More masculine than feminine? More modern than classical? Or somewhere in between?

Once you’ve defined the tone, you can select 3 to 5 typefaces that have a similar tone and test positively against other guidelines like functionality and accessibility.

Functionality

Next, narrow the typefaces you have chosen to fit the personality by testing for functionality. Do the typefaces have multiple weights, multiple styles (i.e. italics, condensed), and special characters that you will need? Are you going to need to support multiple languages?

Consider how the typefaces will be used. Ask yourself if the typefaces you have chosen provide the project enough variation. Some typefaces come with a significant number of weights and styles that give more creative freedom, while others do not.

Accessibility

X–Height

Readability and legibility are directly tied with x–height—quite literally, the height of the lowercase ‘x’ in a typeface. It is used to measure the proportions within a typeface as well as compare proportions between different typefaces. The x–height varies between typefaces, so you will have to use a bit of intuition to decide if a smaller or larger x–height suits your project best.

Typefaces with large x–height tend to be more legible at any given size. Utilizing large x–height increases legibility at a smaller font size, and are typically designed specifically for that purpose.

Keep in mind that bigger x–height is not always better. Taller x–height creates shorter ascenders and descenders, leaving less whitespace between the characters segments and diminishing legibility.

Find a balance and test it in your designs before making a finalized decision.

Open Counters

Increasing the white space between letters improves legibility. More space between the ends of the character ensures that they are less likely to appear connected in more undesirable reading conditions like a dimly lit room with outside distractions.

Distinctive Glyphs

Using typefaces with more distinctive shapes can also improve legibility. For example, in a typeface like Poppins, “I” and “l” look almost identical, reducing its legibility.

Typography Anatomy

To maximize the effectiveness of your typography choices you will also need to understand the fundamentals of typography anatomy.

Typefaces vs. Fonts – A typeface is composed of a set of fonts with different variations — bold, italic, condensed, etc. For example, Helvetica is a typeface; Helvetica Light is a font.

Serif vs. Sans–Serif – Serif characters have a decorative stroke at the ends of a letter. Whereas the end of sans–serif characters have a flat finish.
Leading – The vertical spacing between lines.

Tracking – The overall spacing between letters.
Kerning – Specific spacing between individual characters.

Baseline – The bottom line where the letters sit.
Cap Height – The distance from the baseline to the top of the capital letter.
Bowl – The curved segment of a character that creates a closed off section of white space in a letter.
Stem – The main vertical stroke in a letter.
Terminal – Any stroke that doesn’t end with a serif.
Descender – The segment of a letter that dips below the baseline.
X–Height – The height between the baseline and the top of the lowercase ‘x’ in a typeface.

Ligature – The stroke that joins adjacent letters.
Cross Bar – The bar that goes across the inside of the letter and connects one side to another.
Spine – The curvy body of the letter 's'.
Ascender – The segment of a letter that extends above the font's x-height.
Tittle – A superscript dot used above letters such as ‘i’ and ‘j’ or as a diacritical mark found in other languages.
Shoulder – The curved segment of a character found in letters such as ‘h’, ‘m’, and ‘n’.
Counter – The empty space within a letter.
Finial – The tapered end of letters such as ‘e’ or ‘c.'

Conclusion

Typography can feel intimidating, but keep in mind that it is not a fixed set of rules. Creativity comes most naturally when bending the rules, but understanding them in the first place will inform your creative decisions. Test your typefaces, see how they make you feel as the reader, and adjust, adjust, adjust. Our UX designers think deeply about every part of the design process and how that will affect the user experience. Getting into the nitty-gritty design details is their passion, so when you're ready to move from the ideation phase of your mobile app to the design phase, connect with Ventive UX designers today.

‍