Change font size based on screen size?

Is it possible to change the font size based on screen size?

Check out the vh, vw, vmin, and vmax CSS properties.

EDIT: Whether or not you should actually use these properties for font size is another topic altogether. You will probably run into unexpected issues:

Amusingly enough, this link thinks it’s OK to hijack my browser’s scroll behaviour. I guess we all make mistakes.

1 Like

Like CSS media queries?

The gist is:

p {
  font-size: 1rem;
@media only screen and (min-width: 600px) {
  p {
    font-size: 2rem;

Be careful when using viewport units—thoroughly test. They can work for headers but are pretty much always a bad idea for body text. Text can end up at the extremes of small and large depending on how the browser is sized.


I didn’t read this correctly and was like, “What’s that all about?” then I actually clicked the link :nauseated_face: The article itself is on point, though

1 Like

I would not recommend using media queries unless you’re stuck back in IE times.
The modern approach for fluid typography is CSS clamp().


That’s fair, though “IE times” is hyperbole. Clamp has had support for a little over 4 years in Chrome so pretty safe to use.