Change font size depending on resolution

Question

I'm developing a Web page that uses different sizes for its different paragraphs, h... and so on. I'm using em sizes: font-size: 2em;, as an example. But when I change my screen resolution to a lower one, I want that size to a smaller one.

For that purpose, I tried this code:

<script>
        if ( screen.width > 1600)
        {
            document.write('<style>#centered h1 { font-size: 2em; } </style>');
        }
        else if (screen.width <= 1600 && screen.width >= 1360)
        {
            document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
        }
        else if (screen.width < 1360 && >= 1024)
        {
            document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
        }
        else
        {
            document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
        }
    </script>

First: it doesn't work...
Second: I think there should be cleaner way to do so...

So, the question is: how to use different sizes to my fonts or how to make them adjust for different resolutions?

Can anyone help please? Thanks!

Screen resolutions usually go down with screen size. Reducing the font size just makes things less and less readable. Stick to `1em` for body text. — Quentin, Jun 13 '12 at 10:19
Usually, that problem comes when using `px` instead of `em` or `%` when measuring sizes. Have you tried percentages (for the proper css file, without making a difference between screen sizes)? — AleksanderKseniya, Jun 13 '12 at 10:27

score 38 · Accepted Answer · edited Jun 20 '20 at 09:12

38

Try to use this concept proof CSS:

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

Working demo on jsFiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 13 '12 at 10:21

Vladimir Starkov

19,264
8
60
114

I am just trying to understand. What is wrong with using `vw`? if we use `vw` we don't even need to consider media queries right? – Mr_Green Sep 07 '15 at 09:33
nothing is wrong with vw. except browsers’ support at the time of question and answer – Vladimir Starkov Sep 07 '15 at 12:48

score 4 · Answer 2 · answered Jun 13 '12 at 10:18

4

You want to use media queries rather than JS. Alternatively, use JS to add a class to the body then use that to target what you want.

answered Jun 13 '12 at 10:18

Rich Bradshaw

71,795
44
182
241

score 3 · Answer 3 · answered Sep 28 '15 at 18:03

The best solution is Viewport Sized Typography

There are many reasons. Here are two:

There is a such thing as a comfortable line length for reading text on screens. I don't want to kick a hornet's nest, but let's say its around 80 characters. These units allow you to get it feeling perfect and then have that experience scale to any size screen.
They allow you to tightly couple the size relationship of, say, a typographic header and the content it goes with.

How they work

One unit on any of the three values is 1% of the viewport axis. "Viewport" == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.

For use with font-size, I guess it's one "letter" that takes on that size, but as we know, in non-mono-spaced fonts the width of a letter is rather arbitrary. I find you just need to tweak around with the values to get it how you want it. Which is basically what we do anyway, right?

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

This makes text uncomfortably small on small screens and too large on large ones. I think a better way might be to scale with smaller linear factor than 1. — Dmitri Zaitsev, Apr 15 '16 at 07:07

score 1 · Answer 4 · answered Jun 13 '12 at 10:25

1

You can either use font sizes (em or pt) relative to the screen resolution as lanzz pointed out. Or, you can also use media queries in your css file as per "http://www.w3.org/TR/css3-mediaqueries/#width"

@media screen and (min-width: 400px) and (max-width: 700px) { … }

you can set any min and max width.

answered Jun 13 '12 at 10:25

FatalError

922
12
31

What about if I want to modify a css property that exists? I mean: I have an id that has its properties, but using this method you say, I want to add the font-size. Is it possible? – Sonhja Jun 13 '12 at 11:07
I am not sure I get you correctly, But, if you are talking about changing the font-size for a particular resolution you can do it by @media screen and (min-width: 400px) and (max-width: 700px) { font-size:15pt; } and if you are talking about changing the "min-width" to "font-size", this is not possible. You can only specify "width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, resolution" (couple of more) only. – FatalError Jun 13 '12 at 11:18

score 0 · Answer 5 · answered Jun 13 '12 at 10:18

0

em sizes are relative to the size of the parent element. You probably want to set your font sizes in pt units (1pt = 1/72 inch), which are resolution-independent and designed to look the same apparent size in any resolution.

answered Jun 13 '12 at 10:18

lanzz

42,060
10
89
98

Change font size depending on resolution

5 Answers5

Try to use this concept proof CSS:

Working demo on jsFiddle

Linked