27

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

4 Answers4

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.

djlumley
  • 638
  • 4
  • 8
  • Pixel sizes should be fine. They, like the rest, should be relative to user preferences (aside from old versions of IE, which, as always, had bugs). – DA01 Jun 02 '11 at 05:24
  • 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 02 '11 at 06: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 02 '11 at 06: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 02 '11 at 06: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 02 '11 at 06: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 02 '11 at 06: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 02 '11 at 07:05
  • 1
    What about rem? http://snook.ca/archives/html_and_css/font-size-with-rem Not that it will do you any good if you're using em for older browser font resizing, but I like using em so my font ratios stay constant when I change the font size near the top, and rem is a good way to get back to the base with nesting. – Pam G Jun 02 '11 at 18:54
  • According to MDN and w3c, font-size: medium; is the default. Given that, IMHO, it's preferable to exclude font-size: medium; when it would be the default value anyway. – Daniel Kaplan Feb 23 '23 at 21:32
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

Kevin Peterson
  • 171
  • 2
  • 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
  • This article says to only use px and em: https://www.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 '23 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.

DA01
  • 41,799
  • 5
  • 81
  • 142
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%}.

Seth Warburton
  • 412
  • 2
  • 7
  • 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 '20 at 11:35
  • You have been misinformed @ehab. – Seth Warburton Jun 30 '20 at 13:21