Learn More
Resend Email
15
kiki
5y

CSS quick maffs:

Using viewport units to define font size but sometimes it's too small?

Instead of font-size: 10vw;

use font-size: calc(10vw + 20px);

This will make sure that font size is AT LEAST 20 px no matter the viewport width. Treat the resulting font size like a function of viewport width and feel free to experiment with it. With calc in that case you can achieve the best typeface responsiveness possible.

random

css
Favorite
Ranter
Comments
  • 1
    5y
    this solved a problem, thanks
  • 0
    5y
    Why would you use vw to define fontsizes?
  • 3
    5y
    @nitwhiz to make large responsive headlines that wouldn’t make a column of one letter per row on smaller screens
  • 1
    5y
    I might actually try that out later. My personal website has a quite big font on a desktop and still a really really tiny font on a phone. I used em and viewport might be an option.
  • 5
    5y
    You can also define both max and min font size using clamp.

    clamp(20px, 2.5vw, 30px);

    or if you need to support old browsers:
    font-size: min(max(20px, 2.5vw), 30px);
  • 0
    5y
    @theuser I know but calc is more reliable
  • 2
    5y
    @theuser clamp is amazing but here’s min and max
  • 1
    5y
    @theuser and then there is calc
  • 0
    5y
    @uyouthe True about support. Our solution was to simply provide fallback static values, but your method gives us a minimum, so I will steal that.

    The Samsung browser is sadly still kinda relevant enough (IE support dropped althogether). Still, good to see that safari is supporting clamp cause I believe that kinda just recently happened.
  • 0
    5y
    @theuser yes. I have postcss autofallbacks iirc
  • 1
    5y
    So the text would be unreadably large on ultra wide screens? Using the clamp function seems much better for that case
  • 0
    5y
    @deliwa just get your values right lmao and also good luck using clamp in 2020
  • 1
    5y
    @uyouthe Punish users of IE. Drop support. We can take back control of the browser wars....
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment