0 - Make Typography Responsive

So… it says that instead of em or px to size text, I should use the viewport units.

I searched in StackOverflow about what unit I should use, and many recommended rem instead of viewport units and that I should use viewport units only in media queries.

In the end, what do you recommend for text size?

Link to the challenge:

First, to pass the test follow the instructions and use viewport units.

If you’re asking in general if this is a good idea for an accessible web page then good job researching. It would have been good if you provided a link to the SO article that you’re quoting.

I found this MDN article which has a couple of good notes on why it’s better to use em and rem units.

I’m quoting another user of the forum here with the following;
Never use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases.
If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size.
If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

2 Likes