Skip to main content
Home / Articles /

Creating a Web Type Lockup


First, here's some examples of type lockups

So we're on the same page here, let's look at some example designs.

Image from here.
Image from here.
Image from here.
Image from here.
Image from here.

You get the idea, right? The type in these designs can't just move around or the design will be broken.

You can find examples all over the place.

Some good places to browse are perhaps:


And I learned that a "type lockup" comes from "locking up type", as in actual wooden or metal blocks of type arranged together with other blocks of wood and metal to make a design that you can literally clamp together, ink up, and press to paper.

Seems like transferring the name "lockup" to modern design is fairly new:



A typical header on the web isn't a lockup

Like this:

But we design that way a lot. We do it because it works so well on the responsive web. We can design the type and our site such that it looks pretty good no matter what text ends up there, how long it is, where it wraps, etc. It doesn't have to be quite that simple, but if type is designed to accommodate wrapping and tolerates fairly major differences in rendering, it's not really a lockup.

Standard header markup:

  Nothin' fancy here.

This is easy and comfortable to work with from a designer/developer perspective. It's bread and butter HTML and CSS. Type set like that is accessible, SEO friendly, selectable, on-page searchable, copy-and-pastable, and all that good stuff.

Let's build a web type lockup. First, we'll use a web font.


Download it for local use

Let's use Google Fonts because it's fast, free, and easy. Roboto is nice.

Let's pick just a couple of weights of it for our design. The same rules apply here as they do for web fonts anywhere: don't go crazy. Ultimately we'll load these fonts as resources on the site itself so performance is a concern.

Once you've added it to a collection (there is an "add to collection" button) you can click the arrow to open up the area to download it locally.

Activate the font locally



So get creative!

Remember that you can do whatever you want here. You're free from most of the normal confines of web type. Wanna set a word really small between the ascenders of two much larger letters? That would be pretty dangerous if you were trying to pull it off with absolute positioning in a flexible way, but that's fair game here.

Here's my cheezy design:

Keep all the text as *text*

Illustrator is capable of turning text into vector outlines. Don't do that. Leave the text as editable text.

Save as SVG

SVG is the magic ingredient here.


Again, keep the text in SVG, don't convert it to outlines.

If you open this in a web browser, it will appear as if it works...

But remember to *deactivate* your local fonts for testing


When we use this on the web, we'll need to load the fonts up and correct the font-family

I'm going to use the typical Google Fonts import:

@import url(,100);

Which expects this:

font-family: 'Roboto', sans-serif;

But if we look at the SVG we output from Illustrator, we're getting:



"'Roboto-Black'" → "Roboto" font-weight="900"
"'Roboto-Thin'" → "Roboto" font-weight="100"

Which ended up with correctly working text elements, like:



A darn fine text lockup:


We've gone down this road before.



This doesn't rule out RWD stuff

Just because a lockup is scaleable doesn't mean that elements inside it can't shift around if that made sense at certain points. Joe Harrison's responsive logos (a sort of typographic lockup) are an example of how useful hide/show could be:


@media (max-width: 800px) {
  text.letter-1 {
     /* do whatever */


I throw around that this is "accessible" a lot, but of course I'm no expert there. Accessibility means a lot of things.

The fact that I can search for "kids" on a page with this can the browser will find it is certainly a form of accessibility. But I can't search for "alphabet" because each of the letters are a different <text> element rather than <tspan>s. I might be able to fix that by hand, but it would likely be pretty tough. Illustrator doesn't really help with that.

And source order I would imagine is pretty important too, as it's the order in which things are read (if we're talking screen reader accessibility) and indexed. I should have taken more care to get that right. Fortunately Illustrator can help with that, as the layer order is the output order.

Here's some more examples

Recreation of a magazine article header I saw:


Brenna O'Briens example from a talk (note the <tspan>s)

See the Pen SVG Typographic Lock-up by Brenna O'Brien (@brenna) on CodePen.

Yet another possibility

This is all very related to "scaled proportional content" which we just covered here on CSS-Tricks. Going down that road is a possibility as well (fixed height/widths, scale()'d).

Another possibility is setting type with viewport units, which scale with the browser window and thus could probably be used to lay out type in a way that scales without breaking. Maybe. There isn't any software to help you with this and it'll likely be full of a lot of magic numbers, but have the advantage that you get to use semantic HTML elements.


