VW units for font sizes are basically useless if you have a page that has a wrapper (e.g. max-width:1000px;) and you want to use vw units. You will never be able to fully get perfect sizes everywehre due to it basing it off the viewport width/height. Some screens will have the perfect size, otehrs will get a really small size, big screens will be out of control!
I wish we had something that based its measurement off of a wrapper width. Not sure how that would work in implementation though (to get the right parent.) Thoughts?
I’m interested in how this conversation goes (or doesn’t go?) but I don’t have any immediate thoughts, was hoping to pick up conversation as other people did.
To be honest, I don’t have anything to comment since I don’t do web development anymore (at least, for the last two years and just tiny, easy stuff). I guess I’m back at newbie level. Which sucks. I simply don’t have time to play so I never tried VM units.
If the wrapper was in percentages then the vw unit could match (i.e. width:70%; font-size:70vw).
I must admit I don’t like the idea of vw units for font-size much as scaling the font-size with the window (or wrapper) means that on mobile you end up with text too small when you want it to get larger and on large screens you get very large text which is not what you usually want either.
Readable text and readable line-length is more important and we can do that with media queries and normal font-sizing anyway.
The way it currently is, you can have small/medium-ish screens be perfect but when you get into those big monitors, you’re forced to media query out a new font size.
I’m trying to do designs that are responsive without media queries. CSS is almost to that point. Flexbox automatically makes it responsive - fluid width + adjusting font sizes for readability makes it almost there.
Not sure I follow this example Paul. VW bases off the viewport width. Not a wrapper width.
.