How do I choose a typeface for my application?

TL;DR

When choosing a typeface for your application, consider your brand identity and user needs. The typeface should reflect your brand’s values and personality, whether it’s professional or playful, and resonate with your target audience. It should be readable in various contexts, whether for extensive reading or quick label scanning. Choose typefaces with distinct character shapes, adequate x-height, and appropriate kerning and leading. Additionally, consider the demographic characteristics of your users, including age and tech skills, and ensure the typeface supports accessibility features.

Deep dive

When selecting a typeface, prioritize readability to ensure users can easily scan and understand the information. Here's how to optimize your typeface selection process:

Reflect your brand's values and identity

Your typeface should reflect your brand's personality and values. Consider whether your brand is serious and professional or friendly and approachable. Keep these factors in mind:

• Brand values: What core values does your brand represent (e.g., trustworthiness, innovation, sustainability)? 
• Brand personality: What personality does your brand project (e.g., sophisticated, approachable, playful)? 
• Target audience: Who are you targeting with your app (e.g., young professionals, established business owners)?

Consider app’s purpose 

Think about the context in which the typeface will be used. Is it for long-form reading, short labels, or data-heavy tables? Choose a typeface that is optimized for the specific business application purpose and improves readability in that context. For example, certain typefaces don't work well in tables. Choose carefully.

Prioritize clarity and readability 

Prioritize legibility, especially for body text. Remember, users might access your app on different devices and in various settings. They need to easily understand the information on the screen, no matter what device they're using. Choose a typeface with clear and distinct letterforms that stand out from one another:

• Prioritize distinct character shapes: Pick typefaces where each letter and number is clearly identifiable. Test it with an "Il1" test (check if the uppercase "I", lowercase "l", and number "1" look different). This helps with quick recognition, especially in smaller sizes.
• Assess x-height: The x-height is the height of lowercase letters. Typefaces with a larger x-height generally make dense text blocks easier to read.
• Maintain moderate contrast: Avoid typefaces with extreme differences in stroke thickness. Go for a subtle contrast to reduce eye strain during long reading.
• Don't neglect spacing: Ensure proper character spacing (kerning) and line spacing (leading). Too tight spacing makes letters hard to distinguish, while too loose spacing makes the text look disjointed.

Related reading: How do I adjust letter spacing and line length for readability?

Maintain clear hierarchy 

Use different font sizes, weights, and styles for headings, subheadings, body text, buttons, and labels. This guides users through the app's features and information architecture intuitively. 

Related reading: How do I establish a type scale for my project?

Consider user demographics 

Consider the age, tech skills, and other characteristics of your target users. Your B2B app may be used by a wide range of people, including older users or those with visual impairments. Choose a typeface that meets their needs, considering these factors: 

• Language: If your app supports multiple languages, make sure the typeface includes all the necessary glyphs and accents.
• Age: Younger users might prefer modern, clean sans-serif fonts. Older adults might find serif fonts easier to read at smaller sizes.
• Tech savvy-ness: Tech-savvy users are usually comfortable with a variety of fonts. Less tech-savvy users might benefit from simpler, more traditional fonts.
• Culture: Some fonts might carry cultural meanings in different regions. Choose fonts that feel familiar and comfortable for your audience's location.

Design for accessibility

Make sure your chosen typeface is accessible to users with visual impairments. Some users may rely on assistive technologies like screen readers, so pick typefaces with good character spacing and avoid overly thin or decorative styles.

JCPenney rebranding fiasco

In 2012, JCPenney, a major American department store, tried to rebrand itself. This included a new logo with a very thin, all-lowercase sans-serif typeface.

• Typeface issues: The new typeface was hard to read, especially for older customers, who make up a big part of JCPenney's market. The all-lowercase letters also hurt brand recognition, as the old logo featured a distinctive uppercase "J."
• Impact: The rebranding was heavily criticized by customers and the media. Although the company mentioned other reasons for its poor performance, the negative reaction to the new typeface added to the brand confusion and customer dissatisfaction. JCPenney ended up going back to a modified version of their original logo within a year.

Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• Does this typeface align with our brand's personality and values?
• Is this typeface highly legible, even at smaller sizes and on various devices?
• Does this typeface have enough variations (weights, styles) to create a clear hierarchy?
• Is this typeface accessible to users with visual impairments or color blindness?
• Is this typeface optimized for the specific use case (long-form reading, short labels, etc.)?
• Does this typeface load quickly and perform well across different browsers and devices?
• Has this typeface been tested with real users?

Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Using too many different typefaces, which can create visual clutter and confusion.
• Choosing a typeface without considering readability and accessibility.
• Not testing the typeface on various devices, screen sizes, and resolutions.
• Ignoring the impact of typeface on loading speed and performance.
• Failing to establish a clear typography hierarchy, making it difficult for users to scan and understand the content.
• Not considering the needs of users with visual impairments or other disabilities.
• Selecting a typeface that doesn't align with your brand's personality or the emotions you want to evoke in users.

Useful tools 

These tools will make your job easier and more effective.

• Fontjoy – Discover harmonious font pairings. The tool suggests complimentary typefaces based on a selected primary font.
• Type Scale – Preview and adjust typography hierarchies. The tool shows how different font sizes and scales work together. It has predefined customizable scales.
• FontPair – Use a curated collection of Google Font pairings for inspiration. Each pairing includes examples and CSS code snippets.

Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• How To Choose A Font — A Step-By-Step Guide! by Douglas Bonneville 
• Legibility: how to make text convenient to read by Jurek Breuninger
• The Ultimate Guide To Choosing Fonts by Monica Galvan
• A guide to responsive typography by Augustine Thomas