Portfolio Redesign: Typografie, Schriftgröße und Abstände definieren

Das Schriftbild spielt eine entscheidende Rolle, wenn es darum geht, wie eine Website empfunden wird.

Ich bin selbst sehr kritisch, wenn es um Typografie geht. Es gibt selten Seiten, die ich als angenehm zu lesen empfinde. Daher schalte ich bei viele Nachrichtenseiten auch oft den „Lesemodus“ ein. Das ist eine Browser-Funktion, die den dargestellten Inhalt besonders lesefreundlich darstellt. Dabei kann ich in den Einstellungen den Schrifttyp und die Größe nach meinen eigenen Vorlieben festlegen.

Warum verwende ich auf vielen Seiten die Reader-Ansicht?

• Artikel sind oft schwer lesbar, da sich der Herausgeber wenig Gedanken um Typografie gemacht hat.
• Textblöcke sind zu breit und es ist mühselig, von einer Zeile in die nächste zu springen.
• Ich finde keinen richtigen Lesefluss, da Schriftgrößen und/oder Farben das Lesen erschweren.
• Der „Lesemodus“ kann den Inhalt oft schneller anzeigen, als die eigentliche Seite lädt.
• Er zeigt nur den Text und die Bilder an, die auch im Artikel stehen, nicht den ganzen Kram außen herum (Werbung etc).

Mein Ziel für die Typografie-Entscheidungen bei meinem Redesign:

Ein Schriftbild gestalten, das für jeden Besucher angenehm zu lesen ist und nicht über eine externe Funktion, wie den Lesemodus, weggeklickt wird.

Welche Blogs oder News-Seiten machen sich schon intensiv Gedanken um ihr Schrift-Empfinden?

Wenn man mal ehrlich ist, wird auf vielen Seiten zu wenig Wert auf Typografie gelegt. Obwohl es visuell gesehen für einen Internetauftritt enorm wichtig ist.

Eine Seite, auf der ich die Typografie als sehr angenehm empfinde, ist Medium. Hier geht es grundsätzlich um Artikel, die jeder selbstständig veröffentlichen kann. Für Medium sind diese Texte die wichtigste Verbindung zu ihrer Zielgruppe. Deshalb hat sich das Unternehmen auch intensiv mit dem Erscheinungsbild beschäftigt.

Typografie, Schriftgrößen und Abstände sind so perfekt gewählt, dass es für mich persönlich zu dem besten Leseerlebnis im Web gehört. Ich habe bisher einfach keine andere Nachrichten-Seite gefunden, die ihre Beiträge so gut darstellt. Und auch wenn alle Artikel unterschiedlich aufgebaut sind, hat Medium es trotzdem geschafft, ein einheitliches und sehr hochwertiges Schriftbild zu definieren. Zudem liegt der Fokus bei jedem Beitrag zu 100% auf dem Artikel und wird nicht, wie es bei vielen anderen Seiten der Fall ist, von irgendwelchen Elementen außen herum gestört. Davon können sich viele Seiten eine Scheibe abschneiden!

Ich hatte einen sehr mühseligen Start, ein einheitliches Schriftbild für das Layout zu definieren

Ich habe bestimmt zwei Tage damit verbracht, Schriften zu kombinieren und verschiedene Styles auszuprobieren. Das gehört zwar nicht zu meinen liebsten Aufgaben, wenn es um das Website-Layout geht, aber es ist definitiv ein Bereich, der viel Zuneigung verdient.

Normalerweise verwende ich immer zwei unterschiedliche Typen, damit ein guter Kontrast zwischen Überschrift und Fließtext entsteht. Aber bei diesem Redesign entschied ich mich am Ende für eine Schriftfamilie, die ich überall einsetzen wollte. Vorteile dadurch waren unter anderem auch Performance-Gründe.

Warum ich meine Typo auf der Website geändert habe

Das Schriftbild auf meiner alten Seite war ok, aber nicht sehr gut. Das zeigt sich am besten in einem Vergleich:

Altes Schriftbild: Montserrat & Merriweather

Headlines - Montserrat - Sans Serif:

• Montserrat hat einen schönen runden Schnitt
• Sie ist Modern
• Perfekt für Überschriften geeignet
• Hat einen sehr breiten Schriftschnitt → braucht viel Platz für Headlines
• Nur zwei Schriftschnitte (Regular/Bold)

Fließtext - Merriweather - Serif:

• Eine Schrift mit Serifen ist für viele angenehmer zu lesen
• Sie wurde aber auf vielen Bildschirmen zu unterschiedlich dargestellt
• Texte die Bold markiert wurden, waren auf einem hochauflösenden Display zu dick hervorgehoben

Neues Schriftbild: Source Sans Pro

Meine Argumente, warum ich mich für diese Schriftfamilie entschieden habe:

• Ähnelt der alten Schrift für Headlines (Montserrat) → nicht komplett fremd
• Modern und schlicht gestaltet
• Über 12 Schriftschnitte verfügbar
• Auch in unterschiedlichen Größen leicht zu lesen → funktioniert nicht nur als Headline, sondern auch als Fließtext und als kleiner Infotext
• Schnellere Ladezeit mit nur einer Schrift

Vergleich der neuen und der alten Überschriften

Es ist gut zu erkennen, wie viel mehr Platz die Headlines im alten Design gebraucht haben.

Neue Erfahrungen, die ich auf dem Weg gemacht habe

Ich fand Texte angenehmer zu lesen, wenn die Abstände von einer Headline zum Fließtext gleich eingestellt waren, wie die Höhe zwischen den Absätzen. So wirkt das Schriftbild weniger unruhig und harmoniert mehr miteinander. Ein kleiner aber feiner Unterschied, den ich mir für zukünftige Projekte merken kann.

In der Vergangenheit habe ich Listenelemente in einem Absatz immer bündig zum Fließtext anfangen lassen. Es ist das erste Mal, dass ich sie in diesem Layout etwas eingerückt zeige.

Es hat einen Grund, warum es in vielen Magazinen und Zeitungen so gehandhabt wird. Die Liste sticht dadurch mehr hervor und ist klarer vom Fließtext zu unterscheiden.