Alltägliche digitale Benutzeroberflächen enthalten eine Vielzahl von Abbildungen, Visualisierungen und anderen Bildern. Aber vor allem bestehen sie aus Worten. Oh, so vielen Worten. Wenn wir Teams ausbilden, um mithilfe von Systemen benutzerfreundliche, konsistente und schöne Benutzeroberflächen zu entwerfen und zu programmieren, ist es wichtig, dass Worte auf einer soliden Grundlage in Typografie basieren. Ich gebe zu, ich bin kein Typografie-Experte. Mir fehlt ein Abschluss in Grafikdesign. Ich bin nie die Person, die eine Schriftart auswählt, die Schrift skaliert oder den Buchstabenabstand verfeinert. Aus diesem Grund habe ich mich immer gescheut, über Typografie zu schreiben.

Typografie beginnt mit der Schaffung einer Grundlage aus Schriftfamilien und -stärken sowie Fallbacks. Dann wird untersucht, wie man mithilfe von Größe, Farbe und zusätzlichen Details wie Zeilenhöhe und Schichtreaktionsfähigkeit eine Hierarchie aufbaut. Diese Modelle werden dann auf Komponenten in der Bibliothek eines Systems (wie Artikel und Kopfzeile) sowie auf benutzerdefinierte Komponenten anderer Teams angewendet.

Schriftarten

Bevor Sie sich in die Details vertiefen, müssen Sie sich auf die Grundlagen festlegen: Schriftart(en). Durch Erkunden, Vergleichen, Recherchieren und oft – bei großen Unternehmen – durch das Erstellen einer eigenen Schriftart ergibt sich jede Anzeige aus dieser Wahl und hängt von ihr ab.

Familien, Gewichte und Fallbacks

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

Manche Systeme kommen mit nur zwei oder drei Stärken ihrer primären Schriftart aus und versuchen, ein Gleichgewicht zwischen Vielfalt und Flexibilität mit Kontrolle und Downloadstärke herzustellen.

Fazit: Es ist nicht immer schwierig, eine primäre Schriftart zu finden, aber die Auswahl der einzuschließenden Stärken hat langfristige Konsequenzen. Schriftarten und Stärken hinzuzufügen ist einfach. Die Downloadgröße zu verwalten und zu ändern ist schwierig.

Die Schriftarten erhalten, 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 notwendigen Anweisungen zur Verwendung der Schriftarten bereitstellt.

Aus der Sicht eines Designers dreht sich alles um Downloads. Einige Schriftarten sind streng geheimes geistiges Eigentum, dessen Weitergabe sehr bewusst eingeschränkt ist. Eine Typografie-Seite muss daher mindestens einen direkten Download oder Anweisungen zum Erhalt der Genehmigung zum Abrufen dieser Downloads bereitstellen.Die meisten Teams stellen eine herunterladbare ZIP-Datei bereit, die alle Dateien enthält, die Sie zum Installieren und lokalen Verwenden von Schriftarten benötigen.

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

• Direkter Schriftart-Download, 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.

Fazit: Schriftarten werden von verschiedenen Personen auf unterschiedliche Weise benötigt. Systembenutzer erwarten, dass das System ihnen erklärt, wie sie alles ganz einfach verwenden können, selbst wenn es nicht die Aufgabe des Systemteams ist, benutzerdefinierte Schriftarten zu erstellen oder selbst Schriftarten bereitzustellen.

Typografische Skala und Hierarchie

Die meisten Designsysteme zeigen in der Dokumentation eine typografische Skala als vertikalen Stapel. Das reicht nicht. 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 Typografieskala, um grundlegende Textgrößen anzubieten – oft einfach als Text oder Fließtext bezeichnet –, die klein, mittel, groß und, falls erforderlich, XS, XL usw. umfassen. Die meisten Systeme benötigen etwa drei Größen (daher verwende ich gerne T-Shirt-Größen). Beginnen Sie mit ein paar wenigen und erweitern Sie diese nach Bedarf, wie es Komponentendesigns und Seitenkompositionen erfordern.

Der Haupttext kann auch einen deutlichen „Lead“-Absatz (alternativ „Lede“) enthalten, um eine Seite zu öffnen, wie beispielsweise in einem Artikel (mehr dazu später). Daher kann eine einfache S/M/L-Skala auch andere Lead-Varianten erfordern. Dies ist insbesondere bei Systemen relevant, 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: