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

up vote 23 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.

  • 2
    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
  • 2
    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

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

  • 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

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.

  • -1, too general(OP asked "what I should set the font size as") – Quamis Jun 15 '12 at 10:01
  • 3
    @Quamis many questions are too general to have specific answers. – DA01 Jun 15 '12 at 14:35

It should be the default font-size!

Don't set it at all, the browser will set the root element font-size as the default (typically equivalent to 16px) for that device. This way you don't have to second guess either the OS / device creators or your users.

If you really feel that you should set something, set it at the default. html {font-size: 100%}.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.