Gutenberg: Web-Typografie für jedermann

Gutenberg: Web-Typografie für jedermann

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

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.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

$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:

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.

Dieter Petereit

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+.