Yeah, it’s probably better to go that way if you can. I was playing with vw units for font sizes recently, but although they are rather cool, they can go badly wrong if you’re not careful.
I didn’t fail to notice this when you first brought it up, but I was still trying to wrap my mind around a couple of things.
I didn’t take your suggestion to freeze the side bar at a certain point because it would then take valuable real estate I need for my content. Instead I reduced the font size a mere 15% at the critical point, and I think it helped.
They require a lot of testing, on a wide variety of screens. Tall, wide, and combinations of them. They are extremely hard to test for in every situation, but you need to try.
I tried them recently, and wished we had font sizes based off parent width (e.g. max-width container), instead of font sizes off viewport.
1 Like
Good idea.
One trick you can use to get over the lack of support for things like vw is to state a size with other units first, then follow that with a vw value. Browsers that support vw will use it, those that don’t ignore it and use the size you set before.
I have only ever used vw for headers in this way, it just means browsers that can, display an optimised font size to fit the screen, the others get by at the increments of media queries.
I don’t see the sense in shrinking body text, it will just get people reaching for their reading glasses or zooming in.
Soon we will have @support which does CSS feature detection for us 
. Only MS support is in Edge though.
Soon…soon…
1 Like
That’s a good suggestion. Thank you and thank you to everyone else. You’ve all helped me along.
I have other questions, but I’m straying from the topic, so I’ll start a new thread so others can find the help if it’s there for them.
True, that would be way more useful.
If the container is a % width, it can work out, sort of. But layouts are not always that simple. Another thing that % based font-size lacks (correct me if I’m wrong) is a means of putting min and max stops on the size, like you can use max-width on a block. As it is you are forced to add a media query to stop it shrinking too far. Something like min/max-font would be good, if its not already there and I don’t know about it.
Nah, doesn’t exist. Overall, we are pretty limited in terms of fonts.
If we get some more decent font support, flexbox gets a bit more support (to overtake any need for table/table-cell) then I imagine a future where we probably won’t need all that many media queries.
I coded a page recently that if we actually had proper support for such things, I wouldn’t have needed any queries (this does vary based on the design and how you see it scale). You see the potential CSS has, and it just makes you yearn for more. CSS always has exciting things coming in the future . I just hate waiting.
This is exaclty what I just dealt with and exactly how I dealt with it.
I’ve had good luck with VW sizes, but the only main issue is that at small screen size you will still likely need a media query or the fonts will show up as tiny in comparison to the desktop size.
Or there may some other trick, but browser support is reasonable now.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.