Responsive Fonts

Create Global Responsive Text with CSS

Courtesy of Steve Lawrence

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