Viewport-relative units (vw, vh, vmin, vmax) are a new set of dynamic CSS units for sizing elements. They’re called “viewport-relative” because they eliminate dependency on parent elements and allow sizing based on the viewport size. This makes them a handy unit for defining font sizes and building fluid layouts.
I like to use the
vw (viewport width) unit on large headlines—I’ll usually fiddle with the font-size value until it looks right. But what if we could define a pixel-based value, then have Sass convert it to a flexible
vw value? In this article, we’ll see how we can create viewport-relative headlines out of pixel units.
When we use the
1vw is equal to 1% of the viewport width. So if an element’s font-size value is set to
1w, it means that if the browser is
1000px wide, the element’s computed font-size value is
To convert a
px value to
vw, we’ll need a pixel-based context equal to 1% of some value—let’s use 1% of 1000 (1000 * .01). Next, we’ll create a Sass function that gets the context value in pixels:
The function also divides the pixel value we pass via
$target by the 1% context, then converts it to
vw. Now we can use the
get-vw function in a font-size value.
The final output is:
If the viewport is
1000px wide, the font size for
.headline will be exactly
72px. When the browser width changes, its computed value will also change and resize relative to the viewport.
Creating a mixin
When using fluid units like
vw, it’s good to set a max font-size so that our text doesn’t get too big on wider screens. We can do this a number of ways, but let’s say we’ve already defined media query breakpoint variables in our project—something like this:
We can create a mixin that uses
get-vw and outputs a media query to set the font size back to pixels once the viewport reaches the widest breakpoint:
Then, include the mixin in place of the
Changing the context
If we want a
vw font-size value that’s relative to the widest breakpoint (1% of, say, $max-breakpoint), we can adjust our SCSS to output those values:
Then, pass the
$max-breakpoint variable in the function:
This may seem like extra work up front, but the end result gives us a viable solution for displaying fluid headlines.
vw unit has strong support in the latest browsers. As a fallback, simply include a regular font-size value first. Browsers that do not support
vw will display the
px value instead:
Check out one of the examples on CodePen:Tweet this article