UX
power-trifft-design  

Tipps für bessere Web-Typographie

Die Typografie ist eines der wichtigsten Elemente jeder Website und hat einen messbar großen Einfluss auf die Marke und das Erlebnis.

Sie ist so grundlegend, dass umfassende Änderungen an Ihrer Typografie – wie die Wahl einer neuen Schriftart, die Änderung des Schriftgrads oder die Erhöhung des Zeilenabstands – kompliziert sind und viel Zeit kosten.

Es gibt jedoch einige einfache Änderungen, die man an der Typografie vornehmen kann

Erhöhen den Farbkontrast

Bei der Gestaltung von Text sehen Designer den Text häufig als einen Block innerhalb eines visuellen Designs. Die Beziehung eines Designers zu Text ist eine ganz andere als die eines Benutzers; ein Designer positioniert Text als Form, ein Benutzer liest ihn Zeile für Zeile. Folglich neigen Designer dazu, den Kontrast, den Text benötigt, zu unterschätzen.

Hellgrauer Text ist ästhetisch schön, aber funktionell nutzlos. Text soll gelesen werden und muss die WCAG AA-Normen auf dem Desktop und die WCAG AAA-Normen auf dem Handy erfüllen – oder in jeder Situation mit vielen Umgebungslichtquellen. Je größer der Text ist, desto mehr Spielraum haben Sie.

Überschriftenabstände verkleinern

Die überwiegende Mehrheit der Schriftarten ist für die Verwendung als Fließtext konzipiert – große Blöcke von Fließtext, die mehrere Zeilen lang sind. Bei der Herstellung der Schrift wurde der Abstand für diesen Zweck festgelegt.

Im Gegensatz zu Fließtext sind Überschriften in der Regel kurz und werden von mehr Leerraum umgeben – insbesondere oben und unten. Zusätzlicher Leerraum überflutet visuell den negativen Raum in den Wortformen und zwingt die Buchstaben auseinander.

Um dies zu kompensieren, sollte man die Buchstaben- und Wortabstände von Überschriften um 1-5% verkleinern.

Wortabstände lockern

Wenn wir lesen, buchstabiert unser Gehirn die Wörter nicht Buchstabe für Buchstabe, sondern erkennt Wortformen und sogar die Formen von Wortgruppen.

Bei der meisten Mikrotypografie geht es darum, diese Wortformen nicht zu unterbrechen. Es gibt jedoch Fälle, in denen du die Bildung von Wörtern verhindern und einzelne Buchstaben zulassen möchtest.

Verringere den Buchstabenabstand bei Text, der als eine Reihe von Zeichen gelesen werden soll, wie z. B. bei Seriennummern, Tracking-Codes und Tabellendaten.

Verwende Systemschriftarten für Eingaben

Datenschutz ist ein wichtiges Thema für Benutzer. Alles, was du als Designer tun kannst, um den Nutzern zu versichern, dass ihre Daten sicher sind, wird die positive UX Ihrer Website erhöhen.

Gestalten deine HTML-Eingaben so, dass sie Systemschriftarten verwenden – die Standardschriftarten, die vom Betriebssystem, mit dem der Benutzer auf die Website zugreift, festgelegt werden. Dadurch wird eine klare Abgrenzung zwischen den Markendaten in den Markenschriften und den Nutzerdaten in den Nutzerschriften geschaffen.

Die Verwendung von Systemschriften auf diese Weise gibt dem Nutzer das Gefühl, dass er Eigentümer seiner Daten ist, schafft Vertrauen und erhöht die Konversionsrate.

Absätze einmal markieren

Textabsätze brauchen einen visuellen Hinweis darauf, dass sie begonnen haben. Dies kann auf drei Arten geschehen: nach einer Überschrift, durch einen vertikalen Abstand vor dem Absatz oder durch Einrücken der ersten Zeile.

Jeder Absatz sollte einen dieser Indikatoren verwenden, aber nur einen. Aufgrund des Charakters von Web-Inhalten und der Vorteile von Überschriften für ein schnelles Überfliegen von Inhalten ist für die meisten Websites eine Kombination aus Überschrift und vertikalem Abstand die beste Wahl.

Echte Stile verwenden

Aus verschiedenen Gründen, von der Verfügbarkeit von Schriftarten bis hin zu aggressiver Optimierung, ist es üblich, dass Websites alternative Stile mit CSS fälschen. Kursive Schrift kann als schräg gestellte Schrägschrift vorgetäuscht werden, Fettschrift kann durch die Verwendung der Standardeinstellungen des Browsers vorgetäuscht werden, und Kapitälchen können durch Großschreibung und Verkleinerung der Schriftgröße vorgetäuscht werden.

Diese Tricks schaden mehr als sie nützen, denn sie erzeugen verzerrte Wortformen, die den natürlichen Textfluss unterbrechen.

Verwenden Sie die korrekten Anführungszeichen

Apostrophe, einfache und doppelte Anführungszeichen sind spezielle Zeichen. Die meisten Schriftarten bieten eine Glyphe für diese Zeichen, die sich von der Taste für einfache oder doppelte Anführungszeichen auf Ihrer Tastatur unterscheidet.

Diese Anführungszeichen werden meist als „intelligente“ Anführungszeichen bezeichnet, da Textverarbeitungsprogramme in der Regel die Option haben, „intelligent“ zu wählen, welche Glyphen sie verwenden.

Die Verwendung der richtigen Anführungszeichen ist eine der einfachsten Möglichkeiten, um einen Text zu verfeinern.

Leave A Comment