Change font size based on screen size?

Phoenix Forum Questions / Help
1

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

2

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:

https://thedesigncreative.co.uk/why-you-shouldnt-use-vw-vh-or-px-for-font-sizing-a-comprehensive-guide/

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

1 Like
3

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.

4 Likes
4

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
5

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

2 Likes
6

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.