Responsive font size in CSS

Question

I\'ve created a site using the Zurb Foundation 3 grid. Each page has a large h1:

Answer 1

I had just come up with an idea with which you only have to define the font size once per element, but it is still influenced by media queries.

First, I set the variable "--text-scale-unit" to "1vh" or "1vw", depending on the viewport using the media queries.

Then I use the variable using calc() and my multiplicator number for font-size:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

  Responsive


  text


  with one


  font-size tag.

In my example I only used the orientation of the viewport, but the principle should be possible with any media queries.