Typography for mobile design, Part 1

2 virtual_water

Setting type for mobile design is a little trickier than typesetting for a standard website for several unique reasons. For starters mobile screens are physically much smaller; just 3 – 3.5 inches compared to a 15 inch laptop screen or 20”+ for desktop monitors. That means that fewer elements can be comfortably viewed on screen at any given time. On top of that, mobile screens are often used outside or in brightly lit areas. All that extra light reduces contrast and that means it’s much harder to see and read what’s on screen. The good news is that your design decisions can overcome these obstacles and greatly enhance the contrast needed for easy reading. Part 1 of this series will cover how to improve readability. Part 2 will discuss maximizing legibility.

Readability vs. Legibility

Readability refers to the art of arranging words, lines and letters in a way that makes it easy for the reader to comfortably read and understand the content. The key method by which readability is achieved is through the appropriate use of spacing to group letters into words, and words into paragraphs. Legibility, on the other hand, refers to the particular nuance and visual qualities of a font itself and how well those carefully designed details aid in reading. We’ll get into this in more detail in Part 2.

White Space

White space, the airy space between elements, used to feel like a luxury the web couldn’t afford back in the old “above the fold” days. In the modern era users are well accustomed to scrolling for content and in many cases prefer to simply scroll for more vs. clicking to see more. In mobile design a healthy amount of white space is absolutely essential for readability. In fact if you follow none of the other principles here, but nail the white space, you’ll be doing a great service to your readers.

Because the size of the screen is so small and contrast is lowered from bright ambient lighting, it is much easier to make out and read letters when arranged with plenty of space around them. This means you should use more spacing between lines and also open up letter spacing a bit more than you would use for print and desktop monitors. How much additional space you use will vary, but you might start with an additional 10-20% line spacing and then evaluate the results in a typical mobile environment. This extra space should help keep the small screen from feeling cluttered and chaotic, and should help readers easily move through your content.

Don’t forget to include white space in the form of margin padding at the edge of the screen. Your eye needs room to take in the words and you don’t want to constantly bump up against the physical edge of the device.

Font Size

Font size is another easy way to bump up readability. Trends are pushing up standard point sizes on the web for a reason. It’s easier for a wider audience to read. Although it’s possible, you should never expect readers to zoom in to read your text. Make it accessible as soon as your content loads and choose a font size that’s easy to read on a mobile device.

From a functional standpoint you’ll want to make sure that links and navigation are easy for fingers to click on. You can achieve this through a combination of a large enough point size and with plenty of space around links.

Also consider that point size can be deceiving, the size impression that an individual font makes depends on it’s x height. Those can vary a lot within any particular point size. Be sure to review your size choice in context and adjust based on the way it appears to you instead of automatically choosing a particular size.

Contrast

You can enhance contrast and improve readability through your color choices.  The stronger the contrast between your text and background, the easier it is to read. Black on white and white on black are the strongest combinations and are always recommended. However we all like variety and uniqueness in our design so you’ll certainly consider more colorful combinations. Using brighter more intense colors may hold up better under bright sunlight.

A simplified color palette or even a monochromatic palette with subtle color variations will reduce the level of visual complexity on screen. You don’t have to stick to just one color for your site. Just be aware of how many colors are on screen at any given time and use fewer colors in areas w/ lots of text or complicated information.

Use color contrast to help create a visual hierarchy by pulling out important info and receding less necessary information. This also helps your readers parse content.

Examples

That’s a pretty good summary of using typography to improve readability for mobile design. Take a look at some examples below and don’t miss the follow up on maximizing legibility in Part 2 of the series.

 

1 exberliner  3 happier 4 flight_card 5 gipis_running 6 turkish_airlines 7 stampd 8 change_hamburg