The Proportional Web — ein Web-Stylesheet für proportionale Typografie

(owickstrom.github.io)

1 Punkte von GN⁺ 3 시간 전 | 1 Kommentare | Auf WhatsApp teilen

The Proportional Web ist ein Design, das einige Prinzipien aus Robert Bringhursts 《The Elements of Typographic Style》 auf den Browser überträgt. Es ist der proportionale Nachfolger von The Monospace Web und ein wiederverwendbares Stylesheet
Für Fließtext werden Alegreya und Alegreya SC verwendet, für Code Courier Prime. Auf Basis einer Root-Schriftgröße von 16px, rem und einer Zeilenhöhe von 1.2rem werden Größen und vertikaler Rhythmus konsistent abgestimmt
Mithilfe moderner Browserfunktionen wie word-break, text-wrap und hyphens wird Blocksatz eingesetzt; wenn Wortabstände oder Leerraum-„Flüsse“ (rivers) schlecht wirken, wird jedoch text-align: left empfohlen
Auf Grundlage von semantischem HTML5 werden Überschriften, Zitate, Abbildungen, Tabellen und Codeblöcke gestaltet. Randnotizen auf breiten Bildschirmen stehen im rechten Rand und wechseln auf kleinen Bildschirmen zu dekorierten Inline-Absätzen
Geeignet für prosazentrierte Dokumente wie Bücher, Journale, Blogs, Handbücher und Wikis; für dynamische Webanwendungen wird es nicht empfohlen. Der GitHub-Quellcode kann heruntergeladen und um CSS und JavaScript ergänzt oder zusammen mit Pandoc verwendet werden

Von The Monospace Web zu proportionalen Schriften

The Monospace Web hat sich weiter verbreitet als erwartet, bis hin zur Nutzung in persönlichen Blogs und Anwendungsoberflächen
The Proportional Web ist der geistige Nachfolger dieses Projekts: Es verwendet statt einer Monospace-Schrift proportionale Schriften und ist zur freien Wiederverwendung konzipiert
Es begann nach der Lektüre von Robert Bringhursts 《The Elements of Typographic Style》 als Versuch, Layout und Typografie des Buchs im Browser umzusetzen
Anders als Drucksachen hat das Web keine feste Seitengröße und ist zudem eine programmierbare Plattform; deshalb lassen sich dieselben Regeln nicht einfach unverändert anwenden
- Stattdessen werden Elemente öffentlich bereitgestellt, die als nützlich oder ansprechend eingeschätzt wurden, damit man sie auswählen und verwenden kann
Zur HTML-Erzeugung wurde Pandoc verwendet, das Stylesheet kann mit kleinen Anpassungen aber auch in anderen Umgebungen funktionieren

Schriftsystem

Als gestalterische Grundlage dient Bringhursts Prinzip, statt mehrere Schriften zu mischen, eine vielseitige Schriftfamilie zu wählen
Die Alegreya-Familie wird je nach Zweck aufgeteilt eingesetzt
- Alegreya Regular wird für Fließtext und Überschriften der dritten Ebene verwendet
- Alegreya SC wird für Überschriften der ersten Ebene in Titelsatz-Großbuchstaben, Überschriften der zweiten Ebene in Kapitälchen sowie für Inline-Abkürzungen wie HTML genutzt
Für Monospace-Codefragmente wird Courier Prime eingesetzt

Relative Einheiten und vertikaler Rhythmus

Alle Größen werden auf Basis einer Root-Schriftgröße von 16px in rem angegeben
Die Standardgrößen sind 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 2, 2.5, 3 und 4rem; das entspricht jeweils 12, 14, 16, 18, 20, 22, 24, 32, 40, 48 und 64px
Wenn nur die Root-Schriftgröße geändert wird, lässt sich das gesamte Design gemeinsam vergrößern oder verkleinern
- Beispielsweise kann bei einer Bildschirmbreite von höchstens 480px die font-size von :root auf 14px gesetzt werden
Die Zeilenhöhe beträgt 1.2rem, und die vertikale Ausrichtung aller Elemente soll möglichst auf Vielfachen dieses Werts beruhen
Ohne es so extrem wie The Monospace Web umzusetzen, bleibt im gesamten Dokument ein gemeinsamer Ausrichtungsrhythmus erhalten

Blocksatz in modernen Browsern

Wie in Bringhursts Buch wird Fließtext nicht rechts flatternd, sondern im Blocksatz gesetzt
Zwar gilt im Web häufig, dass Blocksatz vermieden werden sollte, doch auf Basis verbesserter Browserfunktionen erscheint ein neuer Versuch vertretbar
Zeilenumbruch und Silbentrennung werden mit den folgenden CSS-Eigenschaften gesteuert
- word-break
- text-wrap
- hyphens
- hyphenate-limit-chars zur Steuerung des Bereichs, in dem Silbentrennung angewendet wird
Bei Blocksatz besteht das Risiko, dass Wortabstände zu stark auseinandergezogen werden oder Leerraum-Flüsse (rivers) im Absatz entstehen
Das aktuelle Dokument liefert bei seiner Kombination aus Zeilenlänge, Schriftgröße und Inhalt solide Ergebnisse; bei einigen schwierigen Wörtern wurden manuell weiche Trennzeichen eingefügt
Wenn es nicht zum Inhalt passt, ist ein Wechsel zu text-align: left sinnvoller

Absatzeinzug und Farben

Aufeinanderfolgende Absätze erhalten einen 3ch-Einzug, der der Breite von drei 0-Zeichen entspricht
Diese Methode erleichtert es visuell, Anfang und Ende eines Absatzes zu erkennen, und wird im Druck seit mindestens 500 Jahren verwendet
Im Web werden statt Einzügen meist vertikale Abstände zwischen Absätzen genutzt, doch der traditionelle Einzug bleibt weiterhin eine gültige Option
Die Farbpalette ist auf weißen Hintergrund und schwarzen Text beschränkt
- Für prosazentrierte Dokumente wird eine minimalistische Grundkonfiguration bevorzugt
- Wenn Farben sparsam eingesetzt werden, kann die Aufmerksamkeit der Leser auf die wichtigsten Elemente gelenkt werden, etwa auf Diagramme zur Darstellung komplexer Daten

Semantisches HTML und Überschriften/Betonung

Abgesehen von einigen zusätzlichen Klassen besteht das Ganze überwiegend aus semantischem HTML5-Markup
Überschriften werden in drei Ebenen gestaltet
- h1: oberste Überschrift auf Kapitelebene
- h2: Abschnittsüberschrift
- h3: Unterabschnittsüberschrift
Das <em>-Element wird entsprechend der üblichen Erwartung kursiv dargestellt

Trennlinien und aufklappbare Details

Da Bringhursts Buch keine klare Anleitung zu horizontalen Trennlinien enthält, werden sie als dekoratives Element verwendet
Für Trennlinien kommt das Zeichen U+2767 Rotated Floral Heart Bullet aus dem Unicode-Dingbats-Block zum Einsatz
Mit dem <details>-Element lassen sich Informationen verbergen, die per Klick auf ein Label aufgeklappt werden können

Randnotizen und Eigennamen

Die von Bringhurst verwendeten Randnotizen werden mit dem HTML-Element <aside> umgesetzt
Wenn der Bildschirm breit genug ist, erscheinen sie am rechten Rand, ausgerichtet an der Oberkante des vorhergehenden Absatzes
Auf kleinen Bildschirmen werden sie responsiv zu Inline-Absätzen mit Dekor zusammengefaltet
Eigennamen und offizielle Bezeichnungen, die mit der Klasse .canonical-name markiert sind, werden wie in Bringhursts Beispielen in Kapitälchen gerendert

Zitate und Abbildungen

Blockzitate bestehen aus einem eingerückten Block und Anführungszeichen um den Fließtext
Im Footer stehen Autor, Werk und Jahr
Bilder und Bildunterschriften werden jeweils in <figure>- und <figcaption>-Elemente gesetzt
Für Autor und Werktitel von Abbildungen werden wie bei Zitaten Kapitälchen und Kursivschrift verwendet; außerdem teilen sie sich dasselbe Einzugssystem

Listen und Tabellen

Aufzählungslisten und nummerierte Listen werden unterstützt; auch verschachtelte Strukturen nummerierter Listen werden in üblicher Form dargestellt
Tabellenköpfe werden mit Kapitälchen-Labels und Rahmen deutlich hervorgehoben
Das übrige Tabellendesign reduziert Dekor und setzt auf eine einfache Gestaltung, die vor allem auf Abständen beruht

Code-Darstellung

Das Gesamtdesign ist stärker auf prosazentrierte Dokumente als auf codezentrierte technische Dokumentation ausgelegt, aber auch Codeblöcke und Inline-Code sind gut lesbar gestaltet
Für Code wird das schreibmaschinenhaft nostalgische Courier Prime verwendet, damit es mit Alegreya und der Gesamtstimmung des Designs harmoniert
Zu den grundlegenden Stilvariablen gehören Schriftart, Zeilenhöhe, Rahmenstärke, Textfarbe und Hintergrundfarbe
- --font-family: "Alegreya", serif
- --line-height: 1.2
- --border-thickness: 1.5px
- --text-color: #000
- --background-color: #fff

Geeignete Einsatzbereiche und Lizenz

Das Design ist für prosazentrierte Webdokumente wie Bücher, Journale, Blogs und Handbücher gedacht
Es kann als Grundlage für persönliche Websites, bestimmte Projekte oder größere Wikis verwendet werden
Für dynamisch funktionierende Webanwendungen ist es wahrscheinlich nicht geeignet
Gewünschte Teile können kopiert oder geforkt und angepasst werden, es ist jedoch eine angemessene Urheberangabe erforderlich
Die Bedingung zur Namensnennung kann erfüllt werden, indem die Lizenzinformationen in den Headern der Quelldateien beibehalten werden

Installation und Nutzung mit Pandoc

Für einen schnellen Einstieg den GitHub-Quellcode herunterladen und im Verzeichnis the-proportional-web des Projekts ablegen
Im head des HTML werden die folgenden Dateien hinzugefügt
- the-proportional-web/index.min.css
- the-proportional-web/index.js
In Pandoc können Argumente wie Tiefe des Inhaltsverzeichnisses, Abschnittsnummerierung, CSS, JavaScript und Deaktivierung der Syntaxhervorhebung angegeben werden, um Markdown in HTML umzuwandeln
Wenn Syntaxhervorhebung benötigt wird, kann eine benutzerdefinierte Vorlage wie die für diese HTML-Ausgabe verwendete Vorlage in Betracht gezogen werden
In diesem Fall muss das von Pandoc standardmäßig eingebundene CSS aus der benutzerdefinierten Vorlage entfernt werden

Anwendungsbereich und Werkzeuge

Es werden nicht Bringhursts gesamte Methodik, sondern nur einige Ideen übernommen und für das Web angepasst
Zur Erstellung des Dokuments wurden folgende Werkzeuge verwendet
- Pandoc
- html-minifier
- esbuild
- GNU Make
Die Designideen und das tatsächliche Layout stammen in großem Umfang aus Robert Bringhursts 《The Elements of Typographic Style》

1 Kommentare

GN⁺ 3 시간 전

Meinungen auf Lobste.rs

Wenn man die Schriftgröße als Pixelwert festlegt wie im folgenden Beispiel, schadet das der Barrierefreiheit und sollte vermieden werden
```
@media screen and (max-width: 480px) {  
  :root {  
    font-size: 14px;  
  }  
}  
```
- Die CSS-Einheit px entspricht nicht mehr 1:1 einem physischen Pixel, sondern bedeutet max(1/96in, 1 pixel)
- Meine bevorzugte Methode ist, die font-size von :root auf 0.625 zu setzen, sodass 1rem 10px entspricht, und dann für body 1.6rem oder 2rem anzugeben, damit die gesamte Seite dies erbt
  Für Schriften sollte man kein px, insbesondere kein wv oder wh, verwenden, sondern rem oder em; für Layouts, die nicht entsprechend der Schriftgröße vergrößert werden müssen, kann man hauptsächlich px, wv, wh usw. verwenden
  Damit Nutzer mit eingeschränktem Sehvermögen die Funktion zur Änderung der Textgröße des Browsers nutzen können, sind em oder rem für Schriften deutlich eher zu empfehlen als px
  Wenn man für Schriftgrößen wv oder wh verwendet, verkleinern sich beim Vergrößern mit Ctrl-+ auf dem Desktop auch innerWidth und innerHeight im selben Verhältnis, sodass die Textgröße unverändert bleibt; das sollte man vermeiden. Eine subtile Mischung wie font-size: calc(1.6rem + 2wv), die nur auf großen Bildschirmen etwas größer wird, ist in Ordnung
