Dual-Tufte-Typst: Tufte Style for Both PDF and HTML

Jialin Lu, 2026-01-30

A Typst template produces Tufte handout in both PDF and HTML from a single source.PDF uses the marginalia package for margin notes; HTML generates Tufte CSS markup. Same API, both outputs. Tufte’s style is known for simplicity, sidenotes over footnotes, and tight integration of graphics with text.

If you see improvements, contributions are welcome on the GitHub project: dual-tufte-typst.

Getting Started

Copy src/ to your project and add to your document:

#import "src/lib.typ": tufte, sidenote

#show: tufte.with(
  title: [Your Title],
  author: "Your Name",
)

Content with #sidenote[margin notes].

The tufte.with() function accepts additional parameters:

#show: tufte.with(
  title: [Document Title],
  author: "Author Name",
  date: datetime.today(),                    // Publication date
  abstract: [Brief document summary...],     // Optional abstract
  lang: "en",                                // Document language
  paper: "us-letter",                        // Paper size for PDF
)

Compile with:

typst compile document.typ                                          # PDF
typst compile --input target=html --features html document.typ out.html  # HTML

View source alongside output to learn the features.

Fundamentals

Sections and Headings

Organize your document with titles and headings. The document title is set via tufte.with(title: ...). Use = for sections and == for subsections. Third-level headings (===) exist but are discouraged in the Tufte philosophy.Tufte: “The Feynman lectures write about all of physics in 1800 pages using only 2 levels of headings. Undergraduate Caltech physics is complicated material, but it didn’t require elaborate hierarchy.”

In his later books, Tufte starts sections with vertical space, a non-indented paragraph, and the first few words in small caps. Use new-thought for this. Be consistent: don’t alternate headers and new-thought. Pick one.

Text

Body text uses ET Book (or Palatino/Georgia fallback), with slightly muted colors for reduced contrast.PDF: fill: luma(20%). HTML: #111 on #fffff8 background. Links appear as underlined text, matching body color rather than distracting blue.

Standard formatting: emphasis, strong, code. Math works inline

and displayed:

Sidenotes

Sidenotes are the signature Tufte element.This is a sidenote. They display in the margin rather than forcing readers to the page bottom. On small screens (HTML), they collapse to toggleable content.

Sidenotes have two parts: a superscript reference number inline, and the note content in the margin. The template handles both automatically.

If you want a sidenote without numbering, use a margin note.This is a margin note. No number precedes it. On large screens, margin notes are sidenotes without reference numbers. On small screens, they toggle with ⊕ instead of a number.

Regular Typst footnotes convert to sidenotes automatically.Like this one!

For citations, use sidecite() to place the reference in the margin alongside the text.Tufte, Edward R. 2001. The Visual Display of Quantitative Information. 2nd ed. Graphics Press This keeps the text flowing while providing immediate access to sources without jumping to a bibliography.

Figures

Tufte emphasizes tight integration of graphics with text—figures stay with the discussion, not relegated to separate pages.

Standard Figures

Most figures sit in the text column with captions in the margin using main-figure:

Figure 1: Exports and imports to and from Denmark & Norway from 1700 to 1780. From Tufte’s Visual Display of Quantitative Information, page 92.

Margin Figures

Figure 2: Dürer’s 1515 rhinoceros woodcut, from Tufte’s Visual Explanations.

Smaller graphics fit entirely in the margin. Text flows uninterrupted while the figure provides visual context. Works well for portraits, icons, or supporting details.

Full-Width Figures

Data-dense visualizations may require the full page width:

Epigraphs

Epigraphs introduce sections with thematic quotations:

Code

Code blocks use monospace typography:

;; Applying a function to every item
(map tufte-css blog-posts)

;; Side-effecty loop, formatted for readability
(doseq [[[a b] [c d]] (map list
                           (sorted-map :1 1 :2 2)
                           (sorted-map :3 3 :4 4))]
  (prn (* b d)))

Inline code like tufte.with() integrates naturally with prose.

Lists and Block Quotes

Lists work as expected in Typst:

Unordered lists for non-sequential items:

• First item shows basic usage
• Second item demonstrates continuationEven sidenotes work within lists.
• Third item completes the example

Ordered lists for sequential steps:

1. Compile your document to PDF
2. Compile the same source to HTML
3. Compare the outputs side-by-side

Block quotes set off extended quotations with appropriate attribution:

Above all else show the data.

Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.

Full-Width Content

Dual-Format Notes

The template detects output format at compile time via sys.inputs.target. Each function dispatches to format-specific implementations:

• PDF: Uses marginalia package for margin notes and wide blocks
• HTML: Generates Tufte CSS-compatible markup with proper classes

The unified API means you write once:

#sidenote[Works identically in PDF and HTML.]
#margin-figure(image("fig.png"), caption: [Caption text.])
#full-width[Extended content here.]

Conclusion

Many thanks to Edward Tufte for leading the way with his work. This project builds on Tufte-LaTeX, Tufte CSS, and various Typst implementations by the community.See src/lib.typ header for full references.

The source of this document demonstrates every feature. View it alongside the rendered output—in both PDF and HTML—to see how each element translates across formats.