Make Typography Responsive - Why Width?

HTML-CSS
1

Tell us what’s happening:
So this was a very simple exercise but what I don’t understand is this exercise’s reasoning for using width and not font-size.

Explanations anyone?

Your code so far


<style>
h2{
    width: 80vw;
}
p{
    width: 75vmin;
}
</style>

<h2>Importantus Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36.

2

They are two different things.

Increasing width of typography tags like h2 and p won’t increase font-size. It will simply stretch their containers.

3

I guess I’ve just never thought to update the container size for responsive typography. I use rems, ems, and percent some times in the context of font-size. Couldn’t find a good usage for viewport units on font-size because it’s too finicky. I probably need more testing on adjusting container sizes but looks like it works so far.

4

remember that when you explicitly change a width value height remains auto and will adjust to retain perspective the same way you create a responsive image by setting the max-width to 100%

5

By setting up maximum width 100%. You can be make responsive your images.

6

1VMIN=1/100th of the minimum value of the height and the width of the viewport.

1VW=1/100th of the viewport’s width.

It could just be plainly for style or design. As another pointed out this will not stretch the font but instead the container itself.

One of the main reasons though to limit how much horizontal space that text has to flow is for readability. It’s easier to read a block of text when the width of each line is not too wide and not too narrow.

There are a great number of articles on this idea. Here’s one

There is more than one way to do this with CSS as well. (Example width: 80ch will make the block 80 text characters wide).