Menu Close

5 Tips for Elegant Mobile Type

Type is the single most important element of any design. It is the vehicle that directly communicates marketing messages, interface usage, stories and ideas. Type is the supporting structure of the page layout, the setter of moods, a brand communicator and an attention getter.
In the mobile world, type is just as important as it is on the desktop. It may even be more important, as it takes the place of complex imagery in many mobile designs. Perfecting the typography of your own mobile design doesn’t have to be an obscure or foreboding practice. Here are five best practices used throughout the mobile industry that will greatly improve the user experience of your own mobile designs.

1 Choose the right font

Mobile typefaces have a lot in common with Goldi-locks and the Three Bears. Everything needs to be just right. To look best on a small screen and be readable at a smaller size, the best font is one with the following qualities:

intro
An even and balanced height. The font should not be too squashed or squat, and lowercase letters should ideally be at least 2/3 the height of the capital letter. This is referred to as the “x-height.”

1b

Ample stroke and contrast. This means the font should not be too thin or too heavy, but somewhere in between. Additionally, each character should have a somewhat evenly distributed weight rather than narrowing at a given point.

1c

Not too narrow. Narrow fonts have narrow “counters,” which are the holes in the center of a “p” or “e” or “o” and so on. These typefaces may look great in print or on the web when displayed in large, but they will be hard to read when rendered so much smaller on a mobile screen.

1d

Not too fancy. Simple is best. Avoid fonts with ascenders and descenders (the parts of the “d” and “y,” for example that may extend above or below the common lines shared by the other characters) which are too long. Decorative fonts tend to break the above three rules, so opt for an elegant sans-serif for your UI elements, content and headers.
Distinction between bold and regular weights. If you choose a font that is too heavy to begin with, you may end up with content that looks like it is all bolded. You want type that has an obvious weight and style difference between its normal, bold and italic iterations to create the best contrast.

Here are a few examples of fonts that meet these requirements:

  • Nobile
  • Museo Sans
  • Aller
  • Cantarell
  • Droid Sans
  • Yanone Kaffeesatz
  • Cicle Gordita
  • Carto Gothic

2 Use the viewport tag

The viewport meta tag is a short snippet you can add to the head of your website to help it display properly on mobile screens. Browsers that support the viewport tag (which is most of them, now) will use the settings you define in the viewport tag to dynamically scale the content area to the viewable area of the browser in both portrait or landscape orientation.
This does great things for your typography and makes your content much easier to read. By default, a website that is not designed for a specific screen size is going to be displayed using the default viewport, typically 1020px, 960px, 768px or larger than a standard mobile screen. The user has to zoom in on parts of the content and reposition it to read it properly. What a drag!

A simple, effective viewport meta tag you can use is this one below, placed just below the other meta tags and above the “</head>” tag in your HTML document.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

3 Embed the font locally

You already have the challenge of getting your chosen typeface to render well across multiple device types, each with their own quirks. The last thing you need is for your type not to render at all. Using remotely hosted fonts such as Google Fonts or Typekit may work well for the web in general, but most mobile devices are on a slower connection. What happens when they can’t connect to your font service? Use @fontface or other methods for embedding the font into your mobile stylesheets from the same server when possible, or provide a fallback font in your stylesheet that has similar qualities. Keep in mind that not all devices will be able to serve up “Calibri” or “Arial” on demand, so use “sans-serif” to call the mobile browser’s default.

4 Apply appropriate styles

You may have a perfect typeface that looks great at small sizes, but it will fail its purpose unless you provide appropriate stylesheet support. On its own, a font cannot control how it ends up on the page. Instead, it looks to you to provide sufficient line-height and sizing.
CSS3 media queries are probably the most effective means of dynamically scaling your fonts based on the screen size, but a good practice is to use percentages or “ems” instead of pixels, as a pixel is different from one screen to the next.

5 Avoid using images!

Cufon or typographic images are not very mobile friendly. While you can build extensive media queries to handle how they scale and display across multiple screen sizes, it is easier not to use them at all. Use text where text should appear and the above tips to render it, and your user’s experience will be a lot more consistent.
Want to learn more? Check out these fantastic resources: