Responsive text techniques

Question

What's the best method for creative responsive text other than using media queries, I find that using media queries takes up too much time and I'm guessing there will be an alternative which will automatically resize it's self.

h1 {
font-size: 22px;
}

<h1>Test</h1>

You can use vh and vw units - resizes text based on the size of the width or height of the viewport — Pete, Feb 16 '18 at 12:42
I found that when using that method it's not the best for mobiles as the text becomes unreadable when the screen is that small. — , Feb 16 '18 at 12:46
Yeah I found that too so I set a rem for mobile and then if I need to resize based on viewport I add vw for tablet and above, you never get 100% reposive how you want it, unless you put in the time and do all the media queries — Pete, Feb 16 '18 at 12:47

score 0 · Accepted Answer · answered Feb 16 '18 at 12:46

You can use vwand vh units - resizes text based on the size of the width or height of the viewport

Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport.

h1 {
font-size: 22vw;
}

<h1>Test</h1>

More information

Responsive text techniques

1 Answers1