- Die Standard-Schriftgröße des Browsers sollte man besser nicht ändern. Für einfache Textdokumente ist das okay, aber in den meisten Web-Anwendungen kann dadurch das Layout kaputtgehen
  Es ist praktisch schwierig, komplexe Websites so zu entwerfen, dass sie beliebige Schriftgrößen verarbeiten, und die Design-Einschränkungen werden enorm
  Wenn Barrierefreiheit etwa wegen einer Sehbehinderung nötig ist, sollte man den Standard-Zoomfaktor des Browsers ändern. Dann muss die Website nur das übliche responsive Design für beliebige Viewport-Größen natürlich handhaben, was realistisch machbar ist
  Früher ließen Browser Nutzer die Schriftgröße direkt anpassen, aber wegen der schlechten User Experience sind sie schon vor Jahrzehnten zum Vergrößern der gesamten Seite übergegangen
Ich frage mich, ob das auch für das Lesen auf Mobilgeräten gemacht wurde
Beeindruckend, wie gut die Typografie aus Bringhursts Buch nachgebildet wurde
Allerdings weicht es gelegentlich vom gleichmäßigen Raster mit fester Zeilenhöhe ab. Wenn zum Beispiel Text in Courier in eine Zeile gemischt wird, wird die Zeilenhöhe etwas größer
- Um das zu verhindern, sollte man für <code> line-height: 1 setzen. Ob 0 besser ist, weiß ich nicht, ob es dazu einen Konsens gibt
  Außerdem müssten, wenn man sich an 『The Elements of Typographic Style』 hält, die Zeichen von Aufzählungs- und nummerierten Listen im Randbereich platziert werden; ich erinnere mich aber nicht, ob das eine ausdrückliche Anforderung war
Das Ergebnis der Auseinandersetzung mit klassischen Typografie-Büchern ist großartig, und es ist schön, online mehr solches Constraint-basiertes Design zu sehen
In diesem Bereich ist http://lamb.cc/typograph/ von 2009 für mich immer noch das Beste
Relative Skalierung ist hervorragend, aber die Root-Schriftgröße zu überschreiben halte ich für einen Fehler
Eine Website sollte die Schriftgrößeneinstellungen der Nutzer respektieren, und ein relatives Größensystem, das auf Proportionen und Beziehungen basiert, passt gut dazu
Es ist leicht, so zu tun, als sei der Text das Wichtigste und die Darstellung unwichtig, aber ein sorgfältig gestaltetes Seitenlayout lässt Blogposts, Romane oder Artikel deutlich professioneller wirken
Hervorragender Seitensatz wird zunehmend zu einer vergessenen Kunst, daher ist ein solcher Versuch erfreulich
Ich habe früh tuft.css eingeführt, und obwohl es über die Jahre Anpassungen brauchte, habe ich es bis heute gut genutzt. Das hier wirkt in mancher Hinsicht besser, aber nicht so sehr, dass ich wechseln würde

The Proportional Web — ein Web-Stylesheet für proportionale Typografie

Von The Monospace Web zu proportionalen Schriften

Schriftsystem

Relative Einheiten und vertikaler Rhythmus

Blocksatz in modernen Browsern

Absatzeinzug und Farben

Semantisches HTML und Überschriften/Betonung

Trennlinien und aufklappbare Details

Randnotizen und Eigennamen

Zitate und Abbildungen

Listen und Tabellen

Code-Darstellung

Geeignete Einsatzbereiche und Lizenz

Installation und Nutzung mit Pandoc

Verwandte Typografieprojekte

Anwendungsbereich und Werkzeuge

Verwandte Beiträge

1 Kommentare

Meinungen auf Lobste.rs