Der Tufte-Stil in adoc Studio: Informationsdesign nach Edward Tufte

Was Tuftes Design ausmacht

Edward Tufte verfolgt ein zentrales Prinzip: Maximieren Sie den Anteil der Tinte, die tatsächlich Daten zeigt. Jedes visuelle Element muss einen Zweck erfüllen. Dekorative Linien, unnötige Farben und überladene Rahmen lenken vom Inhalt ab und verschwinden in Tuftes Designphilosophie.

Dieses Prinzip, die sogenannte Data-Ink Ratio, durchzieht jeden Aspekt des Tufte-Stils:

• Typografie statt Dekoration: Überschriften nutzen Kursivschrift statt Fettdruck
• Breite Ränder: Ein großzügiger Seitenrand bietet Raum für Sidenotes, Sidebar-Marginalien und Randgrafiken
• Sidenotes statt Fußnoten: Ergänzende Informationen erscheinen direkt neben dem referenzierten Text
• Sidebar-Blöcke als Marginalien: Ergänzende Textblöcke ohne Hintergrund im Seitenrand
• Booktabs-Tabellen: Nur drei horizontale Linien, keine vertikalen
• Zurückhaltende Farben: Graustufen für Text und Struktur, Farbe nur für Daten

Das Layout des Tufte-Stils

Das Herzstück des Tufte-Stils ist das zweigeteilte Layout: Eine schmale Textspalte links, ein breiter Rand rechts für Marginalien aller Art: Sidenotes, Sidebar-Blöcke und Randgrafiken.

Vier CSS-Variablen steuern die gesamte Layoutarchitektur:

--tufte-body-width: 650px;      /* Textspalte: ~60 Zeichen pro Zeile */
--tufte-margin-width: 250px;    /* Randbereich für Marginalien */
--tufte-margin-gap: 25px;       /* Abstand zwischen Text und Rand */
--tufte-full-width: 925px;      /* Gesamtbreite */

Die Textspalte mit 650 Pixeln ergibt bei der gegebenen Schriftgröße (15px) rund 60 bis 70 Zeichen pro Zeile. Das entspricht genau dem Bereich, den Tufte für optimale Lesbarkeit empfiehlt.

Titelseite

Die Titelseite folgt dem Layout von Beautiful Evidence: Untertitel oben, Titel im oberen Drittel, Versionsinformation darunter, Autor am unteren Rand. Alles in Gill Sans, Versalien, mit großzügigem Buchstabenabstand.

Seitenlayout

Der Tufte-Stil entfaltet seine volle Wirkung im PDF-Export. Hier kommen Seitenränder, Running Headers und eine durchdachte Seitenarchitektur zum Tragen.

Das Seitenlayout nutzt asymmetrische Ränder mit breiterem Bundsteg und schmalerem Außensteg:

@page :right {
    margin-left: 1.25in;   /* Bundsteg */
    margin-right: 1in;      /* Außen */
}

@page :left {
    margin-left: 1in;       /* Außen */
    margin-right: 1.25in;   /* Bundsteg */
}

Innerhalb des Inhaltsbereichs (6,25 Zoll auf Letter-Format) teilt sich der Raum in eine 4-Zoll-Textspalte und einen 2-Zoll-Randbereich für Sidenotes, Sidebar-Marginalien und Randgrafiken.

Running Headers im Tufte-Stil

Jede Inhaltsseite trägt einen dezenten Running Header im Kopfbereich:

• Verso (linke Seiten): Seitenzahl links, Kapitelüberschrift rechts
• Recto (rechte Seiten): Buchtitel links, Seitenzahl rechts

Titelseite, Inhaltsverzeichnis und Vorwort bleiben frei von Running Headers.

@page body:left, body-counted:left {
    @top-left {
        content: counter(page);
        font-size: 8pt;
    }
    @top-right {
        content: string(section1-title, first);
        font-style: italic;
    }
}

@page body:right, body-counted:right {
    @top-left {
        content: string(doctitle);
        font-style: italic;
    }
    @top-right {
        content: counter(page);
        font-size: 8pt;
    }
}

