Skip to content

Instantly share code, notes, and snippets.

@alexmustin
Last active Nov 10, 2021
Embed
What would you like to do?
Responsive / Fluid Typography -- CSS clamp() example
/*
* This will keep the element's font size between 24px and 42px.
* The middle value automatically calculates the font size between
* the Min and Max, using the browser window viewport width.
*/
.archive-title {
font-size: clamp(24px, calc(3vw + 1rem), 42px);
}
/*
* Example use: main typography
*/
body {
font-size: clamp( 14px, calc(.45vw + 1rem), 18px );
}
h1 {
font-size: clamp( 36px, calc(2vw + 1rem), 64px );
}
h2 {
font-size: clamp( 24px, calc(1.66vw + 1rem), 50px );
}
h3 {
font-size: clamp( 20px, calc(0.8vw + 1rem), 42px );
}
h4 {
font-size: clamp( 18px, calc(0.8vw + 1rem), 36px );
}
h5 {
font-size: clamp( 17px, calc(0.5vw + 1rem), 24px );
}
h6 {
font-size: clamp( 16px, calc(0.4vw + 1rem), 20px );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment