Simplified Fluid Typography

Fluid typography refers to the idea that font size (and possibly other font properties such as line height) varies according to the screen size (or container query if we have one).

Its core skill lies in the viewport unit. You can set the font directly using viewport units (e.g. font-size: 4vw ), but the size fluctuations are very severe and are usually not desirable. This can be alleviated by using a method like font-size: calc(16px 1vw) . However, now that we have started using complex calculations, the most common implementation method ends up becoming an equation expressed in ordinary English:

I want the font size to be 16 pixels on a 320 pixel screen and 22 pixels on a 1000 pixel screen.

The final result is as follows:

 html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

This is actually setting the minimum and maximum values ​​of the font to prevent the font from shrinking or increasing to an excessively large extent. "CSS Lock" is a term coined by Tim Brown.

You said it is the minimum and maximum value ? ! It happens that min() and max() functions have entered the CSS specification in these forms.

So we can simplify the above complex setup and keep it locked using a single line of code:

 html {
  font-size: min(max(1rem, 4vw), 22px);
}

We might actually want to stop there because although Safari (11.1) and Chrome (79) both support this feature, this is the maximum support range that can be achieved at present. Speaking of this, you may need to add a font-size declaration before this to set a reasonable fallback value without complex functions.

But, as long as we are still challenging the limits, there is another function that can simplify things further: clamp() ! clamp() accepts three values: the minimum, maximum, and a flexible unit (or calculation or anything else) between, and if the value is between the minimum and maximum, it will use the intermediate value. Therefore, our single line of code becomes smaller:

 body {
  font-size: clamp(100%, 1rem 2vw, 24px);
}

This will work for Chrome 79 (not released to the stable version, but will be released soon).

Uncle Dave is very happy that FitText is now only a few bytes in size, rather than the entire jQuery plus more than 40 lines of code. This is the case where Dave adds CSS custom properties to it:

I just saw this good explanation:

Morning Developer News: CSS clamp is available for fluid typography. ?

? clamp on MDN: https://www.php.cn/link/4ac20f72e05b86b3dc759608b60f5d67

Video Alternative Text: Examples show how clamp can be used for fluid/responsive typography of h1 elements pic.twitter.com/9iiCxxXJO7

— Stefan Judis (@stefanjudis) April 20, 2020

The above is the detailed content of Simplified Fluid Typography. For more information, please follow other related articles on the PHP Chinese website!