ET Book: Die Schrift hinter dem Stil

Tuftes Bücher verwenden traditionell die Antiqua-Schrift Bembo, eine Schrift aus dem Jahr 1495 von Francesco Griffo. Die digitale Umsetzung durch Monotype war Tufte jedoch zu dünn und schwach für die Bildschirmdarstellung.

Deshalb entstand ET Book: eine freie, MIT-lizenzierte Schrift, entwickelt von Dmitry Krasny, Bonnie Scranton und Edward Tufte selbst für das Buch Beautiful Evidence. ET Book bietet verbesserte Buchstabenformen für Bildschirme, überarbeitete Ligaturen und eine Bold-Variante.

Überschriften: Kursiv statt fett

In Tuftes Design sind Überschriften kursiv gesetzt, nie fett. Das ergibt eine elegante, flache Hierarchie, die den Textfluss nicht unterbricht.

Der Tufte-Stil in adoc Studio lädt ET Book in drei Schnitten:

• font-weight: 400 mit font-style: normal,
• font-weight: 400 mit font-style: italic,
• font-weight: bold.

Als Sekundärschrift dient Gill Sans, Tuftes bevorzugte Sans-Serif für Navigationselemente und die Titelseite.

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;  /* Normal, nie fett */
    font-style: italic;
}

h1 {
    font-style: normal;  /* Nur h1 ist aufrecht */
    font-size: 2.5rem;
}

h5, h6 {
    display: inline;     /* Paragraf-Überschriften im Fließtext */
    font-size: 1rem;
}

Die Hierarchie bleibt bewusst flach: h1 als aufrechter Dokumenttitel, h2 und h3 als kursive Abschnittsmarker, h4 als kursive Zwischenüberschrift (1.15rem) und h5/h6 als Inline-Überschriften in Fließtext-Größe. Tufte empfiehlt maximal drei Ebenen.

Farben: Zurückhaltung als Prinzip

Tuftes Farbphilosophie ist radikal: Farbe ist für Daten reserviert, nicht für Dekoration. Fließtext, Überschriften und Strukturelemente verwenden ausschließlich Graustufen.

--ads-color: #111111;          /* Fast-Schwarz für Text */
--ads-background-color: #fff;  /* Weiß (kein Creme) */
--ads-comment-color: #666666;  /* Grau für Sekundärinformation */
--ads-a-color: #1a1a1a;        /* Links: kaum vom Text zu unterscheiden */
--ads-caution-color: #a00000;  /* Dunkelrot nur für Warnungen */

Links heben sich bewusst kaum vom Text ab. Statt blauer Unterstreichung nutzt der Stil eine feine Gradient-Linie am unteren Rand:

a {
    color: #1a1a1a;
    text-decoration: none;
    background: linear-gradient(to bottom,
        transparent 50%, rgba(0,0,0,0.2) 50%);
    background-size: 2px 2px;
    background-repeat: repeat-x;
    background-position: bottom;
}

Das Ergebnis: ein subtiler, typografisch sauberer Unterstrich, der den Lesefluss nicht stört.

Inhalte im Seitenrand

Der Randbereich ist das zentrale Gestaltungselement des Tufte-Stils. In Tuftes Büchern enthält dieser Bereich ergänzende Informationen jeder Art: nummerierte Anmerkungen, freie Textblöcke, kleine Grafiken und bibliografische Verweise. Der Tufte-Stil in adoc Studio bildet dieses Prinzip mit drei verschiedenen Elementtypen ab.

Sidenotes: Fußnoten im Rand

Tufte betrachtet traditionelle Fußnoten als Störung des Leseflusses. Der Leser muss ans Seitenende springen, den Kontext verlieren und zurückfinden. Sidenotes lösen dieses Problem: Die Anmerkung erscheint direkt neben dem referenzierten Text im Rand.

Der Tufte-Stil verwandelt AsciiDoc-Fußnoten automatisch in Sidenotes:

Ein Satz mit einer Anmerkung.footnote:[Diese Anmerkung
erscheint als Sidenote im Rand.]

Die CSS-Technik nutzt einen negativen rechten Rand, um das Element aus der Textspalte heraus in den Randbereich zu verschieben:

.footnote {
    float: right;
    clear: right;
    margin-right: calc(-1 * var(--tufte-margin-width)
                       - var(--tufte-margin-gap));
    width: var(--tufte-margin-width);
    font-size: var(--tufte-sidenote-font-size);
    line-height: var(--tufte-sidenote-line-height);
}

CSS-Counter übernehmen die automatische Nummerierung. Das font-feature-settings: "tnum" aktiviert tabellarische Ziffern. So stehen ein- und mehrstellige Nummern sauber untereinander:

.footnote::before {
    content: counter(sidenote-counter) " ";
    counter-increment: sidenote-counter;
    font-feature-settings: "tnum";
}

Sidebar-Blöcke: Marginalien ohne Nummer

Nicht jede Randbemerkung braucht eine Nummer. In Tuftes Büchern finden sich neben den nummerierten Sidenotes auch freie Textblöcke im Rand, etwa ergänzende Erklärungen, Querverweise oder historische Anmerkungen. Diese bereichern den Haupttext, ohne an einer bestimmten Stelle verankert zu sein.

In AsciiDoc nutzen Sie dafür den Sidebar-Block:

[sidebar]
****
ET Book ist eine freie Schrift, die speziell
für die Bildschirmdarstellung optimiert wurde.
Sie basiert auf der Bembo von 1495.
****

Der Tufte-Stil verschiebt Sidebar-Blöcke in den Randbereich. Er verzichtet auf Hintergrundfarbe, Rahmen und Nummerierung. Der Inhalt fügt sich nahtlos in die Seitenleiste ein:

.sidebarblock {
    float: right;
    clear: right;
    margin-right: calc(-1 * var(--tufte-margin-width)
                       - var(--tufte-margin-gap));
    width: var(--tufte-margin-width);
    font-size: var(--tufte-sidenote-font-size);
    line-height: var(--tufte-sidenote-line-height);
    background-color: transparent;
    padding: 0;
    border: none;
}

Im Gegensatz zu den meisten AsciiDoc-Stilen, die Sidebar-Blöcke als eingefärbte Kästen im Textfluss darstellen, behandelt der Tufte-Stil sie als echte Marginalien. Das entspricht dem Originallayout in Tuftes Büchern, wo ergänzende Informationen grundsätzlich im Rand stehen, unabhängig von einer Nummerierung.

Sidebar-Blöcke eignen sich besonders für:

• Begriffserklärungen neben dem Fachtext
• Historische Einordnungen parallel zur Hauptargumentation
• Querverweise auf andere Kapitel oder Quellen
• Zusammenfassungen neben einem längeren Abschnitt

Randgrafiken

Kleine Grafiken und Diagramme lassen sich ebenfalls in den Rand verschieben. In AsciiDoc vergeben Sie dafür die Rolle margin oder sidenote:

[.margin]
image::kleine-grafik.svg[Beschriftung]

Die Positionierung funktioniert identisch zu Sidenotes und Sidebar-Blöcken:

.imageblock.margin,
.imageblock.sidenote {
    float: right;
    clear: right;
    margin-right: calc(-1 * var(--tufte-margin-width)
                       - var(--tufte-margin-gap));
    width: var(--tufte-margin-width);
}

Responsive Anpassung

Auf kleineren Bildschirmen (unter 900 Pixel) wandern alle Randinhalte (Sidenotes, Sidebar-Blöcke und Randgrafiken) inline unter den zugehörigen Absatz. Ein dezenter linker Rahmen markiert sie visuell als ergänzende Information:

@media screen and (max-width: 900px) {
    .footnote,
    .sidenote,
    .sidebarblock,
    aside {
        float: none;
        width: 100%;
        padding-left: 1em;
        border-left: 3px solid var(--ads-single-border-color);
    }
}

PDF: Marginalien im Drucklayout

Im PDF-Export arbeiten alle Randelemente im gleichen 2-Zoll-Marginalbereich. Die Textspalte misst 4 Zoll, der Rand 2 Zoll mit 0,25 Zoll Abstand:

@media print {
    .footnote,
    .sidebarblock,
    .imageblock.margin {
        float: right;
        clear: right;
        width: 2in;
        margin-right: -2.25in;
        font-size: 8pt;
        line-height: 1.3;
    }
}

Im Vivliostyle-Rendering für den PDF-Export werden Fußnoten zusätzlich als echte Sidenotes behandelt. Sie erscheinen nicht als Float-Footnotes am Seitenende:

@media vivliostyle {
    span.footnote {
        float: right;
        clear: right;
        width: 2in;
        margin-right: -2.25in;
        font-size: 8pt;
        counter-increment: footnote;
    }
}

Booktabs-Tabellen: Weniger ist mehr

Tuftes Tabellendesign folgt dem Booktabs-Prinzip: Keine vertikalen Linien, nur drei horizontale Regeln. Tufte argumentiert, dass vertikale Linien “nur dazu dienen, die Daten zu verunklaren.” Der Tufte-Stil setzt dieses Prinzip automatisch um. Sie schreiben eine normale AsciiDoc-Tabelle:

.Tuftes Hauptwerke
[cols="1,4,1", options="header", stripes="even", grid=none]
|===
| Nr. | Titel | Jahr
| 1 | The Visual Display of Quantitative Information | 1983
| 2 | Envisioning Information | 1990
| 3 | Visual Explanations | 1997
| 4 | Beautiful Evidence | 2006
| 5 | Seeing with Fresh Eyes | 2020
|===

Der Tufte-Stil macht daraus eine Booktabs-Tabelle: eine dicke obere Linie, eine dünne Trennlinie unter dem Header, eine dicke untere Linie. Der Header steht in Kapitälchen mit normalem Schriftgewicht. Kein Zebra-Striping, kein Hintergrund, keine vertikalen Linien. Der Fokus liegt auf den Daten.

Die CSS-Umsetzung nutzt gezielte Border-Selektoren:

/* Obere Linie: dick */
table thead tr:first-child {
    border-top: 2px solid #111;
}

/* Trennlinie unter dem Header: dünn */
table thead tr:last-child {
    border-bottom: 1px solid #111;
}

/* Untere Linie: dick */
table tbody tr:last-child {
    border-bottom: 2px solid #111;
}

/* Header in Kapitälchen, normales Gewicht */
table th {
    font-variant: small-caps;
    font-weight: 400;
    letter-spacing: 0.03em;
}

Admonitions: Typografie statt Icons

Klassische Admonitions nutzen Symbole oder farbige Boxen. Der Tufte-Stil setzt stattdessen auf zurückhaltende typografische Gestaltung.

Sowohl Icon-Fonts als auch Text-Labels werden im Tufte-Stil dezent gestaltet. Die Icon-Größe ist bewusst zurückgenommen, die Text-Fallbacks erscheinen kursiv und in gedämpfter Farbe:

/* Icon-Größe: kleiner als im Standard */
.admonitionblock td.icon [class^="fa icon-"] {
    font-size: 1.5em;
}

/* Text-Labels: kursiv, dezent */
.admonitionblock > table td.icon .title {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--ads-comment-color);
}

Im PDF-Export wandert das Label in den Randbereich. Flexbox-Baseline-Alignment sorgt dafür, dass es exakt auf der Grundlinie der ersten Inhaltszeile sitzt. Eine feine vertikale Linie trennt Label und Inhalt:

@media print {
    .admonitionblock table tbody tr {
        display: flex;
        align-items: baseline;
    }

    .admonitionblock td.content {
        order: 1;
        flex: 0 0 4in;
    }

    .admonitionblock td.icon {
        order: 2;
        margin-left: calc(0.25in + 1px);
    }
}

Blockzitate: Typografische Zuschreibung

Blockzitate im Tufte-Stil verwenden die gleiche Schriftgröße wie der Fließtext. Sie verzichten auf vergrößerten Text und aufwendige Rahmen. Die Zuschreibung erscheint unter dem Zitat, mit dem Autor in Standardfarbe und der Quelle kursiv in gedämpftem Grau:

blockquote p,
.quoteblock blockquote,
.quoteblock p {
    font-size: 1rem;
    font-style: italic;
}

.quoteblock .attribution,
.verseblock .attribution {
    font-size: 0.85rem;
    color: var(--ads-color);        /* Autor: Standardfarbe */
}

.quoteblock .attribution cite,
.verseblock .attribution cite {
    display: block;
    font-style: italic;
    color: var(--ads-comment-color); /* Quelle: dezentes Grau */
}

Quote-Blöcke und Verse-Blöcke werden einheitlich gestaltet: gleiche Zuschreibung, gleiche Farben, gleiches Layout.

Der CSS-Hack hinter den Sidenotes

Der Tufte-Stil verwendet einen CSS-Workaround, um Fußnoten als Sidenotes im Rand zu platzieren. Diese Technik nutzt ::after-Pseudo-Elemente mit content(text) und negative Margins, um Inhalte in den Randbereich zu verschieben. Anders als die offizielle CSS Paged Media-Spezifikation für Fußnoten (die float: footnote verwendet) hat dieser Ansatz inhärente Einschränkungen:

• Keine automatische Überlaufbehandlung: Wenn viele Sidenotes auf derselben Seite erscheinen, können sie über den Seitenrand hinauslaufen
• Keine automatische Seitenumbruch-Logik: Vivliostyle kann Sidenotes nicht über Seiten hinweg umbrechen

Außerdem alternieren Sidenotes nicht zwischen linkem und rechtem Rand. In Tuftes gedruckten Büchern erscheinen Sidenotes stets am äußeren Seitenrand: rechts auf rechten Seiten, links auf linken Seiten. Die CSS Paged Media-Spezifikation enthält position: running() dafür, aber Vivliostyle, die Rendering-Engine für den PDF-Export in adoc Studio, unterstützt diese Funktion noch nicht. Der Tufte-Stil positioniert Sidenotes daher konsistent auf der rechten Seite.

Der Stil ist als kostenloser Download für Nutzer verfügbar, die diese Einschränkungen kennen.

Design-Entscheidung: Kein Creme-Hintergrund

Tuftes Bücher verwenden ein warmes Cremepapier (#fffff8 in tufte-css). Für den digitalen Einsatz haben wir uns bewusst für reines Weiß entschieden: Es harmoniert besser mit verschiedenen Bildschirmeinstellungen und vermeidet Konflikte mit dem Dark Mode.

Probieren Sie es aus

Laden Sie den Tufte-Stil herunter und installieren Sie ihn per Doppelklick auf das .adocstyle-Bundle. Öffnen Sie ein bestehendes oder neues Dokument und wählen Sie den Stil Tufte in den Dokumenteinstellungen. Der Stil wirkt sofort in der Live-Vorschau und im PDF-Export.

Nutzen Sie AsciiDoc-Fußnoten (footnote:[]) und beobachten Sie, wie sie zu eleganten Sidenotes werden. Verwenden Sie Sidebar-Blöcke für längere Marginalien ohne Nummerierung. Fügen Sie Tabellen ein und erleben Sie den Booktabs-Effekt. Oder exportieren Sie ein PDF und prüfen Sie die Running Headers. Besonders geeignet ist der Tufte-Stil für wissenschaftliche Arbeiten und technische Dokumentation.

Beachten Sie die Sidenote-Einschränkungen: Vermeiden Sie zu viele Fußnoten auf derselben Seite und halten Sie einzelne Fußnoten kurz, um Überläufe im Randbereich zu vermeiden.

Edward Tufte schrieb in The Visual Display of Quantitative Information:

Exzellenz in der statistischen Grafik besteht darin, komplexe Ideen mit Klarheit, Präzision und Effizienz zu kommunizieren.

Genau das soll der Tufte-Stil in adoc Studio leisten: Ihre Inhalte mit Klarheit und typografischer Präzision präsentieren. Ohne Ablenkung.