SVG offers the
One of those attributes is textLength. If we set this to 100, then the text wrapped in
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
See the Pen SVG Text Lockup – Step 2 by Geoff Graham (@geoffgraham) on CodePen.
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.
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.