Alltägliche digitale Schnittstellen umfassen eine reiche Vielfalt an Bildern, Visualisierungen und anderen Bildern. Vor allem aber bestehen sie aus Worten. Ach so viele Worte. Da wir Teams mit Systemen ausstatten, um brauchbare, konsistente und schöne Schnittstellen zu entwerfen und zu codieren, ist es wichtig, dass Wörter von einer starken typografischen Grundlage abhängen. Ich gebe zu, ich bin kein Typografie-Experte. Mir fehlt ein Abschluss in Grafikdesign. Ich bin nie die Person, die eine Schriftart, einen Skalierungstyp oder den Buchstabenabstand auswählt. Infolgedessen habe ich mich immer gesträubt, über Typografie zu schreiben.

Typografie beginnt mit der Festlegung einer Grundlage von Schriftfamilien und -stärken zusammen mit Fallbacks. Anschließend wird untersucht, wie eine Hierarchie mithilfe von Größe, Farbe und zusätzlichen Details wie Zeilenhöhe und Reaktionsfähigkeit von Schichten aufgebaut wird. Diese Modelle werden dann auf Komponenten in der Bibliothek eines Systems (wie Artikel und Kopfzeile) sowie auf benutzerdefinierte Komponenten angewendet, die von anderen Teams erstellt wurden.

Schriftarten

Bevor Sie sich in Details vertiefen, müssen Sie sich mit den Grundlagen befassen: Schriftart(en). Durch Exploration, Vergleich, Recherche und oft – für große Unternehmen – das Erstellen einer Schriftart selbst, hängt jede Anzeige von dieser Wahl ab und hängt von ihr ab.

Familien, Gewichtungen und Fallbacks

Während Systeme Schriftarten basierend auf Themen variieren können, erden sich die meisten anfänglich, indem sie primäre Serifen- und/oder Sans-Serifen-Schriftfamilien identifizieren. Jede Schriftart wird durch eine Kaskade von Fallbacks (Hello, Arial und Times) erweitert, und viele Systeme werfen eine Monospace-Schriftart für Codeanzeigen ein (selbst wenn es nur ihre eigene ist).

Einige Systeme kommen mit nur zwei oder drei Gewichten ihrer primären Schriftart aus und versuchen, Vielfalt und Flexibilität mit Governance und Download-Gewicht in Einklang zu bringen.

Takeaway: Es ist nicht immer schwierig, zu einer primären Schriftart zu gelangen, aber die Auswahl der aufzunehmenden Gewichte hat langfristige Konsequenzen. Das Hinzufügen von Schriftarten und Gewichten ist einfach. Die Verwaltung der Downloadgröße und deren Änderung ist schwierig.

Erhalten der Schriftarten, ob per Download, Link oder CDN

Unabhängig davon, ob ein Designsystemprogramm die Schriftarten besitzt oder nicht, erwarten Benutzer eines Designsystems, dass ein System die Anweisungen bereitstellt, die zur Verwendung der Schriftarten erforderlich sind.

Aus Sicht eines Designers dreht sich alles um Downloads. Einige Schriftarten sind streng geschütztes geistiges Eigentum mit sehr absichtlich eingeschränkter Weitergabe. Daher muss eine Typografie-Seite mindestens einen direkten Download oder Anweisungen zum Einholen der Genehmigung zum Erhalt dieser Dokumente bereitstellen. Die meisten Teams stellen eine herunterladbare ZIP-Datei bereit, die alle Dateien enthält, die Sie benötigen, um Schriftarten lokal zu installieren und zu verwenden.

Für Entwickler hängt es vom Ansatz ab und bietet Optionen wie:

• Direkter Download von Schriftarten, um die Schriftarten selbst bereitzustellen
• Anweisungen zum Verknüpfen mit einem Dienst wie Google Fonts
• CDN-Referenzen, auf die alle Produkte gemeinsam verweisen
• Eine Einladung, einen technischen Architekten zu kontaktieren, da eine Lizenz für die Schriftart erforderlich ist. Organisationen benötigen dies, um die wiederkehrenden und oft nicht unerheblichen Kosten für das Hosten und Bereitstellen der Schriftart zu kontrollieren.

Takeaway: Schriftarten werden von verschiedenen Personen auf unterschiedliche Weise benötigt. Systembenutzer erwarten, dass das System erklärt, wie man alles einfach verwendet, auch wenn es nicht die Aufgabe des Systemteams ist, benutzerdefinierte Schriftarten zu erstellen oder Schriftarten selbst bereitzustellen.

Typografie-Skala & Hierarchie

Die meisten Designsysteme zeigen eine Typografieskala in der Dokumentation als vertikalen Stapel. Das ist nicht genug. Ein typografisches System sollte auch Konstrukte wie Fließtext, Überschriften, Farbe, Reaktionsfähigkeit, Farbe und andere feinkörnige Details festlegen.

Textkörper

Systeme nutzen eine Typenskala, um Kerntextgrößen anzubieten – oft einfach als Text oder Körper bezeichnet –, die klein, mittel, groß und, wenn Sie es brauchen, xs, xl und so weiter umfassen. Die meisten Systeme benötigen ungefähr drei (daher mein Trost bei der Verwendung von T-Shirt-Größen). Beginnen Sie mit ein paar und erweitern Sie sie nach Bedarf als Komponentendesigns – und Seitenkompositionen in freier Wildbahn.

Textkörper können auch einen deutlichen „Lead“-Absatz (alternativ „Lede“) bieten, um eine Seite zu öffnen, wie etwa in einem Artikel (dazu später mehr). So kann eine einfache S/M/L-Skala auch zu anderen Varianten führen. Dies ist besonders relevant bei Systemen, die mehrere Größen anbieten, da ein Lead für größere Displays mit geringerer Dichte größer wäre als ein Lead für kleinere Alternativen mit hoher Dichte.

Textfarbe

Farbe spielt auch eine Schlüsselrolle in der typografischen Hierarchie einer Schnittstelle, oft durch etablierte Typen wie:

• Primär, für die meisten Schnittstellentexte, ob Hauptteil oder Überschrift.
• Sekundär für verringerten Kontrast (häufig der „graue Text“) für zusätzliche Informationen.
• Interaktiv, nicht nur für Links, sondern auch flache Schaltflächen, Registerkartenbeschriftungen und mehr
• Deaktiviert, häufig resultieren daraus besonders kontrastarme Behandlungen
• Fehler, normalerweise rot, für den höchsten Kontrast zu seiner Umgebung

Wenn es darum geht, Textfarben basierend auf der Absicht zu benennen, finde ich die Namen von Hudl Uniform am faszinierendsten: Standard, Kontrast, subtil und nicht wesentlich. Solche Namen balancieren die Kompromisse zwischen stärkerer Kontrolle und größerer Abstraktion (und damit weniger selbstverständlicher Wiederverwendung) aus.

Diese Typen sind typisch und werden bei frühen Komponentendesigns wie Schaltflächen, Eingaben und Verknüpfungen angetroffen. Wenn eine Bibliothek wächst, werden sie über Tools wie Tokens und Mixin im gesamten Komponentenkatalog verstreut. Insbesondere werden sie notwendig, wenn sich Komponentendesigns in hellen und dunklen Umgebungen erstrecken.

Zum Beispiel verwenden wir in der Yoursite.com-Bibliothek (weitaus weniger streng gepflegt, Schusterkinder und so weiter) ein Textfarb-Mixin, das die Hintergrundfarben nach Typ durchläuft.