I just learned to use one of those to make the text behave properly, but since there are the two options I’m wondering if they’re completely interchangeable or if you’d have to combine the two or use on over the other depending on your desired outcome.
Be very careful with this. You do not want the text size to rely solely on view port units. In other words, do not do something like:
font-size: 3vw;
This is not accessible because it prevents the user from adjusting the font size manually (using text only zoom). One trend I’ve seen a lot lately is to use em for your base font size and then add a small view port unit to it so it slightly scales as the view port grows, something like:
font-size: calc(1em + 1vw);
I’m sure if you search you can find even more accessible suggestions. The main point is that you should not do anything that prevents the user from manually changing the font size without having to change the height/width of their browser.
By the way, if you don’t know how to do text only zoom, using Firefox, go to the Edit->Preferences menu, scroll down to Zoom, and activate ‘Zoom text only’. Then while holding down the Ctrl key, scroll your middle mouse button to increase the text size.
Personally, I’m not a huge fan of making the font size somewhat dependent upon the view port size. I’m not saying there aren’t some justifiable use cases, but in general I think the user should always have control over the font size they need to read a page and it shouldn’t matter what size view port they are using to read it. Besides, if you build your page properly with both responsiveness to changes in view port width and font size increase then it shouldn’t really matter what font size the user is viewing your page with and you shouldn’t really care either.
Sorry, forgot to answer your question, they are not interchangeable, one is based on the height of the view port and one is based on the width. I think that vw is much more common because we are used to vertical scrolling so the height of the view port isn’t really that big of a deal. But we try to avoid horizontal scrolling at all cost so making your font size sensitive to view port width would be much more useful.
3 Likes
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.