Skip to content

Typefacts-Check: Deutsche News-Sites 2011

Typefacts ist stets bemüht, das typografische Niveau im deutschsprachigen Raum anzuheben – doch gibt es überhaupt Bedarf? Der erste Typefacts-Check soll etwas Licht ins Dunkel bringen und widmet sich den (laut Alexa-Deutschland-Ranking) zehn wichtigsten deutschsprachigen News-Websites – mit überraschendem Ergebnis …

Typefacts-Check: Deutsche News-Sites 2011

Wie ist es um die typografische Qualität der Haupt­informations­quellen für Nachrichten im Internet bestellt?

Die Frage lautet also: Wie ist es um die typografische Qualität der Haupt­informations­quellen für Nachrichten im Internet bestellt? Meiner Meinung nach sollte sich Qualitätsjournalismus auch in Qualitätstypografie widerspiegeln, und deshalb habe ich mir die Seiten genau unter die Lupe genommen. (Am Ende des Artikels werden die Kriterien erläutert)

Meine Rangliste:

 

  1. Focus Online (Alexa-Rang 52)
    Note 2
    Focus
    • Schriften: Arial/Arial
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: ✓ [„“]
    • Korrekter Gedankenstrich: ✓
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« (✓) | »Raúl« (✓) | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 2+
  2.  

  3. Welt Online (Alexa-Rang 38)
    Note 2−
    Welt Online
    • Schriften: Georgia/Arial
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: ✓ [„“]
    • Korrekter Gedankenstrich: ✓
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« (✓) | »Raúl« (✓) | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 3+
  4.  

  5. Zeit Online (Alexa-Rang 76)
    Note 2−
    Zeit
    • Schriften: Arial/Georgia
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: (✓) [»«, aber auch ""]
    • Korrekter Gedankenstrich: ✓
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« (✓) | »Raúl« (✓) | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 2−
  6.  

  7. FAZ.net (Alexa-Rang 72)
    Note 3+
    faz.net
    • Schriften: Verdana/Verdana
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: ✓ [„“]
    • Korrekter Gedankenstrich: ✗
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« (✓) | »Raúl« (✓) | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 2−
  8.  

  9. Spiegel Online (Alexa-Rang 8)
    Note 3
    Spiegel Online
    • Schriften: Verdana/Verdana
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✗ (ISO-8859-1)
    • Korrekte Anführungszeichen: ✗
    • Korrekter Gedankenstrich: ✗
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« ✓ | »Raúl« ✓ | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 2+
  10.  

  11. sueddeutsche.de (Alexa-Rang 32)
    Note 3
    sueddeutsche.de
    • Schriften: Arial/Arial
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: ✗
    • Korrekter Gedankenstrich: ✗
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« ✓ | »Raúl« ✓ | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 2+
  12.  

  13. tagesschau.de (Alexa-Rang 66)
    Note 3−
    tagesschau
    • Schriften: Verdana/Verdana
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: ✗
    • Korrekter Gedankenstrich: ✗
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« ✓ | »Raúl« ✓ | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 2−
  14.  

  15. n-tv.de (Alexa-Rang 84)
    Note 3−
    n-tv.de
    • Schriften: Arial/Arial
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: ✗
    • Korrekter Gedankenstrich: (✓)
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« (✓) | »Raúl« (✓) | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 3+
  16.  

  17. Bild.de (Alexa-Rang 10)
    Note 4+
    Bild
    • Schriften: Arial/Arial
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✓
    • Korrekte Anführungszeichen: ✓ [„“]
    • Korrekter Gedankenstrich: (✓)
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« (✓) | »Raúl« ✗ | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 5
  18.  

  19. stern.de (Alexa-Rang 47)
    Note 4+
    Stern
    • Schriften: Georgia/Arial
    • Webfonts: ✗
    • Flattersatz: ✓
    • UTF-8-Kodierung? ✗ (ISO-8859-1)
    • Korrekte Anführungszeichen: ✗
    • Korrekter Gedankenstrich: ✗
    • Eigennamen mit Akzentbuchstaben?
      »Franck Ribéry« (✓) | »Raúl« ✗ | »Srđan Lakić« ✗
    • Note für Makrotypografie/Leseanreiz: 3+

Fazit

Es liegt noch einiges brach auf den deutschen Top-News-Sites! Keine einzige Seite nutzt die Webfonts-Technologie, um ihr Print-Erscheinungsbild ins Netz zu übertragen. Es gibt keine Seite, die sowohl mikrotypografisch überzeugt als auch konsequent sorgsam mit fremdsprachlichen Eigennamen umgeht. Immerhin ist der Blocksatz nirgends zu finden und fast alle können mit ordentlicher Makrotypografie punkten. Trotzdem: Ein Besuch bei Typefacts sollte für alle Seitenbetreiber lohnen.

Kriterien

  • Schriften: Welche Schriftarten kommen zum Einsatz in Überschriften/Fließtext?
  • Webfonts: Finden andere Schriften als Systemschriften Verwendung?
  • Flattersatz: Blocksatz ist im Internet ein No-Go.
  • UTF-8-Kodierung? Eine Voraussetzung für barrierefreie, gute Mikrotypografie ist die UTF-8-Zeichenkodierung.
  • Korrekte Anführungszeichen: Werden korrekte Anführungszeichen („“ oder »«) verwendet statt der unsäglichen "doppelten Strichlein"? → Anführungszeichen
  • Korrekter Gedankenstrich: Wird der Gedankenstrich verwendet oder der olle Bindestrich? → Binde- & Gedankenstrich
  • Eigennamen mit Akzentbuchstaben? In drei Stufen wird getestet, ob der Website die korrekte Schreibung von fremdsprachlichen Eigennamen wichtig ist. Das é kennt aus Café und co fast jeder und bekommt es auch hin, das ú ist schon etwas exotischer, aber dennoch ebenso einfach über die Tastatur erreichbar. Die außergewöhnlichen Zeichen đ und ć können über die deutsche Tastatur nicht direkt erreicht werden. → Tastaturkürzel | Workshop: Sonderzeichen einfügen
  • Note für Makrotypografie/Leseanreiz: Hier vergebe ich rein subjektiv ein Note, wie sehr mich die Seite anlacht und zum Lesen einlädt.
  • Bei einem (✓) wurden sowohl richtige als auch falsche Schreibweisen gefunden.

Nein,

es gibt hier nicht nur noch Top-Ten-Listen.

Kommentare (6) [abonnieren]

  1. 1 | Peter Hellinger | 17.02.2011 09:11

    Ich hätte ganz gerne mal gewusst, warum Blocksatz im Internet ein »No-Go« sein soll. Zum Blocksatz gehört natürlich eine vernünftige Silbentrennung, sonst sieht es wirklich Käse aus.

    Mich persönlich stört in längeren Text der Flattersatz ganz erheblich beim Lesefluss.

  2. 2 | Christoph | 17.02.2011 09:46

    Ok, laß es mich »Blocksatz ohne Silbentrennung« nennen. Und die ist eben nicht so ohne weiteres möglich (gerade auf Websites, die nicht mal einen Gedankenstrich hinkriegen).
    Und selbst mit Silbentrennung haut es auch nicht automatisch hin, wie die Zitate und kurzen Texte auf Deiner Website zeigen …

  3. 3 | Typografie | 17.02.2011 10:36

    Um Silben auf Webseiten vernünftig zu trennen, kann ich den »Javascript Hyphenator« empfehlen. http://code.google.com/p/hyphenator/

    Allerdings wäge ich immer ab ob es wirklich sinnvoll ist, da die Performance der Webseite schon ein bisschen leidet.

  4. 4 | Peter Hellinger | 17.02.2011 10:58

    @Christoph: Ich bin ja noch am optimieren. :-) Automatische Silbentrennung ist halt nicht immer treffsicher und die Problemfälle muss man von Hand eben optimieren. Eigentlich müsste sowas der Browser machen, aber da sind wir wohl noch meilenweit entfernt.

    Dass Blocksatz ohne Silbentrennung furchtbar ist, das sind wir uns ja einig.

    @Typografie: Der Hyphenator ist bei mir im Einsatz, wobei ich überlege, die Texte von Haus aus schon mit den richtigen Trennzeichen zu versehen, um den Javascript-Kram wieder los zu werden. Es gibt ja eine Online-Version, wo man sich den Text fertig hinbasteln lassen kann. Cut/Copy/Paste ist ja wieder groß in Mode …

  5. 5 | Christoph | 17.02.2011 22:44

    @Georg: Der Hyphenator ist auf jeden Fall eine interessante Sache, danke!

    @Peter: Das Problem mit dem Blocksatz sind vor allem zu kurze Zeilen. Die Silbentrennung kann noch so gut sein, da reißt es einfach Löcher, die den Lesefluß schlimmer stören als jede Flatterkante. Siehe meinen Artikel zur Zeilenlänge.

  6. 6 | Robert | 27.08.2011 14:56

    Hi Christoph,
    ich befasse mich erst kurz intensiver mit Typografie und bin eigentlich wegen Zeit Online darauf gekommen, da die ansonsten wenig grafische Elemente einsetzen. Dass es aber doch über das grafische hinaus nicht soo toll ist, hat mich jetzt schin etwas verwundert. Danke auch für die Begründung darunter, war sehr lehrreich.

Kommentieren

Deine E-Mail-Adresse wird streng vertraulich behandelt.
Pflichtfelder sind mit rotem Sternchen (*) markiert.