fluidly-responsive-typography.md

There are scalable units, like vw and vh etc that are 1% of the browser's viewport, vw is like innerWidth / 100. So something like:

h1 {
  font-size: 10vw;
}

This means 10vw is going to be 50px when the browser is 500px wide, and 100px when the browser is 1000px wide for example. Using scalable units by themselves can sometimes lead to things being too-big or too-small, so some people use them with @media queries to 'switch them off' to some other unit at a certain size.

h1 {
  font-size: 50px;
}
@media (min-width: 500px {
  font-size: 10vw;
}
@media (min-width: 1000px) {
  font-size: 100px;
}

But CSS just got min(), max(), and clamp() functions which make things even easier, so what I've been doing a lot lately is like this:

/* scalable units alone */
h1 {
  font-size: 10vw; /* 10% of the viewport width */
}

/* With a minimum smallest size: tries to be 10vw but will never go smaller than 50px */
h1 {
  font-size: max(50px, 10vw);
}

/* With a maximum largest size: tris to be 10vw but will never go larger than 100px */
h1 {
  font-size: min(10vw, 100px);
}

/* And you can 'clamp' the scalable unit with both a minimum and a maximum at the same time */
h1 {
  font-size: min(max(50px, 10vw), 100px);
}

/* This is the same as clamp() */
h1 {
  font-size: clamp(50px, 10vw, 100px);
}