Relative Type

On a recent project I was working with viewport units and discovered a neat trick that can make working with them a little bit more manageable. By mixing ems and viewport units we can scope elements sized with viewport units and make responsive components that scale nicely and can change with one value.

Creating Scope # Section titled Creating Scope

So the way this works is by setting a root size for whatever element or component you would like to scale based on the viewport. Then—by using ems for all the sizing and spacing on all of the children of that component we have scoped sizing for that element based on the viewport. The following type lockup example illustrates this.

One Value # Section titled One Value

What’s nice about this is that it’s a fully fluid component with some fairly complex positioning but can be changed easily with one value. By changing the font-size of the .lockup element all of its child elements adjust accordingly.

Proof of Concept # Section titled Proof of Concept

I had a lot of fun working on the pen for this but it is probably not the most practical use case for using ems. For type lockups where the positioning of elements doesn’t change I would almost always reach for SVG. That being said there are many other use cases that I have not yet explored I am sure.