Mobile typography

Posted on Jan 24, 2010 in UX, Visual design

Yesterday I took on the task of deciding on a font for the mobile device portion of our final project. While I knew that there must be fonts out there that would perform better than others on a small screen, I had never thought about it until this point in time.

Of course, like every good design, typography included, there’s a slew of design considerations to be made when designing (in my case choosing) a font for a small mobile device. While as a designer, I’m always looking for something a little different that lends itself nicely to whatever project I’m working on, sometimes I do sacrifice a little clarity for a special effect or extra ligature. Mobile fonts are likened to signage on, where they say that the audience of the visual font is varies so greatly, from young to old, experienced to newbies, visitors to regulars, that functionality (legibility) must be the prime attention.

Fonts are generally set on a computer as a vector, a scalable letterform with smooth edges. As smooth as these edges are, they are still made from pixels, which are tiny squares on the screen that work together to produce a smooth line. When you reduce the size of a letterform, or anything vector for that matter, into something that’s only 20 pixels high, instead of seeing a smooth transition on curves and corners, blocking starts to happen and you lose the crispness that you had when the letterform was larger. Holes in the middle of letters, known as counters, can start to fill in, thin lines can start to disappear and pretty quickly you can end up with a muddled font.

For this reason, straight, even width lines are best to construct a screen font. Keeping descenders (like the hook on the y) and ascenders (like the top part of the l) shorter rather than longer, as well as keeping the x-height (height of the middle part of the letters) 65 to 80% of the size of the letterform will also prevent lines on top or bottom from running into each other. (The space between lines of text is called leading.)

Considerations to the amount of space that is available on the screen to hold the chosen font also dictates what it should look like. With a limited amount of space, a condensed font, or at least one that is not too wide will get you more characters per font size than a regular one. A font that is already well spaced (called kerning) between each letter is also important to ensure that there are no gaps when reduced in size, or that letterforms blend together. This will all help increase legibility for the user.

To start your quest in the perfect mobile font, you can explore Microsoft’s clear type fonts originally designed for LCD’s or try out the Droid fonts, specifically designed for mobile devices.

Leave a Reply