Typografie im aktuellen Webdesign

von Christian Homberger (Kommentare: 3)

Wie hat sich die Typografie seit dem Aufkommen mobilen Webdesigns verändert? Inwiefern werden den typografischen Elementen Aufmerksamkeit geschenkt? HTML5 und Typografie - das neue Dreamteam? Eine Fallstudie

Typografie in Onlinepublikationen

Gute Typografie war immer schon ein entscheidender Aspekt eines professionellen Webauftrittes. Die designbestimmende Typografie ist v.a. dort wichtig, wo viele Inhalte angeboten werden, so z.B. bei News, Blogs und anderen textlastigen Inhalten. Typografische Designelemente spielen im Printbereich schon lange ein grosse Rolle. Für Webseiten eröffnen nun neue Techniken (CSS3, HTML5) auch neue typografische Möglichkeiten.

Smartphones und iPads haben in den letzten Jahren das Internet aufgewühlt. Die Toch-Screens eignen sich im Besonderen zum Browsen, Blättern und auch zum Lesen langer Texte. Online-Portale mussten ihr Design für die neuen Besucher optimieren. Responsive Webdesign ist die Antwort auf die neuen Medien wie iPad oder Smartphones. Die Inhalte passen sich flexibel dem Bildschirm an. Neue Techniken machen es nun möglich, Typografie als gezieltes Stilelement benutzerfreundlich im Responsive Webdesign zu verwenden. Webdesigner sind heute gefordert sich mit Typografie auseinander zu setzen und die gängige Praxis zu hinterfragen.

Wie hat sich die Typografie im Webdesign seit 2009 verändert?

Wir haben von über 50 wichtigen WebSites Daten gesammelt um diese Frage zu beantworten. Für diese Studie haben wir viele internationale Newsportale, Magazine und Blogs angeschaut - also jene Webseiten, die Typografische Elemente gut nutzen könnten. Es wurden Webseiten ausgewählt mit einer ausgesprochenen hohen Anzahl Besuchern (The Boston Globe and The Financial Times), wie auch spezielle Webseiten oder Magazine, die sich an ein forderndes Fachpublikum richten (A List Apart oder UX Booth). Diese textlastigen Publikationen wären eigentlich ein schönes Beispiel für gefällige Typografie - doch ein bitterer Nachgeschmack bleibt leider hängen.

Probleme, die uns interessieren

Die Fragen, die wir vor vier Jahren stellten, bleiben relevant müssen jedoch aufgrund der "mobilen Geräte" ergänzt werden. Inwiefern wurde Responsive Webdesign verwendet - wenn überhaupt? Wurde die Typografie verändert? Wie gross sind die Schriften im Fliesstext? Wie gross sind die Fonts auf den mobilen Geräten? Wird "font-weight" oder "spacing" verwendet? In einem zweiten Artikel betrachten wir die Veränderungen, die sich aus der Benutzung von mobilen Geräten ergeben. Gibt es Unterschiede in der typografischen und visuellen Präferenz zur klassischen WebSite?

 

Nachdem wir das Stylesheet gründlich untesucht haben, werden wir eine vergleichende Tabelle mit relevanten typografischen Merkmalen erstellen. Sie können die Rohdaten, die etwas mehr Material enthalten als im vorliegenden Artikel erwähnt, selber untersuchen. 

Wir werden uns jedoch nicht auf die ursprünglichen Fragen beschränken. Wir fragen auch im Zusammenhang mit den neuen Techniken, ob Responsive Design überhaupt eine Rolle spielt - und wenn ja, welche? Das führt uns zu folgenden Fragen:

  1. Wie populär sind Serifenschriften und serifenlose Schriften im Fliesstext und bei den Überschriften? 
  2. Welche Fonts werden am meisten benutzt?
  3. Welches ist die Durchschnitts-Font-Size-Grösse? (mittlere Bildschirmgrösse, grosse Bildschirme)?
  4. Welches ist das Durchschnittsverhältnis von Font-Size "Headlline" zu Font-Size Fliesstext?
  5. Welches ist die Durchschnitts-Zeilenhöhe (line-height)?
  6. Was ist das Durchschnittsverhältnis von Zeilenhöhe zur Schriftgrösse im Fliesstext?
  7. Was ist das Durchschnittsverhältnis von Zeilenhöhe zur Zeilenlänge Fliesstext?
  8. Welches sind die durchschnittlichen Abstände zwischen Absätzen?
  9. Was ist der durchschnittliche Abstand zwischen Absätzen hinsichtlich Zeilenhöhe im Fliesstext?
  10. Wie werden Links geformt (styling)?
  11. Wieviele Zeichen pro Zeile werden im Fliesstext eingesetzt?
  12. Wie oft werden Links unterstrichen?
  13. Wie oft werden Fonts-Fallbacks genutzt?
  14. Wie oft wird Responsive Webdesign eingesetzt
  15. Welches Verhältnis von Publikationsgrössen sind erkennbar?
  16. Wie gehen Webseiten mit der Performance von Webfonts um?

Um diese Fragen zu beantworten, haben wir mehr als 40 Datenpunkte erhoben, die Sie in der oben erwähnten Tabelle finden (Rohdaten). Wir können aus diesen Daten verschiedene Faustregeln ableiten. Wir würden aber nicht empfehlen aus diesen Daten blindlings Schlüsse zu ziehen. Die gewonnen Einsichten sind jedoch nützlich.

 

1. Popularität von serifen- und serifenlosen Schriften

Welche Fonts soll man verwenden? Das ist eine der wichtigsten Fragen, die sich ein Desinger stellen sollte, wenn es um Webdesign geht. Die Schriftarten bestimmen das Grundaussehen von Webseiten entscheidend mit. Es konnten keine Argumente für oder gegen den Einsatz von Serifenschriften respektive serifenlose Schriften gefunden werden. Im Vergleich zur Studie von 2009 zeigt sich jedoch, dass mehr serifenlose Schriften verwendet wurden. In den letzten vier Jahren sehen wir einen leichten Trend in die andere Richtung. Die Motivation der Designer haben sich wahrscheinlich nicht gross verändert. Serifenschriften ragen bei Titelüberschriften heraus, aber es gibt jedoch auch einige Argumente für Serifenschriften, die v.a. bei der Benutzerführung ihre Berechtigung haben und dies gilt auch für den Fliesstext. Der Kontrast einer Serifenschrift im Hauptbereich mit einer serifenlosen Schrift als Titelüberschrift oder umgekehrt kann die allgemeine visuelle Erscheinung und Lesbarkeit verbessern.

Headings: Serif vs. Sans Serif
Serifen- und serifenlose Schriften sind beinahe gleich populär bei den Überschriften

Die Rohdaten zeigen, dass Serifenschriften in den letzten Jahren an Popularität gewonnen haben. Es zeigt sich, wenn man die letzten vier Jahre und den Fliesstext betrachtet, sogar eine leichte Präferenz für diese Schriften.

 

Grafik Serifenschriften
Serifenschriften haben im Haupttextbereich stark an Popularität gewonnen
  • die Hälfte aller Webseiten, die wir untersucht haben, benutzen Serifenschriften für die Überschriften. Die populärsten Schriften sind "Georgia" (The Guardian, Financial Times) und Arial (Die Zeit, BBC-Website)
  • Nur 37% der Webseiten nutzen serifenlose Schriften für den Fliesstext und für die Überschriften
  • Die populärsten Serifenschriften für die Überschriften sind Georgia (14%) und Chaparral Pro (6%).
  • Die populärsten Serifenschriften für den Fliesstext sind Georgia (20%) und Chaparral Pro (4%).
  • Die populärsten serifenlose Schriften für Überschriften sind Arial (10%) und Freight Sans Pro (4%).
  • Die populärsten serifenlose Schriften für den Fliesstext sind Arial (14%) und Helvetica (6%).
brand identity
Die Mehrheit der untersuchten WebSites benutzen als Hauptschrift "Non-Standard-Fonts"

Zusammengefasst kann man sagen, dass zwei Drittel der untersuchten Webseiten Serifenschriften für den Haupttextbereich verwenden. "Georgia" und "Arial" sind immer noch die bevorzugten Schriften. Wie auch immer: eine überraschende Erkentnis ist, dass die Mehrheit der Webseiten "Non-Standard-Fonts" als Hauptschrift nutzen. Und zwar 39% für den Haupttextbereich und 66% für die Überschriften. Diese Entwicklung ist durchaus interressant, weil sie zeigt, dass die Typografie ein wichtiges Merkmal in der Entwicklung von Markenidentität und Charaktereigenschft einer WebSite geworden ist. Diese Zahlen zeigen eine wachsende typografische Diversität im Web, was wir vielleicht erwartet hätten.

Das Anwachsen von "Idiotensicheren" Font-Dienstleistern wie z.B. Typekit und Fontdeck erklärt vermutlich die wachsende Vielfalt von Hauptschriften. "Fallback-Fonts" sind vorwiegend "standard core Web fonts". Times, Times New Roman, Georgia, Helvetica and Arial werden am meisten verwendet. Mobile "platform fonts" wie z.B. Droid Sans, Palatino und Cambria werden beinahe nie verwendet.

Eine Konsequenz der Wiederauferstehung der Serifenschriften ist ironischerweise, dass Times und Times New Roman, welche in der letzten Studie möglicherweise als zu altmodisch bezeichnet wurden, eine Art Comeback erfahren haben. Sie sind die populärsten Fallback-Schriften. Ungefähr 11%  der Fallback-Schriften aller Titelüberschriften und Fliesstexte benutzen Times und andere 11% benutzen Times New Roman.

thegreatdiscontent.com
The Great Discontent kombiniert beide

Es wird im Webdesign viel über Typografie geschrieben. Die meisten Artikel diskutieren den Einsatz von Serifenschriften und serifenlose Schriften. Argumente für eine bessere Lesbarkeit in Kombination mit künstlerischer Ausdruckskraft unterstützen den vernünftigen Einsatz beider Stile. Douglas Bonneville diskutiert die Vorteile und die beste Praxis des kombinierten Einsatzes von serifenlosen- und Serifenschriften. Simon Pascal Klein schreibt über die Feinheiten von Font-Familien und betrachtet weitere typografische Aspekte in seinem Artikel “Achieving Good Legibility and Readability on the Web.”

Im Vergleich zu früheren Studien sind die Fonts Verdana und Lucia Grande die grossen Verlierer. Verdana wurde nur zweimal als Hauptfont benutzt und keiner der beiden Fonts wurde als Fallback-Font definiert. Chaparral Pro und Helvetica sind zunehmend beliebter. Die zunehmende Vielfalt und Individualität des Designs beruht auf der Nutzung von eigenen Fonts und der Nutzung einer grossen Anzahl von verbreiteten Webfonts.

Eine Erkenntnis aus der aktuellen Studie ist, dass "alternative" Fonts bei den Überschriften häufiger vorkommen. Zweifelsfrei ist das Experimentieren mit kleinen Designdetails immer noch die beste Praxislösung. Das "Look & Feel" einer Webseite kann leichter durch die Änderung der Schriftenfamilie für die Überschriften verändert werden als durch drastische Veränderungen im Fliesstext. Trotzdem hat der Gebrauch von alternativen Fonts im Fliesstext dramatisch zugenommen, was zu einer fruchtbareren typografischen Landschaft führt.

Heller oder dunkler Hintergrund?

An Event Apart demonstriert die Lesbarkeit eines gedämpften Farbschemas

Die vorliegende Studie zeigt, dass die grosse Mehrheit an Webseiten dunkle Farben auf hellem Hintergrund bevorzugt. Daran hat sich seit der letzten Studie nicht viel verändert, ausser dass die untersuchten Webseiten in ihren hellen Farbtönen mehr varieren.

Einige Webseiten haben einen weniger aggressiven Hintergrundkontrast. Manche benutzen dunkelgrauen Text auf beigem Hintergrund. Das Hintergrundweiss wird oft zur Schwächung des Kontrastes benutzt. Die Desinger haben sich in diesem Fall für komfortables und langes Lesen entschieden.

Schwarzer Text auf weissem Hintergrund ist das dominierende Muster im Fliesstext. Der Kontrast springt einem direkt ins Auge. Unter diesen Webseiten ist es zumindest der Status Quo.

Durchschnittliche Schriftgrösse für Überschriften

Durchschnittliche Schriftgrösse für Überschriften
Die populärsten Schriftgrössen varieren von 20 bis 32 Pixel

Im Allgemeinen richtet sich die Schriftgrösse der Überschriften nach der Schriftgrösse des Fliesstextes. Es ist dennoch interressant zu sehen, welche Bandbreiten Designer bevorzugen für Fliesstext und Überschriften. In dieser Studie ist die durchschnittliche Überschriftengrösse bei grossen Bildschirmen nahezu 38 Pixel. Natürlich stellten wir sicher, dass der Text immer in der aktuellen Grösse gezeigt wurde, ohne irgendeine Zoomfunktion.

The Great Discontent
Wir gehen hoch hinaus: The Great Discontent mit imponierenden 212 Pixel

Es ist seit der letzten Studie klar zu erkennen: die Schriftgrössen haben sich leicht erhöht. Nicht nur, dass die Durchschnittsgrösse um mehr als 10 Pixel zugenommen hat - die Varianz bei den Überschriftengrössen fängt weiter oben in der Skala an, startet bei 20 Pixel und endet bei imponierenden 212 Pixeln (The Great Discontent). Diese WebSite mit seinen magazin-artigen Headlines und den kleineren Schriftgrössen für die Überschriften ist eine Ausnahme.

Durchschnittliche Schriftgrösse für den Haupttextbereich

Schriftgrösse von Fliesstext
Schriftgrösse im Haupttextbereich

Die durschnittliche Schriftgrösse für den Fliesstext hat in den letzten vier Jahren zugenommen, da zunehmend die Lesbarkeit im Vordergrund steht. Damals waren 12 bis 14 Pixel üblich, heute sind es bereits 14 bis 16 Pixel.

The Verge
The Verge benutzt 14 Pixel als Schriftgrösse. Viele Webseiten nutzen eine grössere Schrift, um den einleitenden Text zu betonen. Nicht so The Verge. Hier wird die strenge Gleichmässigkeit betont.

Das Verhältnis von Schriftgrösse für Überschriften zur Schriftgrösse im Fliesstext

Wir haben unsere Faustregel, basierend auf dem Durschnittswert der Schriftgrössen zwischen Überschrift und Fliesstext, angepasst. Vertrauen Sie nicht blind dieser Regel, sondern berücksichtigen Sie Ihre eigenen Überlegungen in ihrem Projekt.

Überschrift ÷ Fliesstext = 2.5

Gemäss unserer Studie ist das durchschnittliche Verhältnis zwischen Überschrift und Fliesstext ungefähr 2,5. Die traditionelle Skala (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) und die Fibonacci-Reihe (16, 24, 40, 64, 104) ist natürlich immer noch relevant und repräsentiert einen mehr naturalistische Annäherung. Der goldene Schnitt mag auch einen eher organischen Effekt ausüben. 

Optimale Zeilenhöhe für den Fliesstext

Die Zeilenhöhe hängt immer von Ihrer Schriftgrösse oder Zeilenlänge ab. Im Allgemeinen je länger die Zeilenlänge, desto grösser sollte die Zeilenhöhe sein. Deshalb macht es Sinn, hier eine Grafik mit den populärsten Zeilenhöhen in Pixel zu präsentieren. Ebenfalls zu berücksichtigen wäre vielleicht der Gebrauch von realtiven Einheiten, wie z.B. em oder Prozentwerte, welche das Verhältnis zwischen Zeilenhöhe und Zeilenlänge und zwischen Zeilenlänge und Schriftgrösse zeigt.

Diese Studie zeigt uns folgendes:

  • Zeilenhöhe (px) ÷ Schriftgrösse im Fliesstext (px) = 1.46
    Die klassische Typografie in Büchern empfiehlt einen Wert von 1,5 - einen Wert, der in unserer letzten und in der aktuellen Studie bestätigt wurde. Nur wenig Webseiten benutzen einen kleineres Verhältnis.

  • Zeilenlänge (px) ÷ Zeilenhöhe (px) = 24,9
    Die durschnittliche Zeilenlänge beträgt 570 Pixel (ohne Margins und Paddings) und ist im Vergleich zur Schriftgrösse und Zeilenhöhe seit 2009 (22.9) weniger stark angestiegen. Die durchschnittliche Zeilenlänge ist seite 2009 (538.64 px) um ca. 5% angewachsen, währendem die durchschnittliche Zeilenhöhe von 12px (2009) auf 13px (2013) angestiegen ist.

  • Abstand zwischen den Absätzen (px) ÷ Zeilenhöhe (px) = 1.39
    Die erste Studie zeigte, dass die Abstände zwischen den Absätzen selten der Zeilenhöhe entsprach. Unsere Ergebnisse zeigen, dass der Abstand zwischen den Absätzen ca. 1,39 x der Zeilenhöhe in den Absätzen entspricht. Absätze werden klarer durch ein grösseres Verhältnis abgegrenzt und erhöhen dadurch die Lesbarkeit.

Wenn Sie Schriftgrösse für den Fliesstext mit 1.46 multiplizieren, erhalten Sie den optimalen Wert für die Zeilenhöhe. Wird dieser neue Wert abermals mit 24,9 multipliziert, erhält man die optimale Zeilenlänge. Natürlich braucht das Layout auch genügend Abstände (margins, paddings, borders) damit der Textbereich atmen kann.

Zeichen pro Linie

Wie schon Robert Bringhurst erklärte, die klassische Regel der Webtypografie bestimmt die optimale Anzahl Zeichen pro Linie: 55 bis 75. Unsere Studie zeigt für grosse Bildschirme (ab 1100 Px), dass der aktuelle Wert (ohne Zoom und mit der Default-Standard-Schrift) im Durschnitt 83.8 Zeichen pro Zeile beträgt. 

Dieser Mittelwert schwankt signifikant mit der Grösse des Displays bzw. der Grösse des Browserfensters. Der Wert ist zwischen 83 und 86 Zeichen pro Linie für Displays oder Views von 700, 950 und 1600 Pixel Breite. Nur bei schmaleren Views von 500 Pixel oder weniger greift die klassische Regel der Webtypografie. Der Wert beträgt dann 77 Zeichen pro Linie.

Dieser Wert erklärt sich wahrscheinlich aus dem Umstand, dass Designer die Schriftgrösse in Einklang mit der Textfülle auf kleinen Bildschirmen bringen wollen. Je mehr Zeichen pro Linie gesetzt werden, desto kleiner wird die Schriftgrösse, was den Lesekomfort etwas beeinträchtigt.

Zeichen pro Linie
Zeichen pro Linie

Die meisten Designer bleiben im Bereich von 75 bis 90 Zeichen pro Linie, wobei der Höchstwert natürlich viel höher liegt. Extremwerte liefert z.B. SB Nation mit 55 Zeichen pro Linie. Polygon bringt es auf 118 Zeiche für den einleitenden Absatz. Exaktere Resultate erhält man, wenn mehrere Zeilen den Duchrschnittswert liefern. Eine solche tiefe Analyse würde jedoch nicht stark von unseren berechneten Werten abweichen. Dennoch ist die Diskrepanz zwischen der Anzahl Zeichen zu verschiedenen Breiten seltsam.

Polygon
Polygon zeigt mehr Zeichen pro Linien im einführenden Absatz, als im Rest des Artikels. Auch die Schriftgrösse ist grösser

Web Typografie und Responsive Design

Eine brennende Frage wollten wir klären: welche Auswirkungen hat das Responsive Design auf die aktuelle Webtypografie? Das Resultat überraschte: 22 von 52 (42%) Webseiten zeigten kleine oder grössere Abweichungen, wenn das Browserfenster verändert wird. Wenn man beachtet, dass das Responsive Webdesign erst seit ca. 2 Jahren genutzt wird, so erstaunt dieser Anteil. Wir berechneten die Anzahl Zeichen pro Zeile, die allgemeine Textgrösse und die Überschriften für fünf Browserfenstergrössen (und experimentierten auch mit der Höhe des Browserfensters) 500, 700, 950, 1100 und 1600 Pixel. Die Schriftgrössen für diese drei Werte unterscheiden sich nicht wesentlich von den Bildschirmgrössen - mit Ausnahme des 500-Pixel-Darstellung.

Unerwartet waren die visuellen Änderungen, die während der Veränderung des Browserfensters auftraten. Markante Veränderungen im Layout, Bildskalierung, Inhalt und Schriftgrösse waren auf 22 Webseiten in verschiedenem Ausmass erkennbar. Einige Änderungen sind gering, wie z.B. das Skalieren der Bilder, so dass sie auf den Bildschirm passten. In einigen anderen Fällen zeigten die Webseiten kleinere oder erwartet Änderungen. In der 500-Pixel-Darstellung wird das Menü oft durch ein Icon ersetzt. Mehrspaltige Darstellungen werden auf eine Spalte reduziert und beides - Bild und Schriftgrösse wird skaliert.

Auf 30 Weseiten fanden wir keinen Hinweis auf Responsive Design, auch in der The Financial Times und The Economist. Zumindest gab es dort eine Option um zur einer mobilen WebSite umzuschalten oder ein App zu laden. The Financial Time lädt die Besucher sofort ein ihr App FT App zu laden. Momentan scheinen grosse online Publikationen mehr Geld in ein App zu investieren als in Responsive Design. Mit der Zeit wird sich jedoch die Frage stellen, ob Besucher nicht verägert werden, wenn diese genötigt werden für jede gewünschte Publikation ein mobiles App auf ihr Smartphone zu laden.

Trotzdem sind wir froh, dass die meisten WebSites nicht auseinanderbrachen, als wir hinein "zoomten".

Einige Zahlen zur Implementation von Responsive Design

42% aller Webseiten implementieren Responsive Design. Layout, Bilder, Inhalt und Schriftgrösse passen sich an.

Bei einer Display-Breite von 500 Pixel sehen wir Folgendes:

  • Durchschnitts-Zeilenhöhe: 28 px
  • Durschnitts-Schriftgrösse im Fliesstext: 15 px
  • Anzahl Zeichen pro Linie im Durchschnitt: 77

Bei einer Display-Breite von 700 Pixel sehen wir Folgendes:

  • Durschnittliche Schriftgrösse von Hauptüberschriften: 36px
  • Durschnitts-Schriftgrösse im Fliesstext: 15.6 px
  • Anzahl Zeichen pro Linie im Durchschnitt: 82.7

Bei einer Display-Breite von 950 Pixel sehen wir Folgendes:

  • Durschnittliche Schriftgrösse von Hauptüberschriften: 37.9px
  • Durschnitts-Schriftgrösse im Fliesstext: 16.1 px
  • Anzahl Zeichen pro Linie im Durchschnitt: 84.4

Bei einer Display-Breite von 1600 Pixel sehen wir folgendes:

  • Durschnittliche Schriftgrösse von Hauptüberschriften: 40.7px
  • Durschnitts-Schriftgrösse im Fliesstext: 16.2 px
  • Anzahl Zeichen pro Linie im Durchschnitt: 86.8

Diese Durschnittswerte sind ev. verzerrt, weil wir responisve Webseiten mit nicht-responsive Seiten verglichen haben. Aber sie zeigen, wie wenig die Schriftgrössen und die Anzahl Zeichen pro Linie mit der Breite varieren. Die einzige Ausnahme ist die 500 Pixel Breite, wo wir weniger Zeichen pro Linie finden.

Performanzüberlegungen

Währenddem eingebettete Fonts langsam zu einem de facto Standard im Webdesign werden, verursachen sie jedoch auch Probleme bei der Performanz, weil die Fonts jeweils eingebunden werden, d.h. geladen werden müssen.

Chris Coyier sprach neuerlich die Idee an nur Webfonts für grosse Bildschirme zu laden, um damit Performanzprobleme zu vermeiden. Man könnte auch Webfonts im AppCache oder lokal laden und sie erst auf den Folgeseiten zeigen.

Darüber hinaus könnte man Google's WebFont Loader benutzen, um sicher zu stellen, dass die Fallbackschriften zuerst geladen werden und erste dann die komplett geladenen Webfonts folgen (das implementieren wir jetzt gerade).

Unsere Studie zeigt, dass Webfonts tatsächlich einen Flaschenhals darstellen mit zusätzlichen 133.5 KB Bandbreitenverschleiss, wenn 5 - 6 Webfonts geladen werden. In Fällen wo nur eine langsame Internetverbindung besteht, würde der Besucher zuerste gar nichts sehen, ausser Links. Der Text wird erst sichtbar, wenn er geladen würde und sogar dann, würden einige Elemente erst nach und nach erscheinen (Überschriften h1, dann h2, dann Fliesstext). Wir können diesen negativen Effekt vermeiden, indem wir "CSS font stack" verwenden, wie uns das Richard Rutter hier erklärt: “Responsive Web Fonts” (slidedeck).

Weitere Erkenntnisse

  • 45% aller Webseiten benutzen unterstrichene Links im Fliesstext. In den Nebenbereichen werden die Links bei "mouse-over" angezeigt oder sind nicht als Links erkenntlich.
  • 71% aller Webseiten benutzen "highlight links" mit Farben.
  • 99% aller Webseiten sind linksbündig ausgerichtet
  • Keine Webseite nutzt die Silbentrennung.
  • 84% aller Webseiten benutzen die gleichen Fonts im  Standardlayout und im Printlayout
  • Die durchschnittliche Ladegrösse einer Homepage beträgt ca. 1.346 MB. Die Folgeseiten sind etwas leichter mit ca. 1.146 MB

