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 bietet das <tspan>-Tag. Während es sich in vielerlei Hinsicht wie ein normales <span> in HTML verhält, akzeptiert es Attribute, die mächtige Funktionen zur Textgestaltung ermöglichen.

Eines dieser Attribute ist textLength. Wenn wir es auf 100 setzen, wird der Text, der in <tspan> eingeschlossen ist, auf die volle Länge des SVG-Containers gezwungen.

Siehe den Pen SVG Text Lockup – Schritt 1 von Geoff Graham (@geoffgraham) auf CodePen.

Ein weiteres dieser Attribute ist lengthAdjust. Dies gilt nur, wenn <tspan> (oder <text>) eine festgelegte textLength hat und steuert, wie der Text erweitert oder komprimiert wird, um in diesen Raum zu passen. Der Standardwert ist spacing, der die Buchstabenformen beibehält, aber die Abstände zwischen den Zeichen anpasst. Wir können stattdessen spacingAndGlyphs verwenden, was die Form der Zeichen dehnt oder komprimiert, wenn der natürliche Abstand ungeschickt ist.

Siehe den Pen SVG Text Lockup – Schritt 2 von Geoff Graham (@geoffgraham) auf CodePen.

Wie <text> akzeptiert das <tspan>-Tag auch ein font-size-Attribut, das genau das tut, was Sie erwarten würden: die Textgröße ändern. Wir können dies verwenden, um Anpassungen am Text vorzunehmen, wenn eine Erhöhung von textLength zu viel oder zu wenig Platz lässt und lengthAdjust die Zeichen aus dem Takt bringt.

Kombiniert ergeben diese drei Attribute uns die Möglichkeit, Text-Lockups zu erstellen. Hier ist das Ergebnis des obigen Snippets mit zusätzlichem CSS für zusätzliche Formatierung.

Siehe den Pen SVG Text Lockup von Geoff Graham (@geoffgraham) auf CodePen.

Andere Lockups

Wir haben schon früher über Typografie-Lockups geschrieben

Ein Typografie-Lockup ist ein typografisches Design, bei dem Wörter und Zeichen sehr spezifisch gestaltet und angeordnet werden. Als ob das Design buchstäblich an Ort und Stelle gesperrt wäre.

SVG ist perfekt für solche Dinge, aufgrund seiner Art der Größenänderung. Text innerhalb von SVG fließt nicht um wie Text in HTML, er skaliert auf die einzigartige Weise von SVG, oft im perfekten Seitenverhältnis, für das er entworfen wurde (obwohl man das steuern kann).

Wenn Sie also etwas wie dieses in einer Vektorbearbeitungssoftware wie Adobe Illustrator entwerfen

Können Sie es im Web anzeigen (auch mit benutzerdefinierten Schriftarten), so dass der Lockup erhalten bleibt und skalierbar ist.

Siehe den Pen Beispiel für einen Text Lockup von Chris Coyier (@chriscoyier) auf CodePen.

Mehr lesen.