Getting the right font-size on every mobile device

Question

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

text

When I test it on

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

Use @media Queries and set different fonts for different resolutions

Example

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

Good Read On Media Queries

Answer 5

Alternatively, you can have a look at https://github.com/modularscale/modularscale-sass

It can quickly get very complicated to set a lot of breakpoints to cater for every single mobile device and I've obtained very good results with modular-scale.

Also, setting the font-sizes in EMs or REMs is the way to go if you want to be fully accessible/flexible.