Abro, Oktober 2009

Korrekte Typografie für’s Web mit HTML

Ansatzweise korrekte Typografie ist in Zeiten von UTF-8 und post-HTML4 gar nicht mehr so schwierig. Ich bin im Bezug auf Fehler sicher auch kein Waisenkind, aber an Kundenwebsites sollte man dann doch so lange feilen, bis auch die Berufstypografen nicht mehr gleich weinend in die Ecke rennen.

Selbstverständlich gelten im Web nicht die strikten Regeln, wie sie in Printmedien gang und gäbe sind. Vorallem auch, da wir Damen und Herren Webentwickler ein wenig anders ticken. So sieht man einige dieser Macharten in IT-Büchern oftmals absichtlich übergangen. Für Programmierer ist es halt nicht logisch den Punkt für’s Satzende mit in die beklammerte Abschlussbemerkung zu schreiben.

Meine Typografie-Tipps habe ich nur mal hier und da herausgepickt. In der Hoffnung, dass mein Artikel noch einigermaßen übersichtlich ist, geht mein ganz besonderes Dankeschön an Mr. Webtypografie aka Gerrit und Michael Jendryschik.

Dimensionen für die Lesbarkeit

  • Ein Zeilenabstand von mindestens 130% / 1.3em ist Pflichtprogramm, wenn man nicht manchen geneigten Leser dazu zwingen will die Augen zusammen zu kneifen. Mehr ist mehr.
  • Die Zeilenlänge sollte max. 70 Zeichen betragen. Mehr kann man schlecht lesen, das wussten auch schon die Entwickler der Shell. Außerdem entsprechen 70 Zeichen in meiner IDE genau der Breite einer DIN-A4 Seite beim Drucken ;o)
  • Elastische Layouts sind bei richtiger Handhabung etwas tolles. Da meist aber nicht die Zeit ist (und die Kunden den Sinn nicht sehen), arbeiten wir ja meist doch mit Mischformen zwischen fix, fluid und elastisch. Als Faustregel gillt: Bei zweifacher Schriftvergrößerung muss das Design noch normal aussehen.

Text-Ausrichtung gegen Verwirrung

  • Solange nicht Arabisch geschrieben wird, sollte Fließtext linksbündig sein. Nach meiner persönlichen Auffassung trifft das auch auf den Einzug der ersten Zeile eines Absatzes zu. Ich find’s einfach nicht schön und fühle mich im Lesefluss gestört.
  • Blocksatz sieht natürlich manchmal ganz toll Zeitungsmäßig aus, ist aber im Web fehl am Platz, denn es funktioniert nicht vernünftig.
  • Vergesst &nbsp; generell und vergesst <br /> so weit es geht. Semantisch tut es weh und bei größerer Schrift zerbröseln die Absätze.
  • Spielereien bitte nur bei Überschriften. Sinnvoll ist sicherlich trotzdem für eine Überschrift auch nur eine Zeile zu nutzen.

Satz- und Sonderzeichen als Typografen-Chic

  • Typografisch korrekte Anführungszeichen/Bindestriche/etc. für viele Sprachen finden sich im Punctuation Cheat Sheet von Jens Meiert. HTML-Entities sind nicht gelistet, denn UTF-8 rockt ja normalerweise. Da ein &ndash; im Sourcecode aber schlecht vom klassischen Minus zu unterscheiden ist, sollte man da doch mal eine Ausnahme machen.
  • Über Groß- und Kleinschreibung müssen wir nicht reden, oder? Mehr als vier Worte in Majuskeln / Kapitälchen will keiner lesen.
  • Satzzeichen nach Hyperlinks sollten nicht im Link stehen. (Egal ob der Linktext eine URL ist, oder ein Wort).
  • Das Kaufmannsund (&) ist immer als &amp; im HTML zu deklarieren, sonst wird’s nichts mit dem Validator. Das gillt übrigens auch für selbige in URLs, in Attributen wie href und src.
  • Klammern um fette / kursive Anmerkungen im normalen Stil belassen. Sind die Klammern um einen, oder innerhalb eines sowieso fetten / kursiven Absatzes, sind natürlich auch diese so auszuzeichnen.
  • Drei Punkte ersetzen kein Auslassungszeichen (…/&hellip;). Steht es am Satzende kommt dann da nicht auch noch ein Punkt hin. Drei reichen doch. Sollte danach ein anderes Satzzeichen auftreten, steht zwischen beiden kein Leerzeichen.
  • Der Gedankenstrich ist im deutschen immer der &ndash; mit Leerzeichen zu beiden Seiten. Er wird neben dem normalen Schreibgebrauch auch als Kurzschreibweise bei der Darstellung gegnerischer Parteien z.B. im Fußball verwendet (Wikipedia rät ausnahmsweise zum beidseitigen &nbsp;), bei Zeitraum- und Streckenangaben (wobei beide Leerzeichen entfallen) und bei Preisangaben (dort enfällt natürlich das vordere Leerzeichen).
  • Für typografische Anführungszeichen gillt im deutschen die 99-66-Regel. Eben weil die korrekten Anführungszeichen so aussehen: „Quote“ (&bdquo;/&ldquo;). Abweichend davon dürfen auch die spitzfindigen Geschwister verwendet werden: »Quote« (&raquo;/&laquo;).
  • Das Apostroph ist doof, denn auch dieses gibt es auf keiner Taste: Lucido Media’s komische Typografie (&rsquo;).
  • Alle nötigen Brüche gibt’s leider nicht im ursprünglichen HTML. ¼, ½, ¾ (&frac14;/&frac12;/&frac34;) – das war’s dann aber auch. Ausweg wäre nur der normale Slash, wenn es Unicode nicht gäbe.

Farben auf die Lettern für Barrierefreiheit

  • Ausreichend Kontrast ist unabdingbar. Das hilft jedem bei kleinen Schriften und optisch eingeschränkten sowieso. Mehr Informationen und viele Links dazu gibt’s unter dem schönen Titel Kontrastreiche Farbwelten, bei den Webkrauts.
  • Hyperlinks sollten in jedem Zustand eine definierte Farbe haben, die sich klar vom umgebenden Text abhebt. Eine andere Schriftfamilie reicht nicht. Typolexikon.de lässt einen da erstmal im Unklaren.

Der obligatorische Tellerrand zum Schluss

So, und jetzt will ich mehr tolle Typografie in unserem Web sehen!



8 kreative Kommentare

  1. […] Korrekte Typografie für’s Web mit HTML […]

  2. Blogcrafter Chris, 27.11.2009 17:50h

    Wie, es gibt kein Apostroph? Was ist denn mit dem Zeichen auf der #-Taste? Ich dachte immer, das ist genau deswegen da.

    Aber auf jeden Fall eine schöne Zusammenstellung, die kurz und knackig über alles Wichtige informiert.

    Problem auf anderer Baustelle: CMS/Blogsysteme wie z. B. WordPress helfen einem da sehr ungern und formatieren auch selbst einfach mal um, mit manchmal seltsamen Resultaten.

    Bei Kundenprojekten wäre ich übrigens schon erfreut, wenn vor der korrekten Typo auch bereits die Rechtschreibung und Grammatik korrekt wären; wer es letztendlich verbrochen hat, ist mir wurscht, aber ein Kontrollblick könnte man ja schon mal drauf werfen.

    Achja, ich würde noch darauf hinweisen, dass » und « gern auch missbraucht werden, was auch schade ist.

  3. Abro, 28.11.2009 01:39h

    Nun da muss ich mich kurz korrigieren: das Zeichen über der Rautetaste ist nur unter MAC typografisch (kannte ich bis gerade auch nicht, bin halt PC-Nutzer). Danke für’s Nachhaken.
    Wie im Punctuation Cheat Sheet zu erkennen, ist » « landläufig aktzeptiert. Persönlich finde ich es im Deutschen aber auch nicht schön.

  4. […] “Korrekte Typografie für’s Web mit HTML” – OpenMinds Projekt […]

  5. Torsten, 02.03.2010 13:30h

    “Blocksatz sieht natürlich manchmal ganz toll Zeitungsmäßig aus, ist aber im Web fehl am Platz, denn es funktioniert nicht vernünftig.”

    Zu diesem Absatz fehlt die Info warum es nicht vernünftig funktioniert. Die Browser haben nämlich keine Silbentrennung, so dass bei einem Blocksatz der Ausgleich durch unverhätnismässig große Wortabstände hergestellt wird und der Text “zerrissen” aussieht.

    Shift+# ist auch am Mac nur das Minutenzeichen und kein typograpisches einfaches Anführungszeichen, das ist unter Alt+# am Mac zu finden und kann als Ersatz für das Apostroph benutzt werden. Das echte Apostroph ist in den meisten Fällen in der Schrift nicht eingebaut.

    Für WordPress gibt es dafür übrigens das Intypo-Plugin:
    http://dossier.dunker.de/intypo

    Gruß, Torsten

  6. Abro, 03.03.2010 06:06h

    Oh der IE hat schon Silbentrennung, mir hat das jetzt einfach zu weit geführt.

    Apostroph unter MAC siehe http://de.wikipedia.org/wiki/Apostroph – sollte der Artikel sachlich falsch sein bitte updaten ^-^

  7. wellenreiter, 16.09.2010 15:59h

    Viiiiielen, vielen Dank! Deine Zeilen haben mich wieder aufblicken lassen! :D

  8. Katie, 02.04.2011 12:10h

    Vor dem Gedankenstrich ist ein &nbsp; zu empfehlen, dahinter eine normale Leertaste, damit der Gedankenstrich beim Umbruch immer schön am Ende einer Zeile bleibt.
    Und die Meinung zur Klammerregelung teile ich nicht. Bei mir wird die Klammer i.d.R. an den inkludierten Text angepasst, damit ein harmonisches Bild entsteht und nicht spationiert werden muss. Aber darüber sind ja schon Forssmann/de Jong und Bringhurst unterschiedlicher Auffassung ;-)

Kommentare sind geschlossen.
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Label 00SEO GbR fort. Zur Beauftragung von Arbeiten wenden Sie sich daher bitte an http://00seo.de/