„Professional Web Typography“: Ratgeber für die perfekte Webtypografie

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Der richtige Umgang mit Typografie will gelernt sein. Schriftauswahl, Lesbarkeit und die Berücksichtigung der typografischen Regeln gehören zu den wichtigsten Dingen, die man auch als Webdesigner beherrschen sollte. Denn dank Webschriften und CSS3 wird der Umgang mit Typografie auch im Web immer komplexer. Der umfangreiche Ratgeber „Professional Web Typography“ hilft, sowohl technische als auch ästhetische Gesichtspunkte im Umgang mit Typografie zu beachten.

professional-web-typography

Die richtige Schrift auswählen und formatieren

Lesbarkeit ist einer der wichtigsten Faktoren bei der Wahl der richtigen Schrift. Zwar sollte man Schriften nicht ausschließlich aufgrund ihrer Lesbarkeit auswählen, aber gerade für lange Fließtexte ist es wichtig, dass das Lesen nicht anstrengt. Hier hilft „Professional Web Typography“ mit einigen Ratschlägen, worauf man achten sollte. Die richtige Höhe der Mittellänge und der Öffnungen von Punzen spielen dabei ebenso eine Rolle wie der richtige Zeichenabstand.

professional-web-typography_spacing
Der richtige Zeichenabstand

Während beim Fließtext die Lesbarkeit besonders wichtig ist – gerade in Zeiten von Smartphones mit oft sehr kleiner Schriftgröße –, können bei Überschriften andere Faktoren stärker gewichtet werden. Auch hier hilft der Ratgeber bei der Auswahl von Schriften und wie man verschiedene Schriften – zum Beispiel für Überschriften und Fließtexte – gut miteinander kombiniert.

Darüber hinaus gibt es Anleitungen, wie man Schriften – Absätze, Listen etc. – per CSS formatiert. Welche Schriftgrößen sollte man wählen und welche Einheiten dafür bieten sich an? Auch diese Fragen werden beantwortet.

Schriften für Bedienoberflächen

Ein besonderes Augenmerk wirft „Professional Web Typography“ auf die Gestaltung von grafischen Bedienoberflächen. Denn hierbei gelten wiederum ganz eigene Regeln: Lesbarkeit, Bescheidenheit und Flexibilität sind hier die drei entscheidenden Faktoren, die in einem eigenen Kapitel besonders vorgestellt werden.

Wie auch in den anderen Kapiteln gibt es hierbei einige konkrete Beispiele für gut und weniger gut passende Schriften. Anhand dieser Beispiele erhält man einen sehr schönen und konkreten Eindruck, unter welchen Bedingungen eine Schrift wirkt und wann sie nicht eingesetzt werden sollte.

Typografie im Detail

Wer sich mit Typografie beschäftigt, wird schnell mit den unzähligen Details konfrontiert, die man berücksichtigen muss. Da gibt es die Unterscheidung zwischen Gedanken- und Bindestrich sowie zwischen verschieden breiten Leerzeichen. Es gibt deutsche und französische Anführungsstriche, falsche Anführungsstriche sowie echte und falsche Kapitälchen.

professional-web-typography_quotes
Korrekte Anführungszeichen

Hier wird aufgeklärt und erläutert, wann welche Zeichen eingesetzt werden. Außerdem gibt es zu jedem Zeichen gleich die dazugehörigen HTML-Entitäten sowie die Zeichenkombinationen für Windows und Mac. Denn auf der Tastatur findet man die meisten dieser Zeichen nicht.

Auch Dinge wie schmückende Initiale am Beginn eines Absatzes und wie man diese per CSS realisiert sowie die Suche nach schönen kaufmännischen Und-Zeichen werden ausgeführt.

Links und Beispiele

„Professional Web Typography“ gliedert sich in insgesamt neun Kapitel. Unter anderem werden noch Themen wie Animationen mit Typografie und das Einbinden von Webschriften via CSS behandelt. Neben zahlreichen bebilderten Beispielen gibt es auch viele Verweise zu anderen Websites, die weiterführende Informationen liefern.

Das es um Webtypografie geht, sind die meisten Beispiele mit kurzen CSS-Snippets versehen.

Website kostenlos, E-Book kostenpflichtig

„Professional Web Typography“ ist als Webprojekt kostenlos. Wer den Ratgeber lieber als E-Book im PDF-Format haben möchte, kann diesen für sieben US-Dollar erwerben. Geschrieben hat den Ratgeber der amerikanische Entwickler und Gestalter Donny Truong. Das Vorwort stammt übrigens von Tim Brown, Manager bei Adobes Schriftendienst Typekit.

Auch wer sich durchaus fit in Sachen Webtypografie fühlt, wird sicher auch noch das ein oder andere Neue aus der Lektüre mitnehmen können. Für alle anderen ist es ohnehin lesenswert. „Professional Web Typography“ ist zwar auf Englisch, aber bis auf den ein oder anderen Fachbegriff durchaus verständlich geschrieben.

Link zum Beitrag

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Achim Kirchmeier
Gast

Hey toll! Fast hätte ich neulich einen Kurs zu dem Thema belegt. Jetzt bekomme ich die Inhalte (wahrscheinlich) frei Haus! :) Danke!
VG Achim

Marco
Gast

Das ist ja mal ein sehr ausführlicher Ratgeber zum Thema. Danke für den Hinweis!

Das Thema Typography ist meiner Meinung nach sehr wichtig und wird von vielen Webseitenbetreibern vernachlässigt. Um für einen guten Lesefluss beim Besucher sorgen zu können, kommt es eben nicht nur auf den Inhalt und dessen Strukturierung an, sondern auch auf die Lesbarkeit der Schrift. Werden hier bei der Auswahl Fehler gemacht, kann man sich die Optimierung in den anderen Bereichn gleich sparen.

trackback

[…] Auch die Auswahl von Schriften erfolgt nach diesem Konzept. Statt für Überschriften, Navigation und Fließtext jeweils eigene Schriften auszuwählen, schlägt dir der Baukasten stimmige Schriftkombinationen vor. Beim Durchblättern der einzelnen Vorschläge werden diese bereits im Layout angezeigt, sodass du direkt siehst, wie die Schriften auf deiner Website wirken. Weitergehende Informationen zu Web-Typografie findest du hier. […]

wpDiscuz