Typgografie – Grade
Viele Faktoren beeinflussen die Benutzerfreundlichkeit (Usability) und das Nutzererlebnis (User Experience) digitaler Produkten. Betrachtet man die «Elements of User Experience» von Jesse James Garrett, so bewege ich mich als UX Designer mit einem Hintergrund in Business & Research meist auf den konzeptionellen Ebenen des Modells. Für das Sensory Design greife ich meist auf bestehende Designsysteme zurück oder arbeite eng mit Visual Designer zusammen.
Als Designer:innen im Applikationsbereich platzieren wir täglich Text – immer in Kontext von Text oder anderen Elementen. Wie kann ein digitales Produkt besser gestaltet werden? Welche Rolle spielen Schrift und Typografie? Um solche Fragen besser beantworten zu können habe ich vor längerer Zeit begonnen, mich mit Typografie auseinanderzusetzen. Durch das erweiterte Verständnis von Gestaltung und Platzierung von Text gehe ich mittlerweile bewusster mit Text um.
Insights aus der Typografie Masterclass
Vor Kurzem habe ich deshalb auch eine Masterclass von Elliot Jay Stocks zu Typografie, insbesondere im digitalen und Web-Bereich besucht und dabei ein paar spannende Sachen gelernt. Wie erwartet, sind viele dieser Erkenntnisse besonders im UI-Bereich relevant, haben aber auch Einfluss auf unsere gesamte Arbeit. Als Designer:in können wir nur das in unser Design einfliessen lassen, was wir kennen - jedes neue Wissen verbessert unser Design und bringt letztlich auch unsere Kund:innen weiter.
In diesem Sinne möchte ich eine kleine Miniserie zum Thema Typografie starten und ein paar Punkte weitergeben.
Anwendung: Grade – Besserer Hover
Abhängig von der gewählten Schrift kann Text durch die Verwendung von «Grade» anstatt «Schriftgewicht» (Font Weight) visuell stärker betont werden, ohne den Platzbedarf zu ändern. Wird ein Text einfach «fett» gesetzt, wird zwar eine Hervorhebung erreicht, jedoch nimmt der Text mehr Raum ein, was Anpassungen im Interface erfordern kann.
Ein gutes Anwendungsbeispiel ist die Hervorhebung von Text auf Buttons oder Tabs. Markierte oder ausgewählte Elemente werden häufig «fett» dargestellt. Durch die Verwendung von «Schriftgewicht» wird der entsprechende Text breiter. Labels benötigen mehr Platz und Elemente bewegen sich – das Interface wirkt unruhig. Mit «Grade» hingegen kann der Text am gleichen Platz «fett» gemacht werden, ohne die Breite zu verändern.
Ein weiteres Anwendungsbeispiel ist der Darkmode, wo Text situativ dicker (bei feinen Schriften mit viel Kontrast) oder dünner gemacht werden kann (bei Schriften mit viel Fläche).
Um die erwähnten Effekte zu erreichen muss eine Multiplex-Schrift verwendet werden, alternativ eine Variable Schrift mit einer «Grade»-Achse oder eine Schrift, bei der zwei Achsen unabhängig bearbeitet werden können. Mehr dazu im folgenden Kapitel.
Hintergrund: Grade & Multiplex Schriften
Multiplex-Schriften haben in allen Variationen gleich breite Zeichen. Ein Text benötigt deshalb unabhängig vom Schriftgewicht den gleichen Platz. Das unterscheidet sie von den meisten anderen Schriftarten, bei denen „Regular“, „Medium“ oder „Bold“ unterschiedlich viel Platz beanspruchen.
Historisch kommt das Konzept (wie vieles in der Typografie) aus dem Print-Bereich, wo beim Druck auf qualitativ unterschiedlichem Papier unterschiedliche Mengen an Farbe verwendet wurden, um das gleiche visuelle Schriftgewicht zu erreichen. «Grade» auf Englisch steht für die Qualität des Papiers. Die heute in manchen variablen Schriften verfügbare «Grade»-Achse ermöglicht es, die Schrift dünner oder dicker zu machen, ohne den benötigten Platz zu verändern.
Beispiele für eine variable Schrift mit einer «Grade»-Achse (GRAD) sind «Roboto Flex» oder «Roboto Serif». Mit den variablen Achsen kann seit Kurzem auch in Figma experimentiert werden.
Falls die Font nicht durch den oder die Designer:in ausgewählt werden kann, lässt sich ein ähnlicher Effekt bei Multiplex-Schriften über die OpenType-Dateiformat «Weight»-Achse erzielen (alle Zeichen behalten ihre Breite, Das «Weight» erhöht nur das Gewicht). Bei anderen Schriften kann dies über die zusätzliche Manupulation der «Width»-Achse erreicht werden (mit «Weight» werden Gewicht und Breite erhöht, während «Width» die Breite wieder auf das initiale Mass reduziert).
Stay tuned
Im nächsten Blogpost zu Typografie schauen wir uns Typescales an.