How can I change text size according to browser width?
Instead of using px or rems for your font-size, you'll want to use vw, or viewport width. CSS-Tricks has a simple, straightforward explanation here: https://css-tricks.com/viewport-sized-typography/
1 Like
Thanks for the great answer Greyscale. This works great except for the extreme limits. When I get to phone size the text is way too tiny and if I scale up to a very large desktop screen the font is way too big. This would be perfect if you could set an upper and lower limit.
I don’t know that I’ve ever used vw for fonts, so I can’t speak from personal experience. But perhaps a media query or two would help?
I think the media query will work better. People seem to love the vw unit because it is a smooth transition instead of the jumping media query produces. Maybe a combo of the two would be best. Change the vw amount based on a media query?
Since the addition of Sass is a option, why not utilize it ? Here is another example link....
https://css-tricks.com/snippets/css/fluid-typography/
see http://spring-glade-1124.bss.design/ fluid typography with a minimum size is achieved via
font-size:calc(0.6em + 1.9vw)