Alltägliche digitale Schnittstellen umfassen eine große Vielfalt an Bildern, Visualisierungen und anderen Bildern. Vor allem aber bestehen sie aus Worten. Ach so viele Worte. Während wir Teams ausstatten, um mithilfe von Systemen brauchbare, konsistente und schöne Schnittstellen zu entwerfen und zu codieren, ist es wichtig, dass Wörter von einer starken typografischen Grundlage abhängen. Das werde ich Zugegeben, 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. Aus diesem Grund habe ich mich immer gesträubt, über Typografie zu schreiben.

Typografie beginnt mit der Festlegung einer Grundlage von Schriftfamilien und Schriftstä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 – durch 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, gründen sich die meisten zunächst auf die Identifizierung der primären Serifen- und/oder Sans-Serif-Schriftfamilie. 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 Gewichtungen ihrer primären Schriftart aus und versuchen, Vielfalt und Flexibilität mit Governance und Download-Gewichtung 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.

Beziehen der Schriftarten, ob per Download, Link oder CDN

Unabhängig davon, ob ein Designsystem-Programm die Schriftarten besitzt oder nicht, Benutzer eines Designsystems erwarten, dass ein System die erforderlichen Anweisungen zur Verwendung der Schriftarten bereitstellt.

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
• Anleitung 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.

Typografieskala & 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.

Haupttext

Systeme nutzen eine Schriftskala, um Kerntextgrößen anzubieten – oft einfach als Text oder Körper bezeichnet –, die klein, mittel, groß und bei Bedarf xs, xl usw. umfassen. Die meisten Systeme benötigen ungefähr drei (daher mein Trost bei der Verwendung von T-Shirt-Größen). Beginnen Sie mit einigen wenigen 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, z. B. 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:

• Primary, für die meisten Schnittstellentexte, ob Hauptteil oder Überschrift.
• Secondary, für verringerten Kontrast (häufig der „graue Text“) für zusätzliche Informationen.
• Interactive, nicht nur für Links, sondern auch flache Schaltflächen, Registerkartenbeschriftungen und mehr
• Deaktiviert, resultiert oft in besonders kontrastärmeren Behandlungen
• Fehler, normalerweise rot, für den höchsten Kontrast zur 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 Links angetroffen. Wenn eine Bibliothek wächst, werden sie über Tools wie Tokens und Mixin im gesamten Komponentenkatalog verstreut. Insbesondere werden sie notwendig, da sich Komponentendesigns in hellen und dunklen Umgebungen erstrecken.

Zum Beispiel verwenden wir in der Yoursite.com-Bibliothek (viel weniger streng gepflegt, Schusterkinder und so weiter) einen Textfarbmix, der die Hintergrundfarben nach type.

durchläuft