Fazit

Diese Studie zeigt eine ganze Reihe von Gemeinsamkeiten in der Web-Typografie. Diese Ergebnisse haben keinen "rechtsbindenden" Charakter. Sie sollten nicht als “best practices” ausgelegt werden, sondern nur als grobe Richtlinie zur Kenntnis genommen werden. Die Studie ist nur eine Momentaufnahme und mag in einem Jahr schon wieder veraltet sein.

  • Serifen-Schriften sind für beide Überschriften und Fliesstext beliebter als Sans-Serifen. Es ist jedoch ein Trend zum Mischen von Sans-Serifen und Serifen erkennbar, um den Effekt zu kontrastieren.
  • Die meist verbreitetsten Schriftarten für Überschriften sind Georgia, Arial und Chaparral Pro. Aber die Mehrheit der Websites sind individualisiert und benutzen wenig populäre Schriftarten.
  • Die häufigsten Schriften für Fliesstext sind Georgia, Arial und Helvetica. Aber noch einmal:  die Mehrheit der Websites sind individualisiert und benutzen weniger gängige Schriftarten.
  • Die beliebteste Schriftgrösse für Überschriften beträgt zwischen 29 und 32 Pixel
  • Die beliebteste Schriftgrösse für Fliesstext beträgt zwischen 14 und 16 Pixel.
  • Headline-Überschrift Schriftgrösse ÷ Fliesstext Schriftgrösse = 2.4
  • Zeilenhöhe (pixels) ÷ Schriftgrösse Fliesstext (pixels) = 1.47
  • Zeilenlänge (pixels) ÷ Zeilenhöhe (pixels) = 24.8
  • Abstand zwischen Absätzen (pixels) ÷ Zeilenhöhe (pixels) = 1.43
  • Die optimale Anzahl von Zeichen pro Zeile ist zwischen 55 und 75, aber die Anzahl Zeichen pro Zeile zwischen 75 bis 90 wird immer beliebter.
  • Fliesstext wird links ausgerichtet. Silbentrennung wird am Zeilenende nicht verwendet. Die Links sind unterstrichen und / oder markiert mit fett oder Farbe, manchmal nur bei "mouse-over".
  • Webseiten mobiler Geräte werden meist mit ansprechendem Design angepasst. Für einige Publikationen existiert ein eigenes App.

Die Entscheidung typografische Element zu variieren, liegt immer beim Designer. Viele Erkenntnisse aus dieser Studie sind wahrscheinlich  aus Versuch und Irrtum entstanden. Bei der Gestaltung einer neuen Website können Sie diese Parameter übernehmen und an Ihr Layout anpassen. Fühlen Sie sich frei und überprüfen Sie die Rohdaten für diese Studie.

Wie wir am Anfang erwähnten, wird sich der zweite Artikel in dieser Serie mit den Feinheiten von eBook-Readern und mobilen Apps beschäftigen. Wir erwarten aber nicht sehr unterschiedliche Ergebnissen. Allerdings glauben wir, dass Apps mehr Interaktivität für den Benutzer bieten. Es wird interessant werden, zu sehen, wiel viele Möglichkeiten die Entwickler von mobilen Apps nutzen werden. 

 


Dieser Text wurde "frei" übersetzt, Quelle: The Smashingwebmagazine
Typographic Design Patterns And Current Practices (2013 Edition) - By Jan Constantin. 

Zurück

Einen Kommentar schreiben

Kommentar von glawi03 |

Das Webdesign sollte neben dem responsive Design auch bestimmte Faktoren umsetzen, wie im Artikel beschrieben. Es ist sehr wichtig, dass die richtige Schriftart gewählt wird. Zudem sollte vom Webdesigner auch der richtige Hintergrund gewählt werden. Genau das sollte jede Marketingagentur kennen und den Kunden mitteilen können.

Kommentar von Matthias |

Verhältnis Überschrift zur Schriftgröße 2,5? Das wäre bei Textgröße 16 ja eine Überschrift von 40!! Kann das sein?

Antwort von Christian Homberger

... 40px finde ich auch etwas gross. Schlussendlich entscheidet die Vernunft. 

Kommentar von Tobey86 |

Bei uns wird im repsonsive Webdesign sehr stark auf die Schriftart eingegangen. Wir haben aber nun eine sehr schöne Schrift für Info-Texte gefunden die auf allen möglichen Geräten zur Geltung kommt.