Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Optimale Schriftfamilien für Überschrift und Mengentext finden

Das Mischen von verschiedenen Schriftfamilien sollte auf keinen Fall dem Zufall überlassen werden und es ist auch nicht eine Frage des Geschmacks.

Es gibt im Handwerkzeug des Designers klare Regeln, wie man Schriftfamilien zusammenstellen kann bzw. sollte.

Beim Mischen von Schriftfamilien sollten

  • einige Eigenschaften sehr ähnlich sein für ein harmonisches Gesamtbild
  • einige Eigenschaften deutlich anders, damit klar unterscheidbar

Wir haben hier also einerseits „sieht gut miteinander aus“ für das schöne Webdesign und andererseits „sind klar unterscheidbar“, damit die hierarchische Struktur nicht verloren geht.

Wie erreichen wir das ohne eine Ausbildung zum Designer? Hier das notwendige Wissen und Vorgehensweisen, damit man die Qualität der Zusammenstellung beurteilen kann bzw. sich selber eine Zusammenstellung von Schriftfamilien aussuchen kann.

Erster Schritt – Auswahl der Schrift für den Mengentext

Wie in den vorherigen Kapiteln betont sollte die gewählte Schrift zum Inhalt passen! Haben Sie ein modernes Thema, sollte die Schriftfamilie modern sein wie z.B. Helvetica. Ist das Thema gediegen, dann bietet sich die entsprechende Schrift an wie z.B. Times.

Haben sie als Inhalt Texte über filigranen Kunstarbeiten, dann sollte die Schrift dementsprechend sein. Haben Sie einen Text über Tresore, sollte die Schrift stabil und robust sein und nicht bei einmal schief ansehen umfallen.

Wir wählen als erstes die Schrift für den Mengentext. Hier darauf achten, dass die gewählte Schrift zu den Grundformen der zweiten Ordnung passt. Und was sind nun Grundformen der zweiten und der ersten Ordnung?

Grundformen der Schrift erster und zweiter Ordnung
Grundformen der Schrift erster und zweiter Ordnung

Kurz gesagt – die Grundformen der zweiten Ordnung haben einer schmälere Breite als Höhe. Es gibt bei der zweiten Ordnung keine starken Rundungen – ein Oval ist einfach nicht so rund wie ein Kreis. Der Text wird leichter lesbar.

Für den Mengentext (Grundtext) am besten Schriften der zweiten Ordnung nutzen.

Schriften der ersten Grundordnung sind oft auf den Gesichtspunkt konstruiert, dass die Höhe und Breite identisch ist bzw. sehr nahekommen. Diese Schriften eigenen sich gut für Überschriften.

Und nun kommen wir zum Zusammenspiel der 2 Schriftfamilien. Die Betonung liegt auf 2! Will man mehr als 2 Schriftfamilien nutzen, sieht es sehr schnell „unhübsch“ aus. Also bitte auf 2 beschränken. Welche Kriterien sind wichtig und zu beachten?

Eigenschaft für harmonisches Gesamtbild

Was muss gleich sein? Die Mittellänge! Jede Schriftfamilie kann nach verschiedenen Eigenschaften untersucht werden. Für uns ist die Mittellänge sehr wichtig. Diese ist beim kleinen „n“ gut sichtbar im Vergleich zum kleinen „d“

Mittellänge bei einer Schrift
Mittellänge bei einer Schrift

Merke: Bei Mischen sollte die Mittellänge identisch hoch oder sehr ähnlich hoch sein!

Strichvarianz

Einen Grundstrich (beim kleinen k) und der Haarlinie (Großes A, großes U, H der Querstrich) sehen Sie am folgenden Beispiel

Schrift: Grundstrich, Haarlinie, Haarstrich und Querlinie
Schrift: Grundstrich, Haarlinie, Haarstrich und Querlinie

Die Haarlinie und der Grundstrich sind besonders wichtig – in manchen Schriften gibt es dort eine deutliche Abweichung in der Stärke voneinander. Diese Abweichung nennt sich Strichvarianz.

Hat man nun eine Schriftfamilie mit einer großen Strichvarianz, sollten beide gewählten Schriften eine ähnliche Varianz haben und eine ähnliche Strichstärke im Grundstrich. Dadurch wirken die Schriften zueinander harmonisch.

Klare Unterschiede werden benötigt!

Die Schriftfamilie für die Überschriften und für den Mengentext muss klar und deutlich voneinander unterschieden werden können. Dazu wird auf manchen Websites mit Farben gearbeitet. Wir wollen natürlich (sonst würde dieses Kapitel wenig Sinn machen) mit 2 verschiedenen Schriftfamilien arbeiten.

Bisher haben wir nach harmonisch zueinander passenden Schriften geschaut. Berücksichtigen wir nur die bisherigen Kriterien, besteht die Gefahr, dass die Schriften sich zu stark ähneln und somit keine saubere visuelle Trennung zwischen Überschrift und Mengentext vorhanden ist.

Tipp: Einsatz von einer Schriftfamilie mit Serifen und der zweiten Schriftfamilie ohne Serifen. Dies ist die Möglichkeit, die in der Regel sehr gut funktioniert.

Finger weg vom Mischen von 2 serifenlosen Schriften!

Sehr schwierig wird es, wenn man versucht 2 serifenlose Schriften zu mischen. Für ein gutes Ergebnis beim Mischen von zwei serifenlosen Schriften gehört sehr viel Erfahrung und Fingerspitzengefühl dazu.

Tools für das Kombinieren von Schriftfamilien

Wie man das Mischen spielerisch üben und lernen kann

Will man üben und spielen gibt es eine schöne Anwendung Online unter:
http://www.typeconnection.com/

Man kann gezielt Schriften auswählen, die man zu einem „Date“ schickt – als Rückmeldung erhält man sofort, ob diese passen und ein schönes Paar abgeben würden oder ein klarer Fall von „Scheidung“ ansteht.

Schriften mischen spielerisch üben
Schriften mischen spielerisch üben

Tool für Vergleich von 2 Schriften

Zum Vergleich von 2 Schriften findet sich unter http://andreasweis.com/webfontblender/ ein schönes Tool, dass auf die Schriften von Google Fonts zurückgreift. Hier können schnell und einfach 2 „Fonts“ kombiniert werden und deren Wirkung getestet werden.

Tool zum 2 Schriftarten testen
Tool zum 2 Schriftarten testen

automatisch Vorschläge für zweite Schrift

Und nun der Punkt, wo man sagt – das hättest du auch gleich schreiben können und so ist es ja noch einfacher. Zu meiner Ehrenrettung: ich vertrete den Standpunkt, dass man verstehen sollte, warum man etwas macht, damit man es bestmöglich macht.

Eine sehr einfache Variante bietet Google Fonts unter https://fonts.google.com/ - das folgendes Beispiel können Sie direkt mit https://fonts.google.com/specimen/Droid+Serif aufrufen.

Bei Google Fonts erhalten wir nach Auswahl einer Schrift nach der Anzeige der verschiedenen Buchstaben den Punkt „popular Pairings with ...“ und können durch Anklicken die visuelle Wirkung der Kombination mit der zweiten Schrift sofort beurteilen. Es werden oft verschiedene Schriften angeboten.

Google Fonts mit Vorschlägen für eine passende zweite Schrift
Google Fonts mit Vorschlägen für eine passende zweite Schrift

Viel Spaß nun beim Wählen von zueinander passenden Schriftfamilien – das Kombinieren von Schriften ist nicht so schwierig wie man denkt und mit Hintergrundwissen macht es schnell Spaß.

weitere eigene Projekte: