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

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