Skip to content

Instantly share code, notes, and snippets.

@vitkon
Created Sep 28, 2018
Embed
What would you like to do?
fluid typography
/* Fluid typography with 16-24px font size range based on the width of the viewport */
/* reference - https://css-tricks.com/snippets/css/fluid-typography/ */
:root {
--min-content-width: 320;
--max-content-width: 1600;
--min-font-size: 16;
--max-font-size: 24;
}
body {
font-size: 1rem;
@media screen and (min-width: 20em) {
font-size: calc(
var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) *
(100vw - var(--min-content-width) * 1px) /
(var(--max-content-width) - var(--min-content-width))
);
}
@media screen and (min-width: 70em) {
font-size: 1.375rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment