Font Size For Mobile Sites?

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

  • djlumley

    djlumley Correct answer

    10 years ago

    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.

    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).

    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.

    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.

    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.

    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.

    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?

    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.

    What about 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.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM

Tags used