/

Fluid typography

css
css
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;
}
}

Calculate your own: websemantics.uk/tools...lator/

Or use this if you only need to support Safari (11.1+) and Chrome (79+)

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

Or even this if you only support Chrome (79+)

css
body {
font-size: clamp(16px, 4vw, 22px);
}

Source: css-tricks.com/simpli...raphy/

Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.