Webtypografie

Natürlich hast du auf deinen Webseiten die Inhalte lesefreundlich aufbereitet, sinnvoll strukturiert und auf korrekte Rechtschreibung geachtet. Jetzt kommt der typografische Feinschliff.
Im Prinzip gelten in der Web-Typografie die gleichen Regeln, wie im Printbereich.
Aber auf Webseiten arbeitest du mit CSS, um Schrift zu gestalten. Ich geh mal davon aus, dass du mit Eigenschaften wie font-family und font-size vertraut bist. Aber weißt du auch, wie man echte Kapitälchen oder Ligaturen erzeugt? Im folgenden, eine Auflistung der wichtigsten CSS-Eigenschaften für die Typografie.

CSS-Eigenschaften

font-style: stellt Schrift kursiv oder normal dar.
font-variant: erzeugt mit dem Wert „small-caps“ Kapitälchen. Wenn die Schrift keine echten Kapitälchen enthält, werden sie allerdings elektronisch berechnet, was unschön aussieht.
font-feature-settings: ermöglichen echte Kapitälchen, Ligaturen und andere typografische Spezialitäten, falls der Font entsprechende Zeichen anbietet.
font-variant-ligatures: diese Eigenschaft erzeugt bei OpenType-Fonts, die entsprechende Zeichen enthalten, Ligaturen mit dem Wert „common-ligatures“.
text-transform: wandelt einen gemischt gesetzten Text in Majuskeln (Versalien) oder Minuskeln (Kleinbuchstaben) oder sorgt für eine automatische Großschreibungen am Wortanfang.
text-shadow: wie der Name vermuten lässt, gibt es hier schattigen Text.
column-count: erzeugt mehrspaltigen Satz. In dem Zusammenhang sind auch die CSS-Eigenschaften column-gap und column-rule interessant.
font-display: bestimmt, wie Webfonts beim Seitenaufruf angezeigt werden in Abhängigkeit davon, wie schnell der Webfont geladen wird und zur Verfügung steht.
font-size-adjust: sorgt dafür, dass bei Verwendung mehrerer Schriftarten die Kleinbuchstaben alle dieselbe Höhe haben. Dieser Wert beschreibt das Verhältnis von der Mittellänge (auch X-Höhe: die Höhe der Kleinbuchstaben) zur Großbuchstabenhöhe. Die Verdana hat zum Beispiel ein Verhältnis von circa 0,55 und die Calibri von 0,46. Zur Zeit (Oktober 2024) haben wir für diese Eigenschaft eine Browserunterstützung von 81%.
font-stretch: definiert die Breite der einzelnen Zeichen (zumindest wenn der Browser das Feature unterstützt und der Font entsprechende Zeichen anbietet wie sie zum Beispiel auf https://v-fonts.com/ zu finden sind).
text-decoration: lässt Text unterstreichen oder durchstreichen.
text-indent: Legt den Einzug der ersten Zeile fest.

Maßeinheiten

Größenangaben für Schrift lassen sich in unterschiedlichen Einheiten wie px, %, em, ch (ch = Breite des Zeichens „0“ also null), vw (viewport-width) oder Millimeter definieren. Millimeter ist für die Darstellung am Monitor nun nicht so empfehlenswert, auch vw wäre suboptimal, aber eine Alternative wäre rem. Die Maßeinheit rem bezieht sich auf die Standard-Schriftgröße, die im Browser eingestellt ist; in der Regel 16 px. Sie wird von allen aktuellen Webbrowsern verstanden und ist praktisch bei der Angabe von Schriftgrößen. Der Vorteil von rem ist die Barrierefreiheit. Menschen mit einer Sehschwäche haben die Standardgröße für Schriften in ihrem Browser eventuell größer eingestellt, bei ihnen ist 1 em dann nicht der Standardwert 16 px, sondern 20 px, 40 px oder noch größer. Diese Benutzer profitieren von einer relativen font-size-Angabe in rem statt einer absoluten Angabe in Pixel.
Eine weitere Möglichkeit, die Schriftgröße zu definieren, wäre clamp.

Silbentrennung

Denk bei der Silbentrenung mit der CSS-Eigenschaft hypens an die Angabe der Sprache des Inhalts. Mit der CSS-Eigenschaft text-align-last: center; kannst Du die letzte Zeile des im Blocksatz ausgerichteten Absatzes gesondert behandeln und z.B. zentrieren, statt wie es standardmäßig der Fall wäre, die Zeile linksbündig auszurichten.

Mit der CSS3-Anweisung word-wrap: break-word; erreichst Du, dass zu lange Wörter innerhalb eines zu schmalen Eltern-Elements nicht über dieses hinausragen, sondern bei Bedarf automatisch getrennt werden.

Weicher Trennstrich: mit ­ erzeugt man einen weichen Trennstrich.

Siehe „Deep Dive into Text Wrapping and Word Breaking“ https://codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking/

Weitere HTML-Elemente um Text zu kennzeichnen

Text muss nicht immer ein Absatz sein. Auch mit Tags wie zum Beispiel code für Quelltext, blockquote, cite oder <q> für Zitate oder preformatted für vorformatierten Text lassen sich Inhalte auszeichnen.

Elemente wie <strike>, <b> oder <i> sind semantisch nicht besonders aussagekräftig und sollten nicht verwendet, sondern durch alternative Tags wie del statt strike oder durch CSS-Formatierungen ersetzt werden.

OpenType Variable Fonts

Neue Schrifttechnologien können faszinierend sein. z.B. Variable-Fonts oder Color-fonts. Wie wäre es mit einen variablen Font wie zum Beispiel „Movement“ (http://www.nmtype.com/movement/)? Variable Fonts beinhalten unterschiedliche Varianten eines Fonts mit unterschiedlichen Strichstärken, Schriftbreiten etc. in einer Datei. Im Moment (April 2019) hat sich diese Technik noch nicht weit verbreitet, aber in Zukunft könnten weitere brauchbare Schriften auf den Markt kommen. Siehe https://www.typolexikon.de/variable-fonts/ oder https://www.axis-praxis.org/specimens/.

OpenSource oder kostenpflichtige Schriften?

Sollte man lieber auf OpenSource-Fonts wie die Google-Fonts setzen oder einen kommerziellen Anbieter wie Typekit von Adobe, MyFonts, Fontshop oder ähnlichen Anbietern nutzen?
Die Google-Webfonts bieten eine breite Palette an kostenlosen und gut gestalteten Schriften an. Aber nicht immer findet man dort genau die Schrift, die für eine Gestaltung benötigt wird. Und zum Teil fehlen bei einigen Google-Fonts auch deutsche Sonderzeichen, dann sind Alternativen gefragt. Um kommerzielle Schriften zu verwenden, muss in der Regel ein JavaScript in die Seiten eingebaut werden, mit dem die Seitenabrufe gezählt werden. Damit bekommt der Schrift-Anbieter allerdings unter Umständen Informationen über die IP-Adressen oder die Cookies der Besucher. Und nicht immer ist die Lizenz bei kostenpflichtigen Anbietern eindeutig formuliert. Aber wenn eine spezielle kommerzielle Schrift in der Entwurfsphase ausgewählt wurde, kommen wir um die kommerziellen Anbieter nicht herum. Dieses Problem sollte den Screendesignern in der Entwurfsphase bewusst sein und vor der ersten Kundenpräsentation entschieden sein.

Beim Einbinden von Google-Fonts gibt es allerdings ein Urteil des LG München vom 19.01.2022 (https://dejure.org/dienste/vernetzung/rechtsprechung?Text=3%20O%2017493/20) zu beachten. Wodurch man quasi gezwungen wird, die Schriften lokal zu hosten.
Demgegenüber hat das lokale Laden von Schriften aber auch Nachteile, die sich negativ auf die Ladezeit der Seite auswirken, siehe https://developers.google.com/fonts/faq/privacy?hl=de.

Gestaltung

Versuche dich auf wenige Schriftfamilien in deinem Webauftritt zu beschränken. In der Regel reichen für ein modernes, übersichtliches Screendesign zwei verschiedene Schriftfamilien, eine für den Fließtext / Mengentext und eine zweite Schriftfamilie für die Überschriften.

Die Typo muss responsiv sein, sie muss sich an verschiedene Ausgabegeräte anpassen.
Das erreichst du z.B. wenn du mit relativen Maßeinheiten arbeitest, also rem oder viewport-width statt Pixel. Auch die CSS-Eigenschaft clamp ist hier hilfreich.

Nutze für den Fließtext gerne eine schlichte serifenlose und einfache Schrift. Hier bieten sich bewährte Standardschriften an, wie Lato, Roboto oder Poppins. Oder nimm einfach Systemschriften, wie Arial oder Helvetica.
Bei der Schriftwahl für Überschriften darfst du deiner Kreativität und deinem Spieltrieb dann gerne freien Lauf lassen.

Achte darauf, dass die Hierarchie der Überschriften semantisch korrekt und konsistent bleibt.
Die wichtigste Überschrift ist die H1. Manche Webdesigner legen Wert darauf, dass es auch wirklich nur eine einzige H1 auf einer Webseite gibt, andere sind hier etwas toleranter und lassen mehrere H1 überschriften auf einer Webseite zu. Die nächsten wichtigsten Überschriften sind H2 Überschriften und danach kommt H3 und so weiter.
Du suchst dir die Art der Überschrift natürlich nicht nach der Größe aus, sondern nach der Wichtigkeit, also der Hierarchie, das ist das einzige Kriterium.

Überschriften müssen auch als solche zu erkennen und unterscheidbar sein, mach also die Schriftgröße einer H2 deutlich größer als die einer H3.

Ein Gestaltungsmittel, welches du im aktuellen Webdesign häufig sehen kannst, ist der Einsatz von überdimensionaler, fetter Typo.

Du kannst in deinem Text mit Auszeichnungen wie fett, kursiv, Unterstreichungen, Einfärbungen, Hintergrundfarben und Ähnlichem arbeiten.

Denk daran, dass du die Laufweite und den Zeilenabstand deiner Schrift beeinflussen kannst. Den im Web Browser voreingestellten Zeilenabstand von 120% der Schriftgröße finde ich persönlich zu gering und setze den gerne auf 140% oder mehr.
Gestalte den Text luftig und großzügig, eine zu enge Gestaltung wirkt unangenehm, setze Weißraum gezielt ein.

Schrift dient nicht nur der Informationsvermittlung, sondern es ist auch ein Gestaltungsmittel. Du kannst mit Schrift eine Idee verstärken, du kannst mit Typografie provozieren oder besänftigen. Du kannst Schrift verändern, zerstören und neu denken.

Typografie als illustratives Element

Typo kann ein illustratives Element für sich sein und dem Screendesign einen ganz eigenen Look geben. Du kannst das komplette Design auf einer typografischen Idee aufbauen.
Ich habe da mal ein paar Inspirationen für dich …
Wie beispielsweise: https://www.pinterest.de/search/pins/?q=typography, https://codepen.io/julesforrest/full/orEbPa oder
https://designshack.net/articles/inspiration/typographic-posters-100-stunning-examples/. Mach gerne ein Screendesign in Art eines Posters. Also gar nicht an ein konkretes Screendesign für einen Bildschirm denken, sondern tatsächlich wie für ein Printprodukt gestalten.

Checkliste

Kontrolliere deine Typografie noch mal anhand der nachfolgenden Liste:

• Achte auf einen ausreichenden Farbkontrast bei deinen Schriften. Der Kontrast zwischen Hintergrund und Farbe der Schrift muss ausreichend sein. Dafür gibt es entsprechende Werkzeuge, mit denen du das überprüfen kannst. In Firefox kannst du den entsprechenden Text untersuchen und siehst dann im Inspektor, wenn du die Farbe also die Color der Schrift untersucht, einen entsprechenden Hinweis im Farbwähler, ob der Schriftkontrast ausreichend ist.
  In Chrome findest du unter anderem das Lighthouse, das direkt im Browser in den Entwicklungstools integriert ist. Hier kannst du die Barrierefreiheit deiner Webseite testen und damit werden auch zu geringe Schriftkontraste ermittelt und angemahnt.
• Manchmal ist ein zu hoher Schriftkontrast nicht angenehm beim Lesen, du musst wenn du einen weißen Hintergrund hast, nicht reines schwarz als Schriftfarbe einsetzen. Ein sehr dunkles Grau, ein Anthrazit tut es häufig auch.
• Eine angenehme und lesefreundliche Anzahl von Zeichen pro Zeile liegt zwischen 50 und 80 Zeichen. Auf mobilen Endgeräten auf kleinen Smartphones darf die Anzahl der Zeichen auch etwas geringer sein; aber weniger als 30 Zeichen pro Zeile erschweren das schnelle Erfassen eines Textes.
• Achte auf die Ausrichtung deiner Texte. Es gibt nicht nur linksbündigen Flattersatz.
• Setze Textanimationen sparsam ein.
• Verwende bei deinen Schriften ein Dateiformat, das schnell lädt, wie z.B. woff 2. Siehe https://www.w3schools.com/css/css3_fonts.asp.
• Die Schriften auf dem Google Fonts Server sind Open Source Schriften, was den Einsatz in Webprojekten ungemein vereinfacht.
  Wenn du rechtlich auf Nummer sicher gehen willst, hostest du die Google Fonts aber auf deinem eigenen Server und lädst sie nicht jedesmal vom Google Server.
• In manchen Projekten ist es wichtig, dass du eine ausreichende Anzahl von verschiedenen Schriftschnitten in einer Schrift zur Verfügung hast. Dann bist du mit einer Schrift, die nur über einen einzigen Schriftschnitt mit beispielsweise einer font-weight 400 zur Verfügung steht, schlecht beraten.
• Gib als Alternative zu irgendwelchen exotischen Schriften immer eine websichere Schrift als Fallback ein.
• Verwende bitte die typografisch korrekten Anführungszeichen.
  Verwende nicht das Deppenapostroph. Das Apostroph in „Harry’s Fliesenmarkt“ ist definitiv nicht schön anzuschauen. Mehr dazu auf http://www.deppenapostroph.info/ und https://typefacts.com/artikel/apostroph.
• Arbeite gerne mit Initialen, Ligaturen oder Mediäval-Ziffern.
• Cleartype: Wenn Du mit der Metaangabe <meta http-equiv=“cleartype“ content=“on“> Cleartype aktivierst (das dient der Kantenglättung unter Windows), solltest Du das Ergebnis unter verschiedenen Windows-Varianten und Browsern testen. Insbesondere Chrome hat mit dieser Art der Kantenglättung Probleme.
• Längere Texte komplett in Versalien zu setzen ist keine gute Idee.
• Text auf Bild kann das Bild zerstören

Weitere Infos und Literaturhinweise

Gestaltung: https://www.rheinwerk-verlag.de/das-abc-der-typografie-grundlagen-definitionen-praxisanwendung/, https://www.typographynerd.de/typografie/, https://www.typolexikon.de/
https://www.webdesign-journal.de/typografie/
Dr. Web: https://www.drweb.de/typographie und https://www.drweb.de/webdesign-trends/
Google Fonts-API und der Datenschutz: https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users
Buchtypografie responsiv: https://codepen.io/melipi/pen/LYjwyyb
Webtypo mit CSS: https://www.webdesign-journal.de/gute-webtypographie-mit-css/
Typobeispiele: https://www.webdesign-journal.de/typografische-webdesign-highlights/ oder https://www.awwwards.com/inspiration/search?text=typo
Starter kits: http://typeplate.com/ und http://matejlatin.github.io/Gutenberg/
Typografische Funktionen mit Javascript hinzufügen: http://typejs.org/, https://www.drweb.de/javascript-echte-typografie-im-web-mit-type-js-58632/ und https://www.drweb.de/typografische-animationen-mit-blast-js-52459/.
Text auf Pfad: https://circletype.labwire.ca/, https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/ oder https://css-tricks.com/snippets/svg/curved-text-along-path/
Colorfonts: https://bixacolor.com/ und Gilbert
Variable Fonts: https://web.dev/variable-fonts/
Schriften live testen: http://typewonder.com/
Welche Schrift ist das? https://www.myfonts.com/WhatTheFont/
Das typografische Eichhörnchen kann unter anderem Fonts in unterschiedliche Dateiformate umwandeln: https://www.fontsquirrel.com/
Ladezeiten von Schriften beschleunigen: https://www.drweb.de/webschriften-optimieren-76490/
Einige bedeutende Typografen: Neville Brody, Jan Tschichold, Adrian Frutiger, Erik Spiekermann, Kurt Weidemann, Otl Aicher
Schriftenanbieter: https://fontshop.com/, https://www.fonts.com, https://www.dafont.com/de/
Typo-Trends 2019: https://www.drweb.de/google-fonts/
Inspiration: https://www.awwwards.com/inspiration/search?text=typo, https://designshack.net/articles/inspiration/typographic-posters-100-stunning-examples/
Artikel zu Typografie auf Typefacts: https://typefacts.com/
Schönes CSS-Experiment (auch mit Variablen und grid): https://codepen.io/julesforrest/pen/orEbPa
Animierte Typo: https://blog.bannersnack.com/kinetic-typography/
Responsive Typografie mit Typetura: https://typetura.com/
Gayane Gasparyan has some fun with variable fonts and a line that shifts from thin to thick on hover: https://codepen.io/gayane-gasparyan/pen/vYmYMeV
Im Gegensatz zu Printmedien lassen sich Schriften im Web auch animieren. Siehe zum Beispiel https://css-tricks.com/snippets/css/typewriter-effect/, https://codepen.io/hi-im-si/pen/DHoup oder https://codepen.io/search/pens?q=typo.
Rundsatz: https://css-tricks.com/snippets/svg/curved-text-along-path/, https://circletype.labwire.ca/ und https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/
Animation und bewegtes: https://blog.creatopy.com/kinetic-typography/