Our top tips for improving mobile typography

OUR TOP TIPS FOR IMPROVING MOBILE TYPOGRAPHY

When discussing good typography, the majority will tell you that good typography is invisible to the eye. Here at Wecan Media however, we feel it’s more accurate to say that good typography simply makes the act of reading an effortless process. When the eye travels across text it does it in jumps, which are known as saccades. Instead of reading the letters or words, we read snapshots of the words and our brain simply fills in the blanks with what it expects to see.

If our brain becomes surprised by something it’ll simply go back to check its assumption was the right one. Good typography helps by reducing the work your eyes has to do by making the line flow smoothly. When it comes to mobile devices, there are inherent challenges in that space is limited and light can often be poor but by making simple adjustments we can improve readability hugely. Here are our top tips for improving mobile typography.

Make space

Contrary to what most believe typography isn’t about the line itself but the space in between and around the lines. We could even go so far as to say that typography owes far more to the space that frames the letterforms than the letterforms themselves. For the best readability on mobile we suggest paying special attention to the hierarchy of space. The grouping of characters in words, lines and paragraphs is more essential.

Measure correct

When we discuss measure we refer to the length of a line of text or more accurately the ideal length for a line of text. The ideal measure for comfortable reading is around 65 characters. The physical length of measure however depends greatly on the typeface, the tracking and the text you’re using. It’s rare that 65 characters will extend past the edge of a desktop but on mobiles however, it’s a different story. There aren’t commonly accepted standards of measure for mobile devices however newspapers and magazines aspire to 39 characters, which serves well for mobile too.

Leading must be loosened then tightened – leading refers to the space between the lines. When this is set too tightly it can make the jump from the end of one line to the start of the next much harder. When set too loosely however it can interrupt the flow of the line. It’s important to experiment with this and find one that’s just right.

Find the sweet spot

Every single font has a sweet spot and by this we mean a combination of the size at which it appears best on screen and the point at which the browser will distort the design. The sweet spot is usually the point at which the majority of strokes will line up on the pixel grid. By setting a font to its sweet spot, you’ll achieve greater contrast and this is very important when designing for mobile due to the high risk of distracting glare when you’re not in the comfort of your subtly lit living room. You may find that minor adjustments to leading may push/pull lines off entire pixels. In our opinion however, contrast will always trump leading when it comes to mobile.

Don’t lose your rag

By rag we mean the edge of a block of text. The majority of what you read is aligned left resulting in a ragged right edge. When your eyes jump from the end of one line to the beginning of the next, your brain will naturally find it easier if all the jumps are consistent. For this reason we advise keeping the left edge flat ensuring each line begins in the same place. You should never centre align more than two or three lines for this reason also. In some cases text can be justified which means the words on the line are all spaced to ensure no rag on either side. This may be due to the increase in responsive design, which has taught many designers to think in blocks. It’s worth remembering however that justified text can lead to inconsistencies within the white space and this can cause jarring. This would make things more unreadable on mobile. If neatness is a massive issue then we suggest hyphenating the text to soften the rag but under no circumstances should you justify on mobile.

Reduce contrast

Although we want to increase the contrast between text and background we ideally want to lower it between the different levels of type. When it comes to importance, our brains judge this based on context so your headings may be two or three times the size of the body of text on your desktop. On a mobile however, substantially less text is visible so contrast becomes somewhat exaggerated. For mobiles we suggest tightening the ratios up a little to reduce the contrast.

Alter your tracking to scale

When we adjust font size on mobile we must remember the necessary changes in tracking. Tracking isn’t kerning, it’s the letter spacing that’s applied to all characters in a font and although you wouldn’t usually adjust tracking, there are exceptions in the form of headings and footnotes. Larger text requires less tracking due to grouping whilst smaller text requires more tracking to benefit contrast. 

In summary, typography is a craft that many designers will spend years honing. This is simply because each new text, new typeface and new technology will bring with it new challenges. Our top tips above are merely suggestions and it should be remembered that there really are no hard and fast rules that will cover every single situation. When thinking about readability there are three things to bear in mind, a smooth flow, a clear hierarchy for space and adequate contrast. Nail these and you’ll be fine. For more information on typography or how we can help you, contact us here at Wecan Media today.


Wecan Media Live Chat