Typography can make or break your design: a process for choosing type

Typography is one of the most important elements of any design. The right font choices can enhance your message, grab attention, and create the desired mood for your brand or product. On the flip side, poor typography can ruin an otherwise great design, making it difficult to read or failing to communicate the right tone.

As a full-stack developer, it‘s critical to understand typography fundamentals and to have a process for evaluating and choosing type. After all, type is a core part of the user interfaces we create. In this post, we‘ll examine why typography matters so much and walk through the key steps to follow when selecting fonts for your next project.

Why typography matters

Typography has a profound impact on how users experience and interact with digital products. Here are a few key reasons why typography matters so much, backed by research and data:

1. Typography influences reading speed and comprehension

Studies have shown that the right typography choices can increase reading speed and comprehension. For example, one study found that readers were able to read a passage 14.8% faster when a serif typeface was used compared to a sans-serif (Boyarski et al., 1998).

Another study by Norbert Schwarz found that people were more likely to agree with statements written in an easy-to-read type compared to a hard-to-read type. The fluency of the reading experience influences how people process and perceive the information.

2. Typography affects conversions and user trust

Typography also has a direct impact on conversion rates and perceived trustworthiness. The Nielsen Norman Group found that poor legibility and improper formatting were some of the top reasons users abandoned a website.

In another study, researchers from MIT found that good typography could generate a 13% increase in conversion rates compared to bad typography (Dooley, 2012). Users are more likely to trust and take action on designs with clear, professional type.

3. Typography is critical to usability and accessibility

Most importantly, typography is a key component of usability and accessibility. Small, low-contrast type can make text difficult to read, especially for users with visual impairments.

The Web Content Accessibility Guidelines (WCAG) provide clear recommendations for font sizes, contrast ratios, and spacing to ensure designs are readable by the widest range of users. For example, WCAG recommends a minimum contrast ratio of 4.5:1 for normal text.

Neglecting typography can create real usability barriers. As Tim Brown, head of typography at Adobe said, "We read best what we read most. When typography is well chosen, readers are unaware of the reading process."

A process for evaluating and choosing type

So how do you go about choosing the ideal fonts for a project? Here is a step-by-step process you can follow:

1. Evaluate the purpose and tone

Start by clearly identifying the purpose of your design. What are you trying to communicate or achieve? Is it to sell a product, convey information, build trust, or entertain? Clarifying your primary objective will help you determine what tone and style to aim for with your type choices.

2. Consider your audience

Next, think about your target audience. What are their demographics and characteristics? Are there cultural considerations to keep in mind? Different audiences may respond better to different typography styles.

For example, a fun, casual font may work well for a children‘s brand but not for a law firm website. Consider your audience‘s needs and expectations.

3. Prioritize readability

A font may look cool, but if it‘s too complex or decorative, it may be difficult to read, especially at smaller sizes. In general, opt for simple, clean, and conventional type styles that are easy to scan and read quickly.

Avoid overly decorative or script fonts for body copy. Geometric sans-serifs or classic serif fonts tend to work best for longer blocks of text. Here are some examples of readable typefaces:

• Sans-serifs: Open Sans, Roboto, Arial, Lato
• Serifs: Georgia, Merriweather, PT Serif, Source Serif Pro

4. Look for fonts that fit your brand personality

In addition to being readable, look for font options that fit your desired brand personality and style. Do you want to appear classic and sophisticated or modern and friendly?

Browse font libraries and try out different type styles to see what matches the look and feel you‘re going for. Avoid fonts that have the wrong connotations for your brand.

5. Combine fonts carefully

Most designs use more than one font. When pairing fonts, look for options that contrast one another but still feel cohesive.

Common strategies include pairing a serif body font with a sans-serif header font, or combining fonts from the same "superfamily" that are designed to work well together.

For example, the popular SuperFriendly.com combines a bold sans-serif header font (Proxima Nova) with the Georgia serif for body text.

Aim for no more than 2-3 fonts to avoid a cluttered, confusing design. Use different sizes, colors, and weights to create hierarchy and variety rather than adding more fonts.

6. Test sizing and spacing

