SVG `text` und kleine, skalierbare, zugängliche typografische Designs

Nehmen wir an, Sie haben etwas mit benutzerdefinierten Schriftarten entworfen, das etwas ausgefallen war. Vielleicht ist ein bestimmtes Wort zwischen den Oberlängen eines anderen Wortes darunter positioniert. Etwas Text wurde darunter ausgekert, um die Breite dieses Wortes anzupassen.

Das ist etwas, wovon wir einem Grafikdesigner, der von Print auf Web umsteigt, abraten würden. Es ist zu fummelig. Zu viel empfindliche, unskalierbare absolute Positionierung. Zu viel Risiko durch unterschiedliches Schriftarten-Rendering-Verhalten.

Aber mit Inline-SVG können wir das tun und zwar gut.

SVG <text>

Der große „Trick“ hierbei ist, dass SVG ein <text>-Element hat, das genau das ist: Text. Keine Umrisse von Text, nur normaler, auswählbarer, zugänglicher Webtext.

<svg xmlns="http://www.w3.org/2000/svg"
     width="800px" height="300px" viewBox="0 0 800 300">

  <text x="25" y="55" 
        font-family="'Lucida Grande', sans-serif" 
        font-size="32">

    Regular ol' text here. Hi.

  </text>

</svg>

Sehen Sie.

<text> verwendet gerne benutzerdefinierte Schriftarten

Verwenden Sie @font-face und benutzerdefinierte Schriftarten auf Ihrer Website? Kein Problem. Dieses SVG verwendet sie gerne. Dies funktioniert mit Inline-SVG, wo Sie font-family mit CSS festlegen können

<text class="hook">Some Cool Text Yeah.</text>

.hook {
  font-family: "proxima-nova", sans-serif;
}

aber es funktioniert sogar für SVG-als-<img> (oder background-image, vermutlich) ebenfalls, solange font-family auf die benutzerdefinierte Schriftart mit dem richtigen Namen verweist.

<text x="25" y="55" 
        font-family="'proxima-nova', sans-serif" 
        font-size="32">

Design-Software verwenden

Ich habe nicht viele verschiedene Software getestet, aber Adobe Illustrator kann „Als SVG speichern“. Wenn Sie mit Textelementen entwerfen, erhalten Sie <text> in der .svg-Datei.

Möglicherweise müssen Sie ein wenig von Hand nachbessern, um die Schriftartattribute/-stile zu entfernen oder anzupassen.

Das Schöne daran ist, dass es die fummelige Aufgabe der Positionierung mit CSS entfällt und Sie dies direkt in einer Software erledigen können, die darin hervorragend ist. Dann erfolgt die eigentliche Positionierung mit dieser Matrix-Transformation.

Skaliert perfekt

Wenn Sie versucht hätten, ein solches Design nur in HTML/CSS zu replizieren, wäre nicht nur die Positionierung fummelig, sondern es würde auch nicht skalieren. Etwas wie font-size: 41px; top: 37px; left: 81px; funktioniert nur bei einer Größe. Vielleicht könnten Sie etwas mit vw-Einheiten und Prozenten und so weiter machen, aber in SVG ist es einfach viel einfacher.

In SVG bezieht sich die festgelegte Schriftgröße auf die Größe des SVG selbst und nicht auf das gesamte Dokument. Wenn Sie also die Größe des SVG anpassen (es kann leicht eine flexible Breite haben), bleibt Ihr typografisches Design perfekt erhalten.

Eine flexible Breite, die Art von Setup

<div class="ad-wrapper">
  <svg class="ad">
    <text ... />
    <text ... />
    <text ... />
  </svg>
</div>

/*div*/.ad-wrapper {
  height: 0;
  padding-top: 100%;
  position: relative;
}
/*svg*/.ad {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Mit Schriftarten gestalten, die Sie im Web haben

Dieser Workflow funktioniert am besten, wenn Sie in lokaler Software mit den Schriftarten herumspielen können, die Sie auch über @font-face verfügbar haben. Wenn Sie beispielsweise mit Open Sans arbeiten würden, könnten Sie eine Kopie davon von Font Squirrel für die Desktop-Nutzung herunterladen und diese dann im Web über Google Fonts verwenden.

Ich denke, Typekit macht diesen Workflow ziemlich gut, mit seiner Desktop-Synchronisierungsfunktion. Wenn Sie Schriftarten auswählen, können Sie diese einem Kit hinzufügen, um sie im Web zu verwenden, und sie auch lokal über das Creative Cloud Ding synchronisieren.

Dann sind sie direkt in Illustrator verfügbar.

Es ist etwas seltsam, da die font-family-Namen etwas abweichen werden. Zum Beispiel könnten Sie etwas wie

<text font-family="'MarketOT'">Example</text>

aus Illustrator erhalten, aber im Web muss es so sein

<text font-family="ff-market-web, cursive">Example</text>

Aber das ist nun mal Teil der Arbeit. Vielleicht gibt es dafür einen guten Grund. Vielleicht können sie diese Dinge eines Tages synchronisieren.

Wann man es verwenden soll

Wenn Sie dieselben benutzerdefinierten Schriftarten auch anderswo auf der Website verwenden, ist es ein No-Brainer, verwenden Sie <text>-basierte Designs nach Bedarf. Wenn die verwendeten Schriftarten anderswo nicht verwendet werden, könnte es eine große Aufgabe sein, eine ganze benutzerdefinierte Schriftart nur für eine einzige Grafik einzubinden. Oder vielleicht auch nicht. Sie müssen die Optionen selbst abwägen.

Im hier gezeigten Beispiel habe ich Proxima Nova und FF Market von Typekit verwendet, und das Kit war etwa 115 KB groß. Nicht schlecht, wenn der Rest der Website diese Schriftarten auch verwenden würde. Dann habe ich das Beispiel in Outlines umgewandelt (was bedeutet, dass <text> wegfällt und <path>s zur Darstellung der Buchstabenformen verwendet werden), und die Datei schwoll von unglaublichen 4 KB auf unglaubliche 260 KB an (größer als die gesamten Schriftarten, wenn auch entpackt).

Ich bin sicher, in einigen Fällen macht das Umwandeln in Outlines Sinn, und manchmal funktioniert sogar eine Retina-Rastergrafik, vorausgesetzt, Sie ergreifen alle notwendigen Schritte für die Barrierefreiheit (mindestens ein gutes alt-Tag).

Demo

Hier ist eine Demo, die alles in Aktion zeigt, einschließlich der Skalierung, der Auswählbarkeit und der benutzerdefinierten Schriftarten

Siehe den Pen SVG mit Beispiel von Chris Coyier (@chriscoyier) auf CodePen.