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

Answer 1

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.

Answer 2

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

Answer 3

The best solution is Viewport Sized Typography

There are many reasons. Here are two:

1. 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.
2. 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;
}

Answer 4

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.

Answer 5

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.