Gutenberg: Web-Typografie für jedermann

Gutenberg ist ein Starterkit für bessere Web-Typografie. Sein Entwickler Matej Latin sorgt auf ganz einfache Weise für schönere, lesbarere Inhalte. Das geschieht im Wesentlichen durch die konsequente Ausrichtung aller Inhalte an der einmal in Abhängigkeit zur Schriftgröße definierten Grundlinie.

Gutenberg: Web-Typografie für jedermann

Web-Typografie mit Gutenberg sieht gut aus

Gute Typografie im Web ist selten. Sicher, wenn man eine entsprechend gestaltete Seite sieht, erkennt man die Sorgfalt der Platzierung, die gleichmäßigen Abstände, den durchdachten Satz. Aber auch nicht unter typografischen Überlegungen erstellte Seiten funktionieren generell. Von daher kann ich jeden Designer verstehen, der den zusätzlichen Aufwand nicht treiben will.

Das neue Typografie-Starterkit Gutenberg von Matej Latin ist so konzipiert, dass grundlegende typografische Regeln eingehalten werden können, ohne dass man damit wirklich Arbeit hat. Gutenberg bietet zum jetzigen Zeitpunkt tatsächlich nur die absoluten Basics für einspaltige Layouts. Matej arbeitet jedoch schon an Erweiterungen zum Tabellensatz und zu seitlich angebrachten Kommentaren.

Gutenberg: Web-Typografie für jedermann

Gutenberg ist auf Basis von Sass entstanden. So kannst du mit Mixins arbeiten und dadurch eine Flexibilität in deine Designs bekommen, die ohne variablenfähiges Markups nicht möglich wären.

Gutenberg steht unter Creative Commons 3.0. Du musst also den ursprünglichen Urheber nennen, wenn du es verwendest. Zudem darfst du Abwandlungen und Erweiterungen des Projekts nur zu den gleichen Bedingungen veröffentlichen. Das bedeutet im Wesentlichen, dass du Gutenberg nicht etwa hernehmen darfst, um auf seiner Basis ein Produkt zu entwickeln, dass du dann verkaufen willst. In kommerziellen, auch in Kunden-Websites kannst du Gutenberg aber einsetzen.

Gutenberg: So gehts

Gutenberg “errechnet” den Schriftsatz anhand der beiden Basiswerte zur Schriftgröße und zum Zeilenabstand. Die Multiplikation beider Werte ermittelt das sogenannte $leading, welches wiederum die eigentlich Basis für das Grid ist, in das die Inhalte eingepasst werden.

1
2
3
$base-font-size: 100; // Converts to 16px
$line-height: 1.6;
$leading: $base-font-size * $line-height;

Durch die Verwendung von Sass kannst du mit dem Wert für $leading rechnen und weitere, quasi automatisch passende Werte, etwa für ein h2 bestimmen:

1
2
3
4
h2 {
  margin-top: #{2.5 * $leading + 'px'};
  line-height: #{1.5 * $leading + 'px'};
}

Um den Einstieg zu erleichtern, liefert Matej zwei “Themes” mit, die auf der Basis der Google-Fonts Merriweather oder Open Sans arbeiten und dadurch noch unkomplizierter zu guten Resultaten führen. Du kannst allerdings auch die Option custom wählen und deine eigenen Vorstellungen realisieren.

Falls du dir zunächst einen Eindruck der Optik der Themes verschaffen willst, hat Matej dafür zwei Beiträge vorbereitet. Klick auf das jeweilige Bild, um den zugehörigen Beitrag aufzurufen:

Gutenberg: Web-Typografie für jedermann

Gutenberg: Web-Typografie für jedermann

Rechts oben an der Projektseite, aber auch an den beiden Beispielen findest du einen Schalter, mit dessen Hilfe du das Grid sichtbar machen kannst.

Übrigens: Vor einiger Zeit haben wir hier bei Dr. Web ein Projekt namens Baseline JS vorgestellt, das in eine ähnliche Richtung geht, aber auf JavaScript setzt. Hast du dich noch nie mit dem Thema beschäftigt, ist sicherlich unser Fundstück zu Typografie für Anfänger was für dich.

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen