Quick Tips from a Product Designer: Brand Fonts

Fonts play a critical role in branding, and selecting the right font is vital. Not all fonts are equal; some may require additional licensing or may not be compatible with certain technologies.

Tip #1: Font legibility

Font accessibility is paramount, with readability being a key factor. Fonts should be legible even at smaller sizes to ensure user comprehension.

While there are many guidelines, there’s not a single test out there to determine if your fonts are accessible or not. Here are some of the most common things that should be ensured when it comes to fonts:

• Context of use: Headers, body copy, data, small UI text, and CTA’s all have specific purposes, so it’s important to ensure that the fonts are tested in all scenarios to ensure the user can read your communication.
• X-height: In general, fonts with larger x-height appear more legible, so they are often used for small captions and other small text.
• Counters and apertures: Balanced spacing within letter curvatures and opening allow for the text to be more legible
• Stroke weight: Not all fonts have different weights, so it’s important to find fonts that have a wide-range of weights so they can be used in the various UI elements needed in digital products.
• Color Contrast: Text should have enough contrast to meet usability standards. There is more detailed information in this blog post that I wrote, as well. Font accessibility is paramount, with readability being a key factor. Fonts should be legible even at smaller sizes to ensure user comprehension.

Tip #2: Font family

While it may not always be required, it is generally advisable to consider exploring readily-available fonts, such as those offered by Google Fonts. These fonts are known for their wide compatibility with digital products, making them a convenient and accessible option for various design projects.

An easy way to verify what type of use a font was designed for is by paying attention to the name. Fonts with “text” in the name are typically highly-legible and designed specifically for body copy whereas fonts with "display" in the name are better for headers or copy at larger text sizes.

In branding, it's typical to utilize multiple font families based on their specific use. For instance, fonts used for titles tend to be thicker and more decorative compared to those used in content. Designers often mix and match popular fonts to achieve effects.

Tip #3: Select a font scale with appropriate sizes for your project

While we usually include approximately 8 or more text sizes for a product, generally speaking, it’s more important to understand the accessibility needs of your product to determine what will work best. However, most digital products will use something like:

• Minimum size of 12pt, used for captions and some UI components that use minimal space (like system messages and captions)
• Paragraph size of 16pt, used widely through the product

Things like titles, subtitles, buttons, and other UI elements will have unique sizes based on the font used, the product designed, and the user needs.

Tip #4: Testing fonts

While there is no one single test to ensure fonts meet usability standards, we rely on thoughtful design where we use appropriately-sized fonts for their use and screen size, and user feedback to understand the readability of the content and UI elements.

Ensure font readability across different devices and environments. Consider user feedback and online resources to select the most suitable fonts for the product, even if it means introducing a new one to the brand.

Tip #5: Font pairing

If you pay attention to the way this very blog post is laid out, and how the fonts are used, you can see a great example of font pairing. We deep dive into hierarchy in this post from last month. Things to take into consideration:

• Titles are typically large-scale and heavier in weight. They serve as prominent identifiers for sections or topics. Sans fonts are commonly used for titles, while Sans Serif fonts in heavier weights, all caps, or with other stylistic variations are also popular choices to make them stand out.
• Paragraph fonts are scaled to fit the reader's needs, typically ranging from 14px to 20px. They are the main body of text and should be chosen for readability and legibility.
• Subtitles are scaled larger than paragraph text but smaller than titles. They provide additional context or information beneath the main title. Like titles, they may also be heavier in weight for emphasis.
• Table Fonts are used in tables and should prioritize readability, especially considering the smaller scale of information within cells. Sans fonts are often avoided in favor of fonts with better legibility at small sizes.
• CTA Fonts (call to actions, like buttons and links) will often be a stylized version of the paragraph font, heavier weights, captions, spacing are often variations.
• UI Fonts are used to help the user through their journey, such as alerts, error messages, and descriptions, etc. They're usually scaled in the smallest readable text, around 12px.

In Short

Every single one of these tips is a simplified recommendation, and they actually work! Some key takeaways:

• Fonts have a very important role in digital products; they help the user understand the screens and what is being asked of them.
• It takes the user a shorter amount of time to complete tasks as the eyes will signal the brain as it matches the way the font looks to the context.
• The use of certain fonts need to be excluded from digital products because they don’t play nice with technology.
• As always, accessibility should always triumph over the use of branding fonts.

Eloisa is a senior designer here at Echobind. If you're interested in working with us, don't hesitate to reach out at hi@echobind.com