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. Vor allem 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.
Inhaltsverzeichnis
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, dass 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 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 – 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 & 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 (…/…). 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 – 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 ), bei Zeitraum- und Streckenangaben (wobei beide Leerzeichen entfallen) und bei Preisangaben (dort enfällt natürlich das vordere Leerzeichen).
- Für typografische Anführungszeichen gilt im deutschen die 99-66-Regel. Eben weil die korrekten Anführungszeichen so aussehen: „Quote“ („/“). Abweichend davon dürfen auch die spitzfindigen Geschwister verwendet werden: »Quote« (»/«).
- Das Apostroph ist doof, denn auch dieses gibt es auf keiner Taste: Lucido Media’s komische Typografie (’).
- Alle nötigen Brüche gibt’s leider nicht im ursprünglichen HTML. ¼, ½, ¾ (¼/½/¾) – 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
- Typografische Anführungszeichen mit CSS – Erlaubt ist was gefällt.
- Ich müsste jetzt eigentlich eine tolle PHP-Klasse verlinken. Ist halt leider schwierig wenn’s nicht nach den US-Regeln gehen soll. Probiert mal die von Kingdesk aus.
- Typo Timeline – Seit wann gibt es welche Schrift?
So, und jetzt will ich mehr tolle Typografie in unserem Web sehen!
Bewerte diesen Artikel
20 Bewertung(en), durchschnittlich: 5,00 von 5
Loading...
