The Tufte Style in adoc Studio: Information Design by Edward Tufte

What makes Tufte’s design

Edward Tufte follows one central principle: Maximize the share of ink that actually shows data. Every visual element must serve a purpose. Decorative lines, unnecessary colors, and overloaded borders distract from the content and disappear in Tufte’s design philosophy.

This principle, the so-called Data-Ink Ratio, permeates every aspect of the Tufte style:

• Typography over decoration: Headings use italics instead of bold
• Wide margins: A generous page margin provides space for sidenotes, sidebar marginals, and margin graphics
• Sidenotes instead of footnotes: Supplementary information appears directly next to the referenced text
• Sidebar blocks as marginals: Supplementary text blocks without background in the page margin
• Booktabs tables: Only three horizontal rules, no vertical lines
• Restrained colors: Grayscale for text and structure, color reserved for data

The Tufte style layout

The centerpiece of the Tufte style is the two-part layout: a narrow text column on the left and a wide margin on the right for all kinds of marginals: sidenotes, sidebar blocks, and margin graphics.

Four CSS variables control the entire layout architecture:

--tufte-body-width: 650px;      /* Text column: ~60 characters per line */
--tufte-margin-width: 250px;    /* Margin area for marginals */
--tufte-margin-gap: 25px;       /* Gap between text and margin */
--tufte-full-width: 925px;      /* Total width */

The 650-pixel text column produces roughly 60 to 70 characters per line at the given font size (15px). This matches exactly the range that Tufte recommends for optimal readability.

Title page

The title page follows the layout of Beautiful Evidence: subtitle at the top, title in the upper third, version information below, author at the bottom. Everything in Gill Sans, uppercase, with generous letter spacing.

Page layout

The Tufte style reaches its full potential in the PDF export. Page margins, running headers, and a refined page architecture come into play here.

The page layout uses asymmetric margins with a wider gutter and a narrower outer edge:

@page :right {
    margin-left: 1.25in;   /* Gutter */
    margin-right: 1in;      /* Outer */
}

@page :left {
    margin-left: 1in;       /* Outer */
    margin-right: 1.25in;   /* Gutter */
}

Within the content area (6.25 inches on letter format), the space divides into a 4-inch text column and a 2-inch margin area for sidenotes, sidebar marginals, and margin graphics.

Running headers in the Tufte style

Each content page carries a subtle running header at the top:

• Verso (left pages): page number on the left, chapter heading on the right
• Recto (right pages): book title on the left, page number on the right

Title page, table of contents, and preface remain free of 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: The typeface behind the style

Tufte’s books traditionally use the serif typeface Bembo, a typeface from 1495 by Francesco Griffo. However, Tufte found Monotype’s digital version too thin and weak for screen display.

This led to ET Book: a free, MIT-licensed typeface developed by Dmitry Krasny, Bonnie Scranton, and Edward Tufte himself for the book Beautiful Evidence. ET Book offers improved letterforms for screens, revised ligatures, and a bold variant.

Headings: Italic, not bold

In Tufte’s design, headings are set in italics, never bold. This creates an elegant, flat hierarchy that does not interrupt the reading flow.

The Tufte style in adoc Studio loads ET Book in three cuts:

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

The secondary typeface is Gill Sans, Tufte’s preferred sans-serif for navigation elements and the title page.

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

h1 {
    font-style: normal;  /* Only h1 is upright */
    font-size: 2.5rem;
}

h5, h6 {
    display: inline;     /* Run-in headings */
    font-size: 1rem;
}

The hierarchy stays intentionally flat: h1 as the upright document title, h2 and h3 as italic section markers, h4 as an italic subheading (1.15rem), and h5/h6 as inline headings at body text size. Tufte recommends no more than three levels.

Colors: Restraint as a principle

Tufte’s color philosophy is radical: Color is reserved for data, not for decoration. Body text, headings, and structural elements use grayscale exclusively.

--ads-color: #111111;          /* Near-black for text */
--ads-background-color: #fff;  /* White (no cream) */
--ads-comment-color: #666666;  /* Gray for secondary information */
--ads-a-color: #1a1a1a;        /* Links: barely distinguishable from text */
--ads-caution-color: #a00000;  /* Dark red for warnings only */

Links intentionally blend in with the text. Instead of blue underlining, the style uses a fine gradient line at the bottom edge:

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;
}

The result: a subtle, typographically clean underline that does not disrupt the reading flow.

Margin content

The margin area is the central design element of the Tufte style. In Tufte’s books, this area contains supplementary information of all kinds: numbered annotations, free text blocks, small graphics, and bibliographic references. The Tufte style in adoc Studio implements this principle with three different element types.

Sidenotes: Footnotes in the margin

Tufte considers traditional footnotes a disruption to the reading flow. The reader has to jump to the bottom of the page, lose context, and find the way back. Sidenotes solve this problem: the annotation appears directly next to the referenced text in the margin.

The Tufte style automatically converts AsciiDoc footnotes into sidenotes:

A sentence with an annotation.footnote:[This annotation
appears as a sidenote in the margin.]

The CSS technique uses a negative right margin to shift the element out of the text column into the margin area:

.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 counters handle the automatic numbering. The font-feature-settings: "tnum" activates tabular figures. This ensures single- and multi-digit numbers align cleanly:

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

Sidebar blocks: Marginals without numbers

Not every margin note needs a number. In Tufte’s books, alongside the numbered sidenotes, there are also free text blocks in the margin, such as supplementary explanations, cross-references, or historical annotations. These enrich the main text without being anchored to a specific position.

In AsciiDoc, you use sidebar blocks for this:

[sidebar]
****
ET Book is a free typeface specifically
optimized for screen display.
It is based on the 1495 Bembo.
****

The Tufte style moves sidebar blocks into the margin area. It omits background color, borders, and numbering. The content blends seamlessly into the sidebar:

.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;
}

Unlike most AsciiDoc styles that render sidebar blocks as colored boxes in the text flow, the Tufte style treats them as true marginals. This matches the original layout in Tufte’s books, where supplementary information always appears in the margin, regardless of numbering.

Sidebar blocks are especially suited for:

• Glossary entries next to the technical text
• Historical context parallel to the main argument
• Cross-references to other chapters or sources
• Summaries next to a longer section

Margin graphics

Small graphics and diagrams can also be placed in the margin. In AsciiDoc, assign the role margin or sidenote:

[.margin]
image::small-graphic.svg[Caption]

The positioning works identically to sidenotes and sidebar blocks:

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

On smaller screens (below 900 pixels), all margin content (sidenotes, sidebar blocks, and margin graphics) moves inline below the associated paragraph. A subtle left border marks them visually as supplementary 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: Marginals in the print layout

In the PDF export, all margin elements occupy the same 2-inch margin area. The text column measures 4 inches, the margin 2 inches with a 0.25-inch gap:

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

In the Vivliostyle rendering for the PDF export, footnotes are additionally treated as true sidenotes. They do not appear as float footnotes at the page bottom:

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

Booktabs tables: Less is more

Tufte’s table design follows the Booktabs principle: no vertical lines, only three horizontal rules. Tufte argues that vertical lines “serve only to obfuscate the data.” The Tufte style implements this principle automatically. You write a normal AsciiDoc table:

.Tufte's Major Works
[cols="1,4,1", options="header", stripes="even", grid=none]
|===
| No. | Title | Year
| 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
|===

The Tufte style turns this into a booktabs table: a thick top rule, a thin separator below the header, a thick bottom rule. The header is set in small caps with normal font weight. No zebra striping, no background, no vertical lines. The focus stays on the data.

The CSS implementation uses targeted border selectors:

/* Top rule: thick */
table thead tr:first-child {
    border-top: 2px solid #111;
}

/* Header separator: thin */
table thead tr:last-child {
    border-bottom: 1px solid #111;
}

/* Bottom rule: thick */
table tbody tr:last-child {
    border-bottom: 2px solid #111;
}

/* Header in small caps, normal weight */
table th {
    font-variant: small-caps;
    font-weight: 400;
    letter-spacing: 0.03em;
}

Admonitions: Typography over icons

Classic admonitions use icons or colored boxes. The Tufte style opts for restrained typographic design instead.

Both icon fonts and text labels are styled subtly in the Tufte style. The icon size is deliberately reduced, and text fallbacks appear in italics with a muted color:

/* Icon size: smaller than default */
.admonitionblock td.icon [class^="fa icon-"] {
    font-size: 1.5em;
}

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

In the PDF export, the label moves into the margin area. Flexbox baseline alignment ensures it sits exactly on the baseline of the first content line. A fine vertical line separates label and content:

@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);
    }
}

Block quotes: Typographic attribution

Block quotes in the Tufte style use the same font size as the body text. They forgo enlarged text and elaborate borders. The attribution appears below the quote, with the author in the default color and the source in italics with a muted gray:

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

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

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

Quote blocks and verse blocks share the same styling: same attribution, same colors, same layout.

The CSS hack behind sidenotes

The Tufte style uses a CSS workaround to place footnotes as sidenotes in the margin. This technique uses ::after pseudo-elements with content(text) and negative margins to shift content into the margin area. Unlike the official CSS Paged Media specification for footnotes (which uses float: footnote), this approach has inherent limitations:

• No automatic overflow handling: If many sidenotes cluster on the same page, they can overflow beyond the page boundary
• No automatic page break logic: Vivliostyle cannot split sidenotes across pages

Additionally, sidenotes do not alternate between left and right margins. In Tufte’s printed books, sidenotes always appear on the outer page margin: right on right-hand pages, left on left-hand pages. The CSS Paged Media specification includes position: running() for this, but Vivliostyle, the rendering engine for the PDF export in adoc Studio, does not yet support this function. The Tufte style therefore positions sidenotes consistently on the right side.

The style is available as a free download for users who understand these constraints.

Design decision: No cream background

Tufte’s books use a warm cream paper (#fffff8 in tufte-css). For digital use, we deliberately chose pure white: it harmonizes better with different screen settings and avoids conflicts with dark mode.

Try it out

Download the Tufte style and install it by double-clicking the .adocstyle bundle. Open an existing or new document and select the Tufte style in the document settings. The style takes effect immediately in the live preview and is especially suited for the PDF export.

Use AsciiDoc footnotes (footnote:[]) and watch them become elegant sidenotes. Use sidebar blocks for longer marginals without numbering. Insert tables and experience the booktabs effect. Or export a PDF and check the running headers. The Tufte style is especially suited for academic writing and technical documentation.

Keep in mind the sidenote limitations: avoid placing too many footnotes on the same page, and keep individual footnotes concise to prevent overflow in the margin area.

Edward Tufte wrote in The Visual Display of Quantitative Information:

Excellence in statistical graphics consists of complex ideas communicated with clarity, precision, and efficiency.

This is exactly what the Tufte style in adoc Studio aims to deliver: presenting your content with clarity and typographic precision. Without distraction.