Responsive Type and More With Only CSS

Send me pics of your favorite spaceship design on linkedin or dribble.

What Problem is This Solving?

I was recently working on a project for a client that required headlines to scale in response to the user’s screen size for stylistic purposes. I knew that my usual method of setting units in rem wouldn’t work as it is relative to the font-size of the root element html and not the user’s screen size.

After searching the internet I found the solution I was looking for in the form of something called Viewport-Percentage Lengths.

Almost all the top search results for responsive typeography discussed using some form of javascript or setting dozens of breakpoints, which would just bloat my CSS and isn’t very elegant. This seemed like a problem that should have been solved already so I kept searching.

I eventually came to an MDN article discussing data type which delved into relative sizes (rem and em), and further down the page I noticed something called Viewport-percentage lengths. This is exactly what I was looking for, I just didn’t know what it was called!

How it Works

It is actually very simple. One unit is equal to 1% of either the viewport’s width vw or height vh. You can also set a min and max with vmin and vmax.

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

If the viewport is 100mm wide then 5vw == 5mm.
In the case of font-size: 5vw; a single letter takes this size, so in this example the em box is 5% of the screen width wide (5mm wide)

vmin and vmax are set like this:

section {
 width: 100vmin; // Container width
 background-color: #ff5442; // Dapper red
}

In the above example the section container fills up 100% of the screen width only if the screen is in a portrait view (taller than it is wide).

Demos

Here is an example of the font size scaling with the screen size with no breakpoints set. (I apologize but medium doesn’t seem to allow me to embed the demos)

Here is a fun example I made showing a document page with a parisian-blue background that has a section container fill 90vm (90%) of the viewport’s width and height with a simple orientation media query.

Not Just for Font Size

These units can be used for anything, not just font sizes. Instead of setting a container’s width: 90%; you could set it to width: 90vw; like the above example.

Usage Across the Web

This is supported by most of the major browsers but not all of them. Internet Explorer doesn’t support vmax and it has some issues on mobile. If you are successfully using this method in any of your projects let me know your thoughts.

Follow me or talk to me linkedin or dribble. This article originally appeared on Dapper Gentlemen.