Tägliche digitale Schnittstellen umfassen eine große Vielfalt an Bildern, Visualisierungen und anderen Bildern. Sie bestehen jedoch vor allem aus Worten. Oh, so viele Worte. Da wir Teams in die Lage versetzen, benutzerfreundliche, konsistente und schöne Schnittstellen mithilfe von Systemen zu entwerfen und zu programmieren, ist es wichtig, dass Wörter auf einer starken typografischen Grundlage basieren. Ich gebe zu, ich bin kein Typografie-Experte. Mir fehlt ein Abschluss in Grafikdesign. Ich bin nie derjenige, der eine Schriftart, einen Skalierungstyp oder den Buchstabenabstand auswählt. Aus diesem Grund hatte ich immer Bedenken, über Typografie zu schreiben.

Typography beginnt mit der Festlegung einer Grundlage für Schriftfamilien und -stärken sowie Fallbacks. Anschließend wird untersucht, wie eine Hierarchie mithilfe von Größe, Farbe, zusätzlichen Details wie Linienhöhe und Schichtreaktionsfähigkeit aufgebaut werden kann. Diese Modelle werden dann auf Komponenten in der Bibliothek eines Systems (wie Artikel und Header) sowie auf benutzerdefinierte Komponenten anderer Teams angewendet.

Schriftarten

Bevor Sie sich mit den Details befassen, müssen Sie sich mit den Grundlagen befassen: Schriftart(en). Durch Erkundung, Vergleich, Recherche und oft – bei großen Unternehmen – durch die Erstellung einer Schriftart selbst, kaskadiert jede Anzeige von dieser Wahl und hängt von ihr ab.

Familien, Gewichtungen und Fallbacks

Während Systeme Schriftarten je nach Thema variieren können, gründen sich die meisten zunächst auf die Identifizierung der primären Serifen- und/oder serifenlosen Schriftfamilie. Jede Schriftart wird durch eine Kaskade von Fallbacks (Hello, Arial und Times) ergänzt, und viele Systeme fügen eine Monospace-Schriftart für die Codeanzeige hinzu (auch wenn es nur ihre eigene ist).

Einige Systeme kommen mit nur zwei oder drei Stärken ihrer Primärschrift aus und versuchen, Vielfalt und Flexibilität mit Governance und Download-Gewicht in Einklang zu bringen.

Fazit von

: Es ist nicht immer schwer, zu einer primären Schriftart zu gelangen, aber die Auswahl der einzubeziehenden Strichstärken hat langfristige Konsequenzen. Das Hinzufügen von Schriftarten und -stärken ist einfach. Die Verwaltung und Änderung der Downloadgröße ist schwierig.

Erhalten der Schriftarten, ob per Download, Link oder CDN

Unabhängig davon, ob ein Designsystemprogramm Eigentümer der Schriftarten ist oder nicht, erwarten Benutzer eines Designsystems, dass ein System die für die Verwendung der Schriftarten erforderlichen Anweisungen bereitstellt.

Aus Designersicht dreht sich alles um Downloads. Bei einigen Schriftarten handelt es sich um streng geschütztes geistiges Eigentum, dessen Weitergabe bewusst eingeschränkt wird. Daher muss eine Typografie-Seite mindestens direkte Downloads oder Anweisungen zum Einholen der Genehmigung dafür bereitstellen.Die meisten Teams stellen eine ZIP-Datei zum Herunterladen bereit, die alle Dateien enthält, die Sie zum lokalen Installieren und Verwenden von Schriftarten benötigen.

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

• Direkter Schriftarten-Download zur Bereitstellung der Schriftarten selbst
• Anleitung zur Verknüpfung mit einem Dienst wie Google Fonts
• CDN verweist darauf, dass alle Produkte gemeinsam auf
verweisen
• Eine Einladung zur Kontaktaufnahme mit einem technischen Architekten, 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.

Fazit: Schriftarten werden von verschiedenen Menschen auf unterschiedliche Weise benötigt. Systembenutzer erwarten, dass das System die Bedienung einfach erklärt, 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 an. Das ist nicht genug. Ein typografisches System sollte auch Konstrukte wie Textkörper, Überschriften, Farbe, Reaktionsfähigkeit, Farbe und andere feinkörnige Details festlegen.

Textkörper

Systeme nutzen eine Typenskala, um grundlegende Textgrößen – oft einfach als Text oder Text bezeichnet – anzubieten, die klein, mittel, groß und bei Bedarf auch xs, xl usw. umfassen. Die meisten Systeme benötigen ungefähr drei (daher ist es für mich kein Problem, T-Shirt-Größen zu verwenden). Beginnen Sie mit ein paar und erweitern Sie sie nach Bedarf durch Komponentendesigns – und Seitenkompositionen in freier Wildbahn.

Der Fließtext kann auch einen eindeutigen „Lead“-Absatz (alternativ „Lede“) zum Öffnen einer Seite enthalten, beispielsweise in einem Artikel (mehr dazu später). So kann eine einfache S/M/L-Waage auch andere Varianten benötigen. Dies ist insbesondere bei Systemen mit mehreren Größen relevant, 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 nach etablierten Typen wie: