Choosing the right font for mobile

Back

Choosing the Right Font for Mobile

Wednesday June 18th, 2014 by Extensis

In 2011, I covered how to choose the right font for your website, which I broke down thusly:

  1. Legibility – Contrast, is it readable?
  2. Tone and style – Aesthetics, does it reflect your brand?
  3. Compatibility – Does it work across browsers and platforms?

While these foundational considerations remain the same, a lot has changed in the last three years—namely that today, more than half the world’s digital content is consumed on mobile devices, including mobile apps, mobile websites, iPads and Kindles (electronic paper), smartphones and tablets.[1]

Choosing the right font for mobile for an always-on audience

The bottom line is that more and more users are reading content with your font choice on the go. As such, in this post, we’ll expand on the above guidelines to help you choose the right one for your next project.

 

Mobile Font Form and Function

The first thing to consider when designing for mobile is that mobile screens, especially smartphones, afford a much smaller digital canvas to play with.

This is why the aforementioned Readability still holds the number one criteria for selection. Fonts designed for mobile especially must maintain high contrast (form) and render sharply and correctly across devices and browsers (function). Other considerations under the broader category of “form” include:

Choosing the right font for mobile, x-height equals openness
Choosing the right font for mobile—look for a more comfy x-height/openness in the letterforms

 

Openness—It’s important to choose fonts with an appropriate amount of space between letters (kerning), even space inside letters. Look for a larger/more comfy x-height. Tip: Some web type foundries and font providers offer very useful recommendations on the smallest size for a particular font, which you can use as your starting point.

The Perfect Weight—Letter parts that are slightly heavier, without too much tapering on the brackets and terminals, prevent them from fading into the background. Don’t choose a font with light strokes, which can easily lose definition at small sizes, especially on round and diagonal strokes. Tip: In the Photoshop type tool, select Mac LCD as your display setting to get a more realistic sense of how your selected weight will display in HTML.

Choosing the right font for mobile—don't choose a font with light or tapered strokes
Don’t choose a font with light or tapered strokes. Go for slightly heavier strokes to prevent fading at small sizes.

 

Looking at the whole—Just as when you’re designing for desktop readability, it’s especially important when designing for mobile to take a step back and look at larger blocks of copy, as opposed to limiting the evaluation to a few characters or sample phrases.

I know from my own experience that I used to get excited over certain free fonts after looking at just a few sample snippets of text. But once I looked at larger blocks of text, it was obvious they weren’t quality enough, and I’d deem them unusable. Flaws that start to stand out with sub-par fonts for web and mobile include irregular sizing from glyph to glyph, bad kerning, and poor contrast to name a few, especially in larger blocks of text.

Tip: Test your top font choices for mobile by creating paragraphs of text. Look closely to see how the letterforms sit beside each other. There should be a nice visual flow that invites reading. The font itself shouldn’t look inconsistent or jarring from glyph to glyph in terms of kerning, x-height and other aspects of a clean, consistent anatomy.

 

Function:

There is some overlap between Form and Functional considerations, but there are some that fall more squarely in the latter category.

One of the most important is of course compatibility. Properly, professionally designed fonts, are specifically and meticulously designed to work flawlessly across different hardware and software platforms, browsers and screen resolutions. The same can’t be said for many thousands of lesser, free fonts you’ll find online.

Choosing the right font for mobile, Monotype’s eText website provides a great crash course hinting, proportion, spacing and scale.
Monotype’s eText website provides a great crash course in hinting, proportion, spacing and scale.

 

Hinting for crisp edging—Web and mobile fonts are designed by professionals. Choose fonts that are hand-hinted for screen quality, redrawn with screen viewing in mind. With these fonts, a type designer will adjust pixel boundaries for good contrast and crisp lines in the letterforms by hand. A lot of free fonts lack hand-hinting and this kind of attention to detail in general.

Another consideration is whether or not the font has been created for and/or optimized for mobile use. We expect this to become more and more the norm as mobile takes over for content consumption.

Some foundries like Monotype are creating eText-specific fonts which promise “improved performance and readability of their content on small screens and in low resolution environments… designed especially for clear display on the full range of devices-smartphones, tablets, eReaders and even E Ink® screens.”

Monotype’s eText website itself provides a great crash course on some of the criteria we’ve covered here, including hinting, proportion, spacing and scale. The eReading page provides a nice interactive comparison between fonts optimized for mobile, and non-eType, where you can try different fonts while adjusting scale and line spacing.

 

How do you choose your fonts?

With this new, expanded set of criteria in mind, how would you stack-rank your own criteria for choosing a font for mobile?

Some designers want what they want and choose solely based on aesthetics. Others might make the decision purely around the user and readability. Some might make their decision by making a compromise between the two, then going with what’s available.

Do you go right for your favorite free fonts site? Do you put tone and style first, functionality second? Do you look for availability in multiple languages? Compatibility on certain platforms and browsers?

Sound off in the comments, we’d love to know.

 

Further reading:

4 Key Considerations When Choosing Web Typography

Choosing the Right Fonts for E-Text

 

[1]Newstex