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 a font size that does not depend on screen resolution and screen size. The font size should be the same in all resolutions and all screen sizes. How to do this using javascript and css?

I think the pixel per dot is related to the equipment, so I'm not sure if javascript and css have access to it.

I tried many alternatives, but could not find the exact solution.

Answer 1

There is no good one-stop solution. In my opinion, you should just think that this is impossible. This article was recently published and offers a (long-term) solution to this problem. This is long-term because it depends on several players (hardware and software manufacturers).

Quote from the author:

It’s ridiculous that we can send robots to Mars, but it’s still almost impossible to display a glyph on a web page and say with confidence: "If you measure this glyph on the screen using a ruler, the width will be exactly 10 millimeters."

Answer 2

You can use dots ( pt ) that are based on 1/72 of an inch. This is a device that traditionally comes from printing. Now it depends on whether the device is configured correctly, regardless of whether this size is the same from monitor to monitor. This is often not the case, but some devices are aware of their physical screen sizes. You can also use in inches, centimeters cm and millimeters mm .

Use this size in combination with ems , which are relative sizes. Thus, the entire site can scale up and down as needed.

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

Answer 3

Old fashioned items should work.

Example:

 <style> p { font:15pt; } </style> 

Answer 4

You cannot do this because you cannot be sure what the true size of a user monitor is, unless you control the computers used.

It is possible for the user to simultaneously connect two monitors and install them in such a way that the same screen elements are displayed in different sizes on each of them.

Answer 5

 html {font-size: 14px /* in example */} 

each sbling html element gives a relative size, which means

 body { font-size: 100% } /* is 14px now */ 

and

 div { font-size: 1em } /* should be 14px also */ 

It is also possible to resize the html font using javscript, and all relative sizes should work as expected. with jQuery you can access the body font size and set it to a certain size calculated from the screen. even work would be @media () { your css here } rules for any kind of application on different devices.

 var fontsize=14+'px'; jQuery('body').css('font-size',fontsize); 

Answer 6

You can use cm and mm:

 <span style="font-size: 2cm;">i am big</span> <span style="font-size: 2mm;">i am tiny</span> 

Answer 7

According to others, the font size cannot be completely independent of the screen resolution. What you can do is use media queries for different screen sizes and change the font size accordingly.

 body { font-size: 16px; } @media screen and (min-width: 600px) { body { font-size: 112.5%; } } @media screen and (min-width: 800px) { body { font-size: 125%; } } @media screen and (min-width: 1000px) { body { font-size: 137.5%; } } @media screen and (min-width: 1200px) { body { font-size: 150%; } } 

These are only approximate values ​​- you will have to experiment with your application of different sizes and see what looks best. A good example of this site is Trent Walton - resize your browser window and see what happens with the size of the text.

If you make the size of all fonts using em or rem modules, you only need to adjust the font size of the body, and the rest of the values ​​will be scaled proportionally.