As you narrow down your font selections, be sure to test them out at the actual sizes you‘ll be using. A font that looks great at a large size may be unreadable at a smaller size.

Experiment to find the optimal size, line spacing, and paragraph spacing for each font. Heading fonts can usually be a bit smaller since they are used for short lines of text. Body copy needs to be larger – typically at least 16px on the web.

Use a tool like Modular Scale to create a logical hierarchy of font sizes. A popular ratio to use is the Perfect Fourth (3:4). Here‘s an example of proportional font sizes using this scale:

• H1: 2.369rem
• H2: 1.777rem
• H3: 1.333rem
• Body: 1rem (16px)
• Caption: 0.75rem

Within your CSS, you can define these sizes as variables for ease of reuse:

:root {
  --fs-h1: 2.369rem;
  --fs-h2: 1.777rem;
  --fs-h3: 1.333rem;  
  --fs-body: 1rem;
  --fs-caption: 0.75rem;
}

7. Create a style guide

Finally, create a typography style guide to document and communicate your font system. Include font names, sizes, styles, colors, and usage examples for each typography element like headers, body text, captions, and so on.

A style guide will help you keep typography consistent across designs and make collaboration easier. It also makes it easy to refer back to your typography system when starting new projects.

Here‘s an example of typography styles documented on the Salesforce Lightning Design System website:

Typography tips for developers

As a full-stack developer working on web apps, there are some specific typography best practices and techniques to keep in mind:

1. Use relative units: To ensure your typography scales across devices and screen sizes, use relative units like rems or ems instead of pixels. This allows text to adapt proportionally to the user‘s default font size.

2. Implement responsive typography: Use media queries to adjust font sizes, line heights, and other type styles across breakpoints. Aim for a responsive type scale that maintains proportion and readability at all screen sizes.

3. Optimize for legibility: For body text, aim for around 45-75 characters per line. Use adequate line spacing (1.4-1.6 is a good baseline) and sufficient contrast between text and background colors.

4. Test across devices: Always test your typography on real devices to ensure it performs well across platforms. iOS and Android devices may render type differently, so it‘s important to check both.

5. Implement dynamic type support: Take advantage of platform-specific features like dynamic type (iOS) or font boosting (Android) to let users customize the text size to their preference.

6. Subset and load fonts efficiently: To improve performance, subset your fonts to only include the characters you need, and use the font-display property to control how fonts are loaded and rendered.

Here‘s an example of how you might implement responsive typography in CSS using clamp():

/* Responsive heading */
h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

/* Responsive body text */
p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

By using clamp(), you can set a minimum font size, maximum size, and a flexible size that scales with the viewport width. This ensures your type remains proportional across screen sizes without needing complex media query rules.

Typography inspiration and resources

Looking for typography inspiration and resources to help you choose great fonts? Here are a few of my favorites:

• Typewolf: Gallery of inspiring type in use across the web
• Fonts In Use: An archive of notable typography indexed by typeface, format, and industry
• Google Fonts: Large library of free, open-source fonts
• Adobe Fonts: Included with Creative Cloud, Adobe offers a huge selection of quality fonts to use in your designs
• Hoefler&Co: Carefully crafted, premium fonts for print and digital
• Font Squirrel: Collection of commercial-use licensed fonts, many available for free
• Typographica: Reviews and commentary on type books, foundries, and contemporary typography
• Practical Typography: A web-based book on everything typography by Matthew Butterick

Wrapping up

Typography is a powerful tool for creating effective, engaging, and memorable user interfaces. By understanding typography fundamentals and following a thoughtful process for choosing and implementing fonts, you can elevate your designs and create better experiences for your users.

Remember these key steps when selecting type:

1. Evaluate the purpose, audience, and tone
2. Prioritize readability and accessibility
3. Look for personality fit
4. Combine fonts carefully
5. Test sizes and spacing across devices
6. Implement responsive and efficient type
7. Create a style guide for consistency

By putting these principles into practice and continuing to learn about typography, you can become a master of type as a full-stack developer. Your attention to detail and typography skills will set your work apart and help you create interfaces that are both beautiful and functional.