Getting the right font-size on every mobile device

Question

In my mobile app I use kind of big fonts for example:

<b style="font-size:100px; font-family:Segoe UI">text</b>

When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.

What css settings should I use to get the same size on every phone?

Solution 1

You should be using Media Queries for different device widths.

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

And so on...

Solution 2

Media queries won't work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.

Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.

There was no solution to this problem until recently. Recently CSS3 added support for what they call 'Viewport Sized Typography'. It allows you to set the sizes of things relative to physical screen size. It is explained here.

Solution 3

Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.

For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.

If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):

    <meta name="viewport" content="width=device-width, initial-scale=1">

If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.

Solution 4

I have started using REM and EM to achieve this.

I don't know whether a phone browser's default font size changes based on screen size or specific to device. So what I do is I set the HTML to a font size relative to an average of the height and the width of the device using vw and vh like so

HTML{font-size: calc((1vh+1vw)/2)}

By using REM and EM from here you get a more consistent layout and font size across the board.

This works well for mobile devices as they all tend to be the same sort of aspect ratio. I would recommend changing how you implement this for tablets and desktops as their screen ratios tend to be quite different. Of course, use media queries to have separate styles for these.

I would like to say that I just started using this method so would love to hear reasons why I totally should not be using it!

View more solutions

Comments

[grantmcconnaughey]

Here are a couple of really good articles regarding media queries: mobile.smashingmagazine.com/2010/07/19/… css-tricks.com/css-media-queries

[Lee Blake]

This is great except this changes the font sizes when someone, say, shrinks their desktop browser to a narrow width which is weird. Since a lot of modern mobile browsers have the type set to screen instead of the more appropriate handheld, using the type to differentiate is useless. Is there w way to use the media query to only apply to the initial window size?

[mehmet]

if you use viewport sized typography it would be relative to the screen size (big on bigger screens and smaller on smaller ones) and thus not of equal physical size accross devices.

[phs]

Typography driven by vh and vw can also change the text size when switching between landscape and portrait orientations. vh (or vmin) can change in some mobile browsers (ios chrome) when scrolling down, due to the toolbar+url box scrolling off.

[StackSlave]

I like this solution without the , initial-scale=1. If you make sure that you have a div with width:980px; margin:0 auto; directly inside your body with <meta name='viewport' content='width=device-width'> in your head it will save you a lot of work. Thanks a lot.

[grabantot]

@PHPglue can you please explain how is that div supposed to help? And why 980px?