Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 10 down vote favorite
4

I am designing a mobile site, and I'm wondering what I should set the font size as. Any suggestions?

share|improve this question

3 Answers

up vote 11 down vote accepted

Like any normal web design, it's worth staying away from pixel sizes so if a user really needs larger text they can still use your site.

Unless you're targetting a specific group of phones that you can test, it's best to let the OS and browser handle the size. font-size: medium; should be fine for content, and then you should be able to make em based adjustments for larger or smaller text. That will give a better user experience across a larger amount of devices.

If you want to optimise the experience, then it all depends on your content and what devices you're targeting. The only way you'll only find the optimal size is by testing.

share|improve this answer
1  
Most mobile devices have different resolutions, different sized screens. Pixel fonts are 'fine' but there's no reason to use them when using em or percentage is so easy, it's just being lazy. – djlumley Jun 2 '11 at 6:35
1  
It's not an issue of laziness. It's simply a preference based on the particularities of a project. Knowing how to use both and when to use them is key. – DA01 Jun 2 '11 at 6:41
1  
If you know the user environment exactly, then I agree that they're fine. But in that case, controlling font-size with em or percentage will give you the same result. Using em or percentage will also give users a better experience in situations where the environment is drastically different to what you expect, which is why there's little point to using pixel sizes. – djlumley Jun 2 '11 at 6:44
1  
I understand what you're saying, but there's a variety of older browsers that don't scale pixel based sizes to user settings. If you're not targeting specific mobile browsers and devices, then for the browsers that don't support scaling based on user settings you get a substandard user experience. That said, I don't understand why access to HTML makes it easier apart from being able to add classes and id's which should already be there? – djlumley Jun 2 '11 at 6:53
1  
I deal mainly with webkit and blackberry at the moment, so not (fortunately!) having to deal with buggy old versions of IE at the moment, but, yes, old versions of IE can't resize fonts set in PX (a huge bug in that browser). As for the HTML, there are times when you may not be in control of that. If you have div {font-size: 80%} then you are going to run into inheritance issues when the HTML devs nest a DIV 3 deep--that's a case where px measurements are going to be the saner option. – DA01 Jun 2 '11 at 7:05
show 3 more comments
up vote 3 down vote

Screen densities and UIs come in a wide range of flavors. So it's really a crapshoot. But if it's a UI catering to mobile devices, it probably doesn't hurt to err on the larger size.

share|improve this answer
-1, too general(OP asked "what I should set the font size as") – Quamis Jun 15 '12 at 10:01
@Quamis many questions are too general to have specific answers. – DA01 Jun 15 '12 at 14:35
up vote 2 down vote

Setting it to somewhere between 18-24pt (or 150-200% if you prefer) will probably give the best compromise results on iPhone and Android. From my testing, mobile browsers totally ignore what the standards say on relative vs. absolute and default to a size that attempts to display a page originally formatted for a full size computer (i.e. just barely readable if you're a teenager).

Here are my results on font size in different mobile browsers

share|improve this answer
Very interesting collection of results, even though I'd advice against specifying anything font related in pixels any more. – kontur Dec 27 '12 at 20:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.