CultureConnect in Museen: Der ultimative Leitfaden für Schriftarten

1. Erstellen Sie eine Hierarchie

Anhand einer Hierarchie lassen sich die verschiedenen Textelemente auf einer Website ideal gliedern. Eine gut aufgebaute Hierarchie sorgt für eine visuelle Struktur, die das Scannen, Orientieren und Navigieren im Text erleichtert. Wir unterteilen die Hierarchie in drei Ebenen:

Ebene 1: Überschriften – dazu gehören Überschriften und Unterüberschriften. Sie sind das sichtbarste typografische Element in unserem Design.

Ebene 2: Inhalt – in der Regel sprechen wir hier vom Hauptinhalt oder den Schriftarten, die für die textlastigen Teile der App verwendet werden. Diese machen den größten Inhaltsanteil in der App aus, deshalb ist Lesbarkeit oberstes Gebot.

Ebene 3: Unterstützender Text – einschließlich Bildunterschriften, Zeilen für Quellennachweise, Schaltflächentexten und anderer Elemente. Dieser unterstützende Inhalt kann das am wenigsten sichtbare typografische Element auf der Seite sein, muss aber dennoch lesbar sein.

Um eine gute Hierarchie zu erstellen, definieren Sie zunächst alle eindeutigen Textelemente in einer Anwendung. Wenden Sie dann eine oder mehrere Schriftarten auf jedes Element an und passen Sie Schriftgröße, -stil, -gewicht, -farbe, -abstand und -höhe an. Im folgenden Text erfahren Sie mehr darüber, wie Sie diese Variablen anpassen können.

2. Achten Sie auf die richtige Größe

Vor allem bei interaktiven Elementen in der Galerie stehen die Besucher:innen etwa zwei bis drei Meter von den Inhalten entfernt, die sie konsumieren. Es ist wichtig, dass der Text – insbesondere der Fließtext – groß genug ist, damit man ihn bequem lesen kann.

Tipp für Profis: Zeigen Sie auf einem Tablet Beispieltexte (oder machen Sie davon Ausdrucke) in verschiedenen Schriftgrößen an und bitten Sie Mitarbeiter:innen und Besucher:innen, diese zu lesen, während sie die Schrift in einem Abstand von zwei Metern zu ihren Augen halten. Bitten Sie sie, die Lesbarkeit zu bewerten.

Behalten Sie im Hinterkopf, dass das Gerät eine wichtige Rolle bei der Lesbarkeit spielt. Während Sie die App vielleicht auf Ihrem Computer betrachten, sehen die Besucher:innen den Inhalt auf anderen Bildschirmen (sowohl Größe als auch Auflösung). Stellen Sie sicher, dass Sie die Schriftgröße und Lesbarkeit auf dem tatsächlichen Gerät testen.

3. Serifen oder keine Serifen – das ist die Frage

Die Lesbarkeit ist ein wichtiger Faktor bei der Auswahl der Schriftarten für die einzelnen Hierarchien. In der Regel sind serifenlose Schriften (Schriften mit sauberen Rändern) besser lesbar als serifenbetonte Schriften.

ser·if

ˈserəf/

noun

ein leichter Vorsprung, der in bestimmten Schriftarten einen Buchstaben abschließt.

Für Hierarchien der Ebene 1 (Titel) kann jeder beliebige Stil verwendet werden. Im Allgemeinen sind die Titel groß und kurz, was eine gute Gelegenheit bietet, eine Serifenschrift zu verwenden, wenn dies der gewünschten Ästhetik entspricht. Einige unserer bevorzugten eleganten Serifen-Titelschriften sind Playfair Display, Source Serif Pro und Merriweather, während die serifenlosen Schriften Montserrat und Poppins einen besonderen Eindruck hinterlassen. Sie können in Google Fonts nach Serif und Sans Serif filtern.

Hierarchien der Ebene 2 (Inhalt) sind etwas komplizierter. Im Allgemeinen empfehlen wir eine gute serifenlose Schriftart, damit die Augen beim Lesen großer Textmengen aus der Entfernung nicht überanstrengt werden. Serifenschriftarten können verwendet werden, aber achten Sie darauf, dass sie gut lesbar sind. Schriftarten wie Source Sans Pro, Roboto, PT Sans, Lato, Open Sans und Work Sans sind eine gute Wahl.

Für Hierarchien der Ebene 3 (unterstützender Text) empfehlen wir, nur serifenlose Schriftarten zu verwenden. Auf dieser Ebene ist die Schrift wahrscheinlich klein und daher ist die Lesbarkeit das wichtigste Anliegen.

4. Begrenzen Sie die Anzahl der Schriftarten

Es mag verlockend sein, mehrere Schriftarten zu verwenden. Weniger Vielfalt ist jedoch optisch oft ansprechender und besser lesbar. Es ist schwierig, mehrere Schriftarten zu mischen, und das Endergebnis ist in der Regel zu ablenkend.

Beginnen Sie bei der Auswahl der Schriftarten mit 10 Favoriten, die Sie für attraktiv und gut lesbar halten und die zum Ton der Bewerbung und/oder der Ausstellungsfläche passen. Reduzieren Sie die Auswahl auf 1-3 Schriftarten. In der Regel verwenden wir nur ein oder zwei Schriftarten in verschiedenen Größen und Gewichtungen.

Scheuen Sie sich nicht, verschiedene Kombinationen auszuprobieren und zu sehen, wie sie zusammen wirken. Wenn Sie eine fertige Kombination wollen, die funktioniert, wählen Sie Playfair Display und Source Sans Pro, Oswald und Open Sans oder Montserrat und Cardo.

5. Geben Sie Ihrem Text Raum

Angemessene Zeilenabstände sind wichtig, weil sie dem Auge helfen, von einer Zeile zur nächsten zu gelangen. In der Regel benötigen Serifenschriften einen größeren Zeilenabstand als serifenlose Schriften.

Wir werden oft gefragt, was der beste Wert für die Zeilenhöhe bei „Schriftgröße einfügen“ ist. Wir empfehlen ein Verhältnis von 1,2 für Titel und 1,5 für alles andere (Schriftgröße x Verhältnis = Zeilenhöhe). Wenn Sie mit der Schriftgröße 16px arbeiten, wäre die empfohlene Zeilenhöhe 24px (16 x 1,5 = 24).

Auch wenn es sich hierbei um Standardverhältnisse handelt, ist jede Schriftart einzigartig und Sie sollten diese Zahlen für Ihren Anwendungsfall anpassen.

6. Schreien Sie Ihre Benutzer:innen nicht an

Die Verwendung von Großbuchstaben für Überschriften und einige unterstützende Texte kann eine attraktive Designwahl sein. Es ist jedoch schwierig, große Textabschnitte in Großbuchstaben zu lesen, und kann aufgrund schlechter Praktiken in Marketing-Spam als aggressiv interpretiert werden. Verwenden Sie Großbuchstaben mit Bedacht.

7. Richten Sie sich aus

Mittig ausgerichteter Text, insbesondere bei Texten der Ebene 2 (Inhalt), ist oft schwer zu lesen. Ungleichmäßige Textblockränder stören unsere Fähigkeit, schnell zu lesen oder zu scannen.

Wir empfehlen linksbündigen Text als Standard und die Verwendung von zentriertem Text in Maßen – zum Beispiel in Überschriften oder kurzen Titeln.

8. Kontrast ist der Schlüssel

Der Kontrast ist ein wichtiger Faktor für die Lesbarkeit von Texten. Ein geringer Kontrast zwischen Text und Hintergrund zwingt Benutzer:innen, sich beim Lesen anzustrengen.

Sehbehinderte Menschen benötigen einen höheren Kontrast (z. B. sollten sie gelben Text vermeiden). Wir empfehlen die Verwendung eines Tools wie Online Contrast Checker, um sicherzustellen, dass der Kontrast Ihrer Anwendungen mindestens den WCAG 2.0 AA-Kriterien entspricht.