type lock-up illustration

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

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.

See the Pen Type Lock-Up by Paul Kinchla (@pkinchla) on CodePen.

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

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.

5 thoughts on “Relative Type

  1. nyc-dylan says:

    Thank you very much for the codepen, I will be putting this into effect for my current project.

    1. Paul Kinchla says:

      I am glad I could be of some help. Feel free to add a link to the project. I would love to see how others use this technique.

  2. Thomas Sebby says:

    I’m also curious to see what other people would use this for in their projects. I have like 3 half thought out things that I can see this working for, but no time to actually test them out…woe is me.

  3. Julius Rainey says:

    I am getting more advanced with CSS and have been reading new info (maybe old to others), what is the best strategy you have taken to obtaining the best responsive environment for font size, etc. Hope I am making sense.

    1. Paul Kinchla says:

      I personally use ems for type sizing most of the time. Sometimes with headings I will use viewport units for headings on smaller devices. It is becoming more and more common to mix viewport units with ems when setting a a base font size though. This article is a really great overview on responsive typography. https://www.smashingmagazine.com/2016/05/fluid-typography/

Comments are closed.