CODEWITHSUNDEEP
javascripthtmlcss
Hiren Dhaduk
Hiren Dhaduk

Reputation: 2780

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

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.

Upvotes: 9

Views: 10989

Answers (7)

James Duffy
James Duffy

Reputation: 1387

As others have stated, you can't make font size completely independent of screen resolution. What you can do is use media queries to target different screen sizes and resize your font 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%; }
}

Those are just example values – you'll have to experiment with your app at various sizes and see what looks best. Trent Walton's site is a good example of this – resize your browser window and see what happens to the text size.

If you size all your fonts using em or rem units, you only need to adjust the body font size and the rest of the values will scale proportionately.

Upvotes: 0

rjmunro
rjmunro

Reputation: 28076

You can't do this because you can't be sure what the true size of the users monitor is, unless you have control of the computers being used.

It's possible for a user to have 2 monitors connected at once in and be set so the same elements of the screen appear at different sizes on each one.

Upvotes: 1

Ol Sen
Ol Sen

Reputation: 3368

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

this does every sibling element of html give an relative size, which means

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

as well

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

its also possible to change html font-size with javscript, and all relative sizes should work as expected. with jQuery you could access the body's font-size and set it to some size calculated from screensize. even working would be @media () { your css here } rules for any kind of application in different devices. 

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

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71939

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

Upvotes: 3

NorizonDev
NorizonDev

Reputation: 1

You could use cm and mm:

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

Upvotes: 0

Brad
Brad

Reputation: 163528

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;
}

Upvotes: 4

Dan Pichelman
Dan Pichelman

Reputation: 2332

Old fashioned points should work.

Example:

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

Upvotes: 2

Related Questions