5 Typeface Selection Tips for a More Cohesive UX Design

Every element in your design contributes to its overall look and feel, and this includes the typeface you use. The choice of typography, in fact, highly affects the readability and usability of your design, just to name a few factors.

How do you select fonts that would make your UX design more cohesive? Here are a few tips:

1. Consider your branding

First and foremost, remember that your branding should set the direction of your design. The typeface/s you use should embody your brand character and/or brand archetype.

Each font classification is associated with certain “personalities,” just like how colors evoke certain emotions. For example:

• Serif — traditional and trustworthy (e.g., Times New Roman and Playfair Display)
• Sans serif — minimal and modern (e.g., Lato and Open Sans)
• Slab serif — confident and quirky (e.g., Arvo and Courier New)
• Decorative — distinctive and dramatic (e.g., Lobster Two and Fredericka)
• Handwritten — artistic and informal (e.g., Amatic SC and Homemade Apple)
• Script — elegant and classy (e.g., Dancing Script and Parisienne)

2. Mind the legibility

The legibility of your choice of typeface must take precedence to its aesthetic. In the end, good design should be usable (and readable) rather than distracting and illegible, especially when read using smaller devices.

A few things to consider:

• Avoid fancy typefaces; it usually strains readers’ eyes.
• Reserve decorative typefaces for titles and headlines.
• Font size, especially for body text, should be at least 16px.
• Choose typefaces that work well in multiple sizes and weight (i.e., it should remain readable)

3. Use web-safe fonts

Web-safe fonts are those that are supported by all browsers and thus will display with little to no issues. While it’s important to stand out from the competition — and this may mean wanting to use unique typefaces — it’s good advice to use web-safe fonts for your web design, or if you opt to choose one unique to your brand, it’s best to design with web-safe fonts in mind.

Using web-safe fonts is one way to optimize your website as well as boosting its usability. Some examples are the following:

• Web-safe sans-serif: Verdana, Helvetica, Arial, Tahoma, and Lucida Grande.
• Web-safe serif: Times New Roman, Palatino, and Georgia.

4. Use decisive contrast for multiple typefaces

In some cases, using multiple typefaces may be preferable; for example, using different typefaces for the header and the body text.

However, one of the common mistakes designers make is choosing typefaces that are too identical to one another — when in fact, the aim of using multiple typefaces is to create visual diversity. For example, Open Sans and Source Sans Pro are different typefaces, so to speak, but look too similar.

To make this work for your design, use decisive contrast when using multiple typefaces. This means that the combination of fonts should have a substantial difference but still work in harmony with one another. A few things to consider:

• Identify two typefaces that have something in common but have large contrasting differences. Some things to note are: if the two are created by the same designer or if they have similar x-heights or stroke weights.
• A classic move is to pair serif and sans serif fonts.
• You can use tools like Canva’s Font Combination and FontPair to help you get started.

5. Keep it simple and minimal

As a related point to tip number 4, it’s best to keep font combinations at a minimum — avoid using more than 2 to 3 typefaces in your design; otherwise, it will look cluttered.

It’s a better idea to play with different font sizes and weights or to use boldface or italics to signify emphasis or hierarchy.

A good UX design involves a harmonious combination of aesthetics and usability. Typeface selection, along with visual hierarchy, help make your design more cohesive and visually appealing. Read more design tips at https://www.ilfusion.com/blog.