I’ve just found an article that mentions reducing the base font-size for small screens. It reminded me of a niggling question that I’ve been meaning to raise here, namely: should font-size be increased, left the same, or reduced for small screens? I’m not a mobile developer and I don’t have easy means to test these issues with hardware. I’ve always left the font-size as-is. My gut says that reducing the font-size would be a bad idea. But am I wrong and is this guy actually on to something?
I don’t like it. The text on most mobiles, even at default sizes, is pretty darn small. Shrinking it further is just making it unnecessarily difficult to read. Setting a base font size of 0.7em is unacceptably arrogant and disrespectful of people without excellent eyesight.
Although I’m not sure how effective it would be - a lot of mobiles seem to have a minimum text size that they won’t go below.
Thanks, Steve.
Do you have a ballpark for what you consider to be minimum font-size to suit most mobiles? I usually aim (insomuch as you can) for the equivalent of 15-16px in desktop-orientated designs, usually just starting at 100% and working up: is that sufficient?
I just stick with a base size of 1em and leave it at that for body text. Trying to second-guess what size anyone has their computer set to is an exercise in futility, so I just trust that everyone sets their default size to one they’re comfortable with. (I realise that isn’t going to be the case, but I’m not keen to ruin things for some people just because I’m catering to numpties elsewhere!)
Thanks again.
I second this. I always use 1em as a minimum and go from there. On mobile, particularly when dealing with touch screens, bigger is better.
Assuming the mobile device uses the 16px 96dpi default, 0.7em would be 11px – as a rule I wouldn’t go below 12px on ANY device unless it’s an ancient 75 dpi device (and even then the only time I’d use 12 is as all-caps) so that’s automatic /FAIL/… keeping in mind that some mobile devices start out at 14px, that’s an even bigger /FAIL/.
Generally I use 85% everywhere, that gives 12px off the 14px ‘smaller’, 14px at 96dpi, and 17px at 120dpi (thanks to rounding which is why I use 85% instead of the ‘perfect’ 82.5%) for sans-serif fonts… and 100% for serif fonts (though it really hinges on the font face since they aren’t all sized the same).
Though kvetching over size from 85% to 100% is almost pointless when you can’t guarantee the delivery of the exact font you design for, the same font renderer, the same font kerning (yes freetype, I’m looking at you!)… I mean with widely varying font size results like this:
We’re really spinning our wheels on the subject as simply changing the face changes the rules! It also shows why I’ll say 85% on sans-serif and 100% on serif… except of course Verdana which is uselessly large compared to other faces; I think that’s the real reason some people find verdana more ‘legible’ at the same ‘size’ – as it’s actually larger when you declare the same size. Segou UI is just as ‘legible’ if you bump the size 25% so they’re near identical.