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!