Mobile Design Typography is Vitally Important … and Challenging

Typography is the backbone of web design. Good typography will make your site easy to read, visually appealing and works in different user environments. Poor typography makes people look away.

One of the emerging challenges for web designers is creating web typography that works in the mobile environment as well. But it can be difficult, and there are many things to consider. The keys are to focus on readability, contrast, space and responsiveness.

Readability

It’s the words that matter.

In 2006, Oliver Reichenstein of Information Architects (which showcases excellent type-oriented display), wrote that “95% of the information on the web is written language.” That statement should be a guiding principle for all web design projects.

It encapsulates the importance of readability.

When designing for mobile and responsive formats, select simple typefaces that are easy on the eye – simple sans serifs of average weight work best. (Think Helvetica.)

Size and line breaks are another consideration. There is no simple formula for selecting a font size, but a good starting point is to match the point size to a maximum number of characters per line. An average range is 60 to 75 characters per line for website design, including spaces and punctuation. For mobile, consider dropping to 35-50 characters per line or basing the number of characters as a percentage of the total from the web layout.

Lines that have too many characters can be difficult for the eye to follow. Lines that are too short break a user’s natural reading rhythm. Size is a factor here as well. Lines with many characters require fonts that are too small to be easily readable, while lines with too few characters leave the design open to very large characters, which can look odd or even cartoony.

Contrast

Contrast in design is important if you want to make type stand out. You would not want to read pink type on a red background, would you?

It may sound simple, but plan your design based on white text/black background or black text/white background. After you find success with these combinations, consider adding color. But keep the contrast pattern from white and black in mind along the way.

Space

The smaller the screen size, the more important it is that you give letters room to breathe – vertically and horizontally.

Simply, add more space around and between type when designing for smaller screens. Add room to the margins so there is a natural line between where the screen ends and text begins.

Add extra space – maybe as much as 20 percent – between lines of type. Smaller type is easier to read with additional spacing. Think of it this way – you would not use 16 point type with 12 point leading on the browser-based website, so don’t do it for mobile. (Online you might consider 12 point type on 14 point leading; for mobile that would adjust to 12 point type on 16 point leading.)

Users are used to scrolling and will read your content if it interests them; they will not read it if it is too tightly packed to browse with ease.

Another consideration when it comes to mobile typography and space is room between elements. Just as you will give type extra room to breathe, give elements that same space. Instead of cramming four navigational bars into a horizontal space, stack them vertically in the mobile design.

Don’t try to cram elements into a side-by-side format as you would with the more horizontally shaped browser. Stack photos, text and other elements for the vertically-shaped mobile device. (You will also need to keep flipped orientation in mind for those mobile users who will read by turning the phone 90 degrees, but hopefully your adaption for responsive design techniques will accommodate those users.)

Responsiveness

The idea behind responsive typography is that type is resizable by screen size and user control and it includes optimized line lengths based on the width of the screen.

Responsive type is designed using pixels, ems or rems. Each is a different unit of measure that defines a relationship between the font used on the website (100 percent) and the font used at other points along the responsive grid.

Why does this matter? Planning your mobile site with a responsive grid in mind will give users the best possible experience and leave them with the most readable type because it will adapt to their screen, regardless of size.

There are a host of responsive grid templates and options to choose from and all have advantages. The designer needs to determine what properties are the most important when selecting or creating a grid so that the mobile site maintains the look, feel and branding of the sister websites.

Tips for Success

Start small. Does your text render on a smartphone? If not, work with the type so that it is readable on the smallest screens first and make adjustments to accommodate larger screen sizes.

Think about multiple columns for text. A single column is the right width on a small, narrow screen but what about in a wide-screen web browser? Think about splitting text into two columns to keep lines from getting too long.

Consider the type style. Letters of even stroke weights are the easier to read at small sizes. Avoid typefaces with varying wide and narrow strokes. Also consider the width of each letter; very skinny condensed fonts are more difficult to read than normal or regular styles.

Avoid bells and whistles. Scripts, cursives and novelty typefaces do not render well at small sizes. Avoid them for use in body text and use them sparingly for display (one or two words maximum).

Keep it simple. When working with mobile devices, remember the screen is small. Few elements mean text will be easier to read.

Test, test, test. Check out your design concept on multiple devices.

Check out different browser sizes. Do it with just a click from your desktop before you get started with a tool such as resizeMyBrowser.

More Great Mobile Typography

Thinking about mobile typography extends beyond mobile websites. It also includes app design. Here are a few websites and apps that have mobile typography down to an art.

Mobile Sites

Story Hotels

Amy Stoddard

Roanoke Outside

Print Fancy

McDonald’s

CBS Sports

Hipstamatic

Apps

Evernote

Paypal

Flipboard

NY Giants

Red Stamp

Nike Pro Training Boom

LivingSocial

Food on the Table

Get more inspiration:

• Mobile Awesomeness
• Media Queries
• Inspired UI