How to make font size independent of screen resolution and monitor size?

Question

I am working on one application in which I want to make font size which is independent of screen resolution and screen size. The font size should be same in all resolutions and all screen sizes. How to do it with javascript and css?

I think Pixel per point is hardware related thing so i am not sure javascript and css have access of it.

I tried many alternatives but couldn't find exact solution.

Answer 1

You can use points (pt), which are based on 1/72 of an inch. This is a unit that traditionally comes from printing. Now, it depends on whether or not the device is configured properly, whether or not this size will be the same from monitor to monitor. It often isn't, but some devices are aware of their physical screen sizes. You can also use inches in, centimeters cm, and millimeters mm.

Use this size, in conjunction with ems, which are relative sizes. That way, the whole site can scale up and down as needed.

body {
    font-size: 12pt;
}
h1 {
    font-size: 2em;
}
p {
    font-size: 1.1em;
}

Answer 2

There is no good, universal solution. In my opinion, you should just consider that it's not possible. This article was recently published, and suggests a (long-term) solution to that problem. It's long-term because it depends on multiple players (hardware and software manufacturers) to work out.

To quote the author:

It’s ridiculous that we can send robots to Mars yet it’s still virtually impossible to render a glyph on a web page and say with confidence: “If you measure this glyph on your screen with a ruler, it will be exactly 10 millimeters wide.”