Getting the right font-size on every mobile device

brent picture brent · May 5, 2013 · Viewed 73.7k times · Source

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?

Answer

Caner picture Caner · Feb 2, 2016

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.