Let’s get serious about mobile typography; we all know that mobile is massive, and we can also agree that typography is super important within a design. Typography is a fundamental design element; personally, I prefer to start with it as I create any design because it helps set a good stage for the rest of the design. So let’s talk about how we can make our mobile typography the best it can be.
When designing for mobile, arguably our biggest enemy is the physical screen size. Some smartphones are super small, like the old, but still widely used iPhone 4/4S. According to UNITY, 15.9% of people still use this antiquated model. In the US that figure translates to almost 24 million people. Yes, that’s a lot of people with tiny, tiny screens. Then we also have bigger screens like the new iPhone 6 Plus, Galaxy Note 4 or Nexus 6. The fact that there is such a big range in screen sizes is a restriction in itself, because what looks good on an iPhone 4 won’t always look good on iPhone 6 Plus.
You may want to look at your analytics and see what your site’s most popular device is, start tailoring to it. However, it’s generally accepted that a device-agnostic approach will serve you better in the long run.
Take a look at the image above to see how equally-sized text renders on each device. I couldn’t even completely fit “Heading 1” on the iPhone 5S, demonstrating that responsive typography starts with the screen size in mind.
Some other obstacles when designing for a smartphone include the lighting in the user’s environment, as well as how closely they hold the phone to their face.
Let’s start with the latte. As we use our phones with our hands, we tend to hold them at arm’s length or even closer to our face. This means that type can be smaller on a phone because the distance between the screen and our eyes is shorter than that of a laptop or a desktop monitor.
Having the ability to decrease font size also means that we can include more text in the same amount of space, giving us more soothing “measures”. In turn, this helps alleviate the smaller screen size, but only slightly. You can see this in action in the image below.
People use their smartphones all the time, everywhere. On the subway, in the park, on their couches or bed. Your app or website could be used in various environments with different lighting, which means you also need to be aware of contrast. Reading in the park is possible–even with direct sunlight–if the contrast of the text is high enough against the background. In this scenario, having bigger text also helps. It’s less necessary to focus on contrast if the reading is being performed on a subway, where lighting doesn’t glare so more, or at night in one’s bed.
Gizmodo published a detailed article about which mobile device (including both tablets and smartphones) dominates outdoors. They performed a comparison of their colours in relation to various sunlight options. It turns out Samsung Galaxy S outperformed iPhone 4 in indirect sunlight, which is the worst of the worst lighting outdoors. Check out the full article if you’re looking for more details on this.
My point is simple, there are so many moving parts when it comes to designing for readability on a mobile device. Know your users so that you can best determine what their reading experience should be like, start with their phone types and end with their environment.
There are plenty of tutorials out there that help you determine the specific pixels your text should be based on golden ratios or just eyeballing what looks good. Figuring out a good typographic scale for desktop is straightforward. It’s actually pretty easy to do it for mobile devices as well. Typecast has a wonderful article detailing how you could go about finding the measurements for your mobile and desktop typography: A More Modern Scale for Web Typography. The article clearly explains why typography needs to be responsive. But I want to get more detailed than simply stating “People tend to read differently on mobile” – it’s so much more than that!
You see, mobile is the least fixed medium we’ve had to deal with as designers. As I’ve previously mentioned, people read on their phones everywhere, in ever changing environments. To best optimize their reading experience we need to understand the psychology of what in fact makes for a good reading experience.
I’d like to think that designing the best reading experience for mobile starts with the perfect body text. Whichever font you choose you need to make sure it’s flexible enough to withstand different screen sizes in the same font size and still look good. If you choose Helvetica Neue for your font family you should make sure it will look good on an iPhone 4s in 16px as well as on a Nokia and a Galaxy phone.
Also consider font weight when you’re selecting a font, as some phones will display a regular, bold or light texts differently to others.
That’s right, headings are equally as important! You have more creative freedom with headings as they can sacrifice some readability for impact, but consider their scale too. A heading, as demonstrated in the first image with mobile screen sizes, is far more likely to become unreadable because of being over-sized on a small screen. A large heading is also a waste of space, as you could be preventing users from getting to the meat of the content.
Another thing to bear in mind when perfecting your body text is the vertical rhythm. Vertical rhythm is a term referring to the vertical spacing and alignment of typography and other elements on the page. The term rhythm signifies a repetitive pattern. A good vertical rhythm ensures the reading experience is easy because it allows for a balanced layout that easily guides the reader’s eyes.
Whether the baseline is loose or tight, its consistency is what’s most important. But it’s important to realise that the baseline on mobile devices can reflect the small screen size. Don’t be afraid to tighten things up, especially if you’ve reduced the font-size, but figure out a comfortable vertical rhythm to ensure that reading is smooth for your reader.
If you need help getting started with figuring out the best measurements for your vertical rhythm, Andre Morton has a vertical rhythm generator on his blog.
There are some rules of thumb I’d like to share with you when it comes to designing typography in general, but that hold especially true for responsive and mobile typography.
You should never have to adjust kerning for websites or apps of any kind. It’s a difficult process and highly unreliable for the web! Quality fonts will have the kerning well figured out, and if the font you’ve chosen doesn’t have good kerning, ditch it.
When there is no clear rag at the right or left side of your text then it might as well be justified (and text should never be justified on the web). A poor rag will cause holes and gaping breaks in the whitespace; it’s easier to read and scan text when there is a clear rag. How does your text break at different screen sizes? A fix can be very simple adjustment that either takes away a few pixels from your text’s containing element, or adds a little to it.
There is nothing more deceiving as trying to tap a small area on a phone and not being able to because it’s too small–or worse, tapping on something else instead. Perhaps the best advice here is to have as few of them as possible! When there is only one inline link it’s easier to tap it, because there is nothing else to accidentally open. Next, make sure the link is clear. This can be done in a variety of ways like making the links bold, or leaning on the standard underlining pattern. Sometimes just changing the colour will not be enough if the contrast is too low (remember how we talked about screens colours and lighting issues?)
Lastly, make sure that inline links have more touch area than is perceived. This can achieved by applying
display: inline-block; to anchor elements, but make sure any
padding or extra
line-height you apply doesn’t distort the main text.
Designing typography for mobile has a lot of moving parts that you should be aware of. I do hope that this post has given you some insight about how to improve your designs for mobile. Let us know your own tips and tricks in the comments!