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 Grundlage der Typografie abhängen.

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, haben Sie um sich auf die Grundlagen festzulegen: Schriftart(en). Durch Exploration, Vergleich, Recherche und oft – für große Unternehmen – durch das Erstellen einer eigenen Schriftart, hängt jede Anzeige von dieser Wahl ab und hängt von ihr ab.

Familien, Gewichtungen und Fallbacks

While Systeme können Schriftarten basierend auf dem Thema variieren, die meisten erden sich zunächst selbst, indem sie die primäre Serifen- und / oder Sans-Serif-Schriftfamilie 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 (auch wenn es nur ihre eigene ist).

Manche Systeme kommen mit as durch Weniger als zwei oder drei Gewichte ihrer Hauptschrift, um Vielfalt und Flexibilität mit Governance und Download-Gewicht in Einklang zu bringen.

Takeaway: Es ist nicht immer schwierig, zu einer Hauptschrift zu gelangen, aber die Auswahl der Gewichte, die einbezogen werden sollen, trägt langfristige Folgen. Das Hinzufügen von Schriftarten und Gewichten ist einfach. Die Downloadgröße zu verwalten und sie zu ändern ist schwierig.

Die Schriftarten erhalten, ob per Download, Link oder CDN

Unabhängig davon, ob ein Designsystemprogramm die Schriftarten besitzt oder nicht, Benutzer eines Designs Das System erwartet von einem System, dass es die erforderlichen Anweisungen zur Verwendung der Schriftarten bereitstellt.

Aus der Perspektive 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 zum lokalen Installieren und Verwenden von Schriftarten benötigen.

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

• Direkt Herunterladen 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 zur Kontaktaufnahme a Technischer Architekt, da eine Lizenz für die Schrift 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 Skalierung & 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.

Fließtext

Systeme nutzen eine Schriftskala, um den Kern anzubieten Textgrößen – oft einfach als Text oder Körper bezeichnet – umfassen klein, mittel, groß und bei Bedarf xs, xl und so weiter. 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.

Der Fließtext kann auch einen deutlichen „Lead“-Absatz (alternativ „Lede“) bieten, um eine Seite zu öffnen, z wie 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 Benutzeroberfläche, oft durch etablierte Typen wie:

• Primär
• Sekundär< /strong>
• Interaktiv
• Deaktiviert
• Fehler

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 gleichen 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) eine Textfarbmischung darin iteriert durch die Hintergrundfarben nach Typ.