Denis Potschien 11. Oktober 2018

Typografisches Einmaleins für Websites

War Typografie zu den Anfängen des World Wide Webs etwas Nebensächliches, hat es in den letzten Jahren zunehmend an Bedeutung gewonnen. Vor allem dank CSS sind zahlreiche typografische Features möglich, die vor einigen Jahren noch undenkbar oder nur auf Umwegen zu realisieren waren. Doch alles, was möglich ist, muss auch gut umgesetzt werden. Dieses kleine Einmaleins zeigt dir, worauf du achten solltest und wie du deine Website typografisch in den Griff bekommst.

Webfonts statt Systemschriften

Eigentlich versteht es sich mittlerweile ja von selbst: Der Einsatz von Systemschriften ist keine Option mehr, wenn es um zeitgemäße und individuell gestaltete Websites geht. Neben den vielen kommerziellen Anbietern gibt es ebenso viele, bei denen du kostenlos Webfonts für deine Website findest. Allen voran sei da Google Fonts genannt. Aber auch Fontsquirrel hat eine große Auswahl hochwertiger Schriften.

Um keine Probleme mit dem Datenschutz zu bekommen, solltest du allerdings darauf verzichten, Schriften durch Google hosten zu lassen. Lade sie dir herunter und stelle sie über deinen eigenen Webspace bereit. Dann gibt es keinen Ärger bezüglich der DSGVO. Denn Google Fonts erfasst über die JavaScript-Einbindung personenbezogene Daten.

Google Fonts

Das mittlerweile etablierte Dateiformat WOFF2 für Webfonts schafft es zudem, Schriften deutlich besser zu komprimieren als sein Vorgänger. Über zu große Dateien musst du dir also auch keine Sorgen machen.

Schriften richtig kombinieren

In der Regel kommt auf einer Website mehr als eine Schrift zum Einsatz. Für ein abwechslungsreiches Design ist eine gewisse typografische Abwechslung auch durchaus sinnvoll. Hier solltest du natürlich zwei Schriften finden, die gut zueinander passen. Auf der sicheren Seite bist du, wenn du Schriften derselben Familie kombinierst.

So lassen sich die „Source Sans“ und die „Source Serif“ von Adobe aus nachvollziehbaren Gründen immer kombinieren. Ansonsten gilt: Je ähnlicher zwei Schriften sind, desto schwieriger wird es. Wenn du eine Serifenlose ausschließlich in Versalien (Großbuchstaben) verwendest, kannst du fast jede andere Serifenschrift damit kombinieren. Je ähnlicher sich die Schriften sind, desto mehr musst du unter anderem darauf achten, dass die x-Höhe – also der Abstand zwischen Grund- und Mittellinie – der beiden Schriften ähnlich ist.

Auch hier hilft ein Blick zu Google Fonts. Dort werden dir passende Schriftkombinationen zu einer Schriftart angeboten. In jedem Fall gilt: Mehr als zwei Schriften solltest du in der Regel nicht kombinieren. Variationen kannst du durch verschiedene Styles – zum Beispiel fett oder kursiv – erreichen.

Die richtige Größe wählen

Wichtig für die Lesbarkeit einer Schrift ist natürlich die Größe. Eine perfekte Größe lässt sich pauschal für eine Schrift nicht festlegen. Letztendlich muss eine Schriftgröße immer für das jeweilige Gerät passen. Auf Smartphones ist mitunter eine andere Schriftgröße notwendig als auf einem großen Monitor am Schreibtisch.

Per Media Queries solltest du also unterschiedliche Größen definieren, die sich je nach Auflösung des Displays beziehungsweise Größe des Browserfensters richten.

Immer wieder gibt es Diskussionen, welche Einheit für die Angabe einer Schriftgröße denn die passende ist. Meist bietet sich die Einheit „em“ an. „1em“ entspricht bei den meisten Browsern einer Größe von 16 Pixeln. Der Vorteil der „em“-Einheit besteht darin, dass sie relativ ist. Wer Überschriften zum Beispiel immer doppelt so groß dargestellt haben möchte wie Fließtext, wählt „2em“. Ändert sich die Größe des Fließtextes, werden auch Überschriften entsprechend größer dargestellt. Während „em“ immer relativ zum jeweiligen Elternelement definiert ist, gibt es mit „rem“ eine Einheit, die immer relativ zum „<body>“-Element definiert ist.

Mit der Einheit „vw“ (für „view width“) kannst du Schriften auch direkt an der Breite des Browserfensters beziehungsweise Viewports ausrichten. „1vw“ entspricht dabei ein Prozent der Breite des Viewports. Der Vorteil dieser Einheit besteht darin, dass Texte bei veränderter Breite immer mit skalieren – ähnlich wie Bilder, die sich immer an der Breite des Viewports orientieren. Vor allem für Überschriften und kurze Texte bietet sich diese Einheit prima an.

OpenType-Features nutzen

Im klassischen Desktop-Publishing werden OpenType-Features wie Ligaturen, Mediävalziffern und andere typografischen Besonderheiten und Raffinessen bereits lange eingesetzt. Aber dank CSS verwendest du die verschiedenen Möglichkeiten von OpenType-Schriften auch im Webdesign – vorausgesetzt natürlich, die jeweilige Schrift unterstützt diese Features.

Um bestimmte OpenType-Merkmale zu nutzen, musst du diese per CSS aktivieren. Die entsprechenden Eigenschaften beginnen mit „font-variant“. Um zum Beispiel Ligaturen zu verwenden, nutzt du die Eigenschaft „font-variant-ligatures“. Der Wert „common-ligatures“ aktiviert die Standard-Ligaturen einer Schrift. Dazu zählen klassische Ligaturen, bei denen Buchstabenpaare wie „fi“, „fl“ und „ff“ durch entsprechende Ligaturen ersetzt werden.

Daneben gibt es noch sogenannte bedingte Ligaturen, welche oft zur Verschnörkelung verwendet werden. Diese werden mit dem Wert „discretionary-ligatures“ aktiviert. Es gibt zahlreiche weitere Features – zum Beispiel für Zahlenformate und Kapitälchen. Nicht immer unterstützt eine Schrift jedoch alle OpenType-Merkmale.

Interpunktion und Sonderzeichen richtig einsetzen

Wer typografisch alles richtig machen will, achtet natürlich auf die korrekte Interpunktion und die Verwendung richtiger Zeichen. Das fängt bei Anführungszeichen an, die im Deutschen entweder „so“ oder »so« aussehen, aber niemals „so“.

Wenn du Zitate per „<cite>“ oder „<blockquote>“ auszeichnest, kannst du die Anführungszeichen auch per CSS definieren, indem du per „::before“ und „::after“ und der „content“-Eigenschaft die öffnenden beziehungsweise schließenden Anführungszeichen hinterlegst.

Außerdem solltest du den Unterschied zwischen Trenn- und Gedankenstrich berücksichtigen – letzterer ist deutlich länger als der Trennstrich. Dank UTF-8 müssen all diese Zeichen nicht mehr per HTML-Entitys ausgezeichnet werden.

Die hier erwähnten Beispiele zählen schon zur sogenannten Detailtypografie, mit denen ganze Bücher gefüllt sind. Aber wer die hier vorgestellten Regeln und Tipps beachtet, macht schon eine Menge richtig, wenngleich es in der Typografie ziemlich viel gibt, was man falsch machen kann.

Denis Potschien

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück