Text Lock-Up

<svg viewBox="0 0 100 100">
  <text>
    <tspan class="line-1" textLength="100" x="0" y="1em" font-size="20">
      The Cat
    </tspan>
    <tspan class="line-2" textLength="100" x="0" dy="0.9em" font-size="20" lengthAdjust="spacingAndGlyphs">
      in the
    </tspan>
    <tspan class="line-3" textLength="100" x="0" dy="0.9em" font-size="35">
      Hat
    </tspan>
  </text>
</svg>

SVG offers the <tspan> tag. While it functions a lot like a normal <span> in HTML, it accepts attributes that unlock powerful text-shaping capabilities.

One of those attributes is textLength. If we set this to 100, then the text wrapped in <tspan> will be forced to the full length of the SVG container.

See the Pen SVG Text Lockup - Step 1 by Geoff Graham (@geoffgraham) on CodePen.

Another one of those attributes is lengthAdjust. This only applies when <tspan> (or <text>) has a set textLength and handles the way the text is expanded or compressed to fit that space. The default value is spacing which preserves the letter shapes but adjusts the gaps between characters. We can use spacingAndGlyphs instead and that will adjust expand of compress the shape of the characters as well for when the natural spacing is awkward.

See the Pen SVG Text Lockup - Step 2 by Geoff Graham (@geoffgraham) on CodePen.

Like <text>, the <tspan> tag also accepts a font-size attribute which does exactly as you might expect: change the size of the text. We can use that to make adjustments to the text where increasing textLength leaves too much or too little space and lengthAdjust warps the characters out of whack.

Combined together, these three attributes give us the ability to create text lock-ups. Here's what we get as a result of the snippet above with some additional CSS for extra styling:

See the Pen SVG Text Lockup by Geoff Graham (@geoffgraham) on CodePen.

Other Lockups

We've written about type lockups before:

A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in place.

SVG is perfect for this kind of thing, because of the way it resizes. Text inside SVG doesn't reflow like type in HTML does, it scales in the unique way SVG does, which is often at the perfect aspect ratio it was designed at (although you can control that).

So if you design something like this in vector editing software like Adobe Illustrator:

You can display it on the web (even using custom fonts) in such a way that the lockup is preserved and scaleable:

See the Pen Example of a Text Lockup by Chris Coyier (@chriscoyier) on CodePen.

Read more.

Comments

  1. User Avatar
    Manoj

    Just want to say thank you ,i may not write comments for every article i read ,but just want you to notice that i like your articles ,this small articles will make a big impact on designers life .please continue teaching

  2. User Avatar
    Olivier

    If we set this to 100, then the text wrapped in will be forced to the full length of the SVG container.

    Hi, I can see what you’re saying, but it is kind of misleading . textlength is not relative to the container, it’s just a regular length. The way you phrase it makes it sound like it’s a percentage of the width of the container.

    • User Avatar
      Geoff Graham

      Sorry the lack of clarity there, but hopefully others understand it the way you just described — I was certainly not implying a percentage there.

  3. User Avatar
    Martin

    You can achieve the same effect with viewport units, here’s a demo: https://codepen.io/Martin_Kz/pen/yXjBKQ

    • User Avatar
      Dev

      Actually your example is better for cross-browser compatibility – open your example in newest chrome, firefox, safari (alphabetical order) vs. for example https://codepen.io/geoffgraham/pen/WOXmzo
      (btw i love svg but those examples are just wrong from cross-browser perspective).

    • User Avatar
      Geoff Graham

      Neat! There are certainly other ways to achieve a text lock-up (as noted at the end of the post), but this is meant to illustrate it as a SVG snippet. :)

  4. User Avatar
    Colin

    You can also use a little JS to calculate the scaled text sizes for you…

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag