27

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

Improve this question

4 Answers 4

Reset to default
23

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.

Improve this answer
9
  • 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, 2011 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, 2011 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, 2011 at 6:44
  • 1
    You are misunderstanding px. px is not fixed to the pixels. It's fixed, like percentage and em to the the browser settings. It's a virtual pixel, not physical. To use px vs. % vs. em has little-to-nothing to do with the user's device or screen. It has more to do with the particular HTML and CSS frameworks your dev teams are using and who has control over what. If I don't have access to the HTML, then % based fonts in the CSS are going to likely cause nesting nightmares. On the other hand, if I do have access to the HTML, then % based fonts are going to make for leaner CSS.
    – DA01
    Jun 2, 2011 at 6:48
  • 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, 2011 at 6:53
7

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

Improve this answer
2
  • Very interesting collection of results, even though I'd advice against specifying anything font related in pixels any more.
    – kontur
    Dec 27, 2012 at 20:36
  • This article says to only use px and em: w3.org/Style/Examples/007/units.en.html#font-size Am I misinterpreting the context, is this article out of date, etc.? I'm honestly asking because I don't know.
    – Daniel Kaplan
    Feb 23, 2023 at 21:25
6

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.

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

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%}.

Improve this answer
2
  • This is not a good advice, the default font size is based on the default font that the browser uses, if you use a different font the default font size may not appropriate. Not to mention that the default font size, might not be be aligned with other style constants in the design like padding, borders, and all the other general stuff
    – ehab
    Jun 14, 2020 at 11:35
  • You have been misinformed @ehab.
    – Seth Warburton
    Jun 30, 2020 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.