Responsive Fonts
Create Global Responsive Text with CSS
sdlawrence.com
This is a test of the Ditty News Ticker.
Header Settings
Global H1 .H1 with Clamp
Global H2 .H2 with Clamp
Global H3 .H3 with Clamp
Global H4 .H4 with Clamp
Global H5 .H5 with Clamp
Global H6 .H6 with Clamp
CSS
h1, .h1 {font-size: clamp(1em, 1em + 2vw, 3em) !important;}
h2, .h2 {font-size: clamp(1em, 1em + 1.5vw, 2.5em) !important;}
h3, .h3 {font-size: clamp(1em, 1em + 1.25vw, 2em) !important;}
h4, .h4 {font-size: clamp(1em, 1em + 1vw, 1.5em) !important;}
h5, .h5 {font-size: clamp(1em, 1em + .65vw, 1.25em) !important;}
h6, .h6 {font-size: clamp(1em, 1em + .25vw, 1.1em) !important;}
Min, Preferred, Max
Fluid H1 Headline with Clamp
Fluid H2 Headline with Clamp
CSS
h1.fluid {font-size: clamp(1em, 1em + 2vw, 3em);}
h2.fluid {font-size: clamp(1em, 1em + 1.25vw, 3em);}
Min, Preferred, Max
1. Note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.
2. See CSS-Tricks and MDN for documentation.
Example usage: Demo
Share this Post