Type & Touch

As a general rule I gravitate towards larger type not only for relative readability, but also to help with touch targets. Yesterday, Matt Griffin from Bearded posted on the desire to, at times, use a base font-size that’s less than the 100% (16px) default for a range of media queried viewport widths. I questioned this in a series of nagging tweets, noting that touch and viewport size aren’t connected. The most popular touch devices may currently be phones and tablets, but you can also find touch screen offerings for 27” monitors and beyond.

I find it’s better to err on the side of larger type and bigger touch targets on any screen size, but I do think I was over-generalizing. In fact, there are a lot of places on the current Microsoft Homepage where we’re using 14px (0.875em) text. I think it works quite well for things like labels and caption/sub-text, especially for narrower columns.

Also, it’s entirely possible to have type smaller than 16px and maintain reasonable touch target sizing through vertical spacing like line-height and padding. Why both? Take a look at the two unordered lists below (Demo also on CodePen):

Example A only uses line height to establish vertical spacing, but when text wraps at narrower views the list items are hard to tell apart because lines of text and list item links are spaced the same. Example B has a tighter line-height with the difference being made up with the extra padding. This way, when the text wraps it’s easy to tell items apart. Bada-bing!

8 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Iain

    There’s nothing that bugs me more on a small screen than a small touch area; and I am only 5 foot 8 with a small pair of hands (apparently), yet I still feel my fingers are still a bit big for some touch areas. When I work on an RWD project, I begin to wonder if I need to make the type around 14px (0.875em) for smaller viewports, but often I stick to 1em.

    On the line-height example there it’s easier to use padding as there’s nothing more annoying than being unable to differentiate one link from the other, let alone hit the wrong target with your finger rather than the other, which can make for a messy experience. Good pointer there for touch areas with type and will keep it in mind on my future projects. :-)

  • Jessica

    Yes to padding for clickability/touchability! Though in terms of readability (and shouldn’t that be the first concern with any text?), larger typesizes aren’t inherently more readable. For instance, I keep wanting to lean away from my desktop monitor to read this post. But the links are very clickable! Balance is key, of course. :)

  • Isiah

    Nice post.

    Small touch screen areas and normal-sized fingers that seem too large for real accuracy is the reason I bought a stylus for my iPad <_<

    Cheers
    I

  • Chris

    I agree that erring in the side of larger type is better all around, but I think that is true only to a point. There are some sites that go overboard with huge type which slows down my reading. I recommend using the browser defaults and let the user resize on their own.

  • Al

    Becomes more complicated as the screen gets smaller. Ideally on a small screen you want large-ish text so that it is readable and “touchable” as mentioned. At the same time increasing text size on a 4-5inch screen can leave you with little more than a few lines on screen at any one time - cue finger scrolling galore. T

    hen you need to consider the wide range of resolutions on very similar screen sizes. A lot of Windows Phones will be 800x480. Newer phones might be closer to the 1280xwhatever range. I believe the HTC One will be/is 1920x1080!

    Throw in tablets, laptops, desktops and it’s quite a technical challenge.

    Anyone know of an online tool that simulates the wide variety of resolutions I mentioned but imitates a phone/phablet screen dimensions? It’s fine testing 1920x1080 on a desktop but it’s entirely different on a <5 inch mobile.

  • jonathan bowden

    Trent, thanks for this. I used this technique on a prototype today. Much appreciated!

  • Utwo

    @Jessica: On my desktop monitor this font size feels very good. Maybe there is a reflexion to lean back, because most websites use smaller font size.

  • keith

    @Jessica:

    I can’t help but agree. I’m generally in favour of larger type rather than smaller (example: people who see me reading Kindle books on my iPad often ask whether I’ve forgotten my spectacles) but I do find the body type on this page uncomfortably large on a 1440p 27″ display.

Leave a Reply