Text Lock-Up

0
0
<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.

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.

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




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:

<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>


body {
  background: #037c97;
  font-family: 'Bowlby One', cursive;
  font-weight: bold;
  padding-top: 3em;
  text-transform: uppercase;
  text-shadow: 4px 4px 4px #0b3741;
}

svg {
  display: block;
  margin: auto;
  width: 50%;
}

text {
  fill: #fff;
}




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:

<svg viewBox="0 0 547 400">
<text transform="matrix(1 0 0 1 256.00085 72.51587)" font-family="Roboto" font-size="47.84964px">the</text>
<text transform="matrix(1 0 0 1 -11.18226 89.16216)" font-family="Roboto" font-size="125px">Meet</text>
<text transform="matrix(1 0 0 1 319.00095 232.53709)" font-family="Roboto" font-size="125px">Kids</text>
<text transform="matrix(0.91387 0.40601 -0.40601 0.91387 56.51732 198.18147)" opacity="0.8" fill="#930093" font-family="Roboto" font-weight="900"  font-size="123px">A</text>
<text transform="matrix(0.97982 -0.1999 0.1999 0.97982 133.19922 186.6187)" opacity="0.8" fill="#006FC0" font-family="Roboto" font-weight="900"  font-size="123px">L</text>
<text transform="matrix(0.96087 0.27699 -0.27699 0.96087 150.48253 138.84831)" opacity="0.8" fill="#8AC800" font-family="Roboto" font-weight="900"  font-size="123px">P</text>
<text transform="matrix(0.99695 -0.07807 0.07807 0.99695 197.01961 186.15466)" opacity="0.8" fill="#FF8200" font-family="Roboto" font-weight="900"  font-size="123px">H</text>
<text transform="matrix(0.98367 0.17997 -0.17997 0.98367 260.96762 163.52682)" opacity="0.8" fill="#FF0000" font-family="Roboto" font-weight="900"  font-size="123px">A</text>
<text transform="matrix(0.933 0.35987 -0.35987 0.933 312.51083 121.90215)" opacity="0.8" fill="#FFBF00" font-family="Roboto" font-weight="900"  font-size="123px">B</text>
<text transform="matrix(0.99863 -0.05234 0.05234 0.99863 393.47006 130.05931)" opacity="0.8" fill="#0000A9" font-family="Roboto" font-weight="900"  font-size="123px">E</text>
<text transform="matrix(0.98367 0.17997 -0.17997 0.98367 432.30099 100.86032)" opacity="0.8" fill="#006FC0" font-family="Roboto" font-weight="900"  font-size="123px">T</text>
<text class="from" x="150" y="227" opacity="0.25" font-family="Roboto" font-size="47.84964px">from</text>
<text class="anaheim" x="69" y="300" opacity="0.25" font-family="Roboto" font-size="82.41277px">ANAHEIM</text>
</svg>


@import url(https://fonts.googleapis.com/css?family=Roboto:900,100);

body {
  padding: 2rem;
}

@media (max-width: 500px) {
  .from {
    transform: translate(-190px, 0px) scale(1.25);
  }
  .anaheim {
    transform: translate(-90px, -10px) scale(1.3);
  }
}


  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.