Just had a great workshop today about Responsive Design given by Frances de Waal. She teached and told us aspecialy about the basics, which is pretty refreshing after you’re used in using framworks for most of the time. During the workshop there’s a part about responsive typography and using the vw unit for heading sizing. We were wondering if we could use this in a way to not have to use any media-query.

Main pitfall using the vw unit is the fact that the fonts will get really small when the width of the viewport decreases. The example below shows you what happens when using only the vw for your headings.

See the Pen Heading with VW by Navelpluisje (@navelpluisje) on CodePen.

When scaling the screen down you see the font getting really small in the end. After fiddling around with some of the units we have nowadays I ended up using the next pen:

See the Pen Heading with vw and vmax by Navelpluisje (@navelpluisje) on CodePen.

Because of the use of the vmax we decrease the amount of scaling. This happens because not the full font-size scales while changin the viewports width. Another side effect of this combination is that even if the viewport gets really small we still depend partly on the vmax unit. This will prevent the font from getting unreadable.

I hope I gave you some hands in using scalable heading without media queries