tufte-css: Typography for the Web Modeled on Edward Tufte's Handouts

The Tufte Typography Problem tufte-css Solves

Edward Tufte's handouts use a recognizable visual system: a wide text column set in a serif typeface, an adjacent margin for sidenotes and small graphics, and restrained use of visual decoration. Replicating that system for the web requires careful CSS work on typography, column widths, and responsive behavior that most general-purpose stylesheets do not provide.

tufte-css solves exactly that problem for a developer writing plain HTML. The project was directly inspired by Tufte-LaTeX, which brought the same conventions to LaTeX documents, and by the R Markdown Tufte Handout format. The aim, stated in the README, is to bring Tufte's style to HTML documents. The intended user is someone writing an article, essay, or technical document in plain HTML who wants the visual character of Tufte's printed materials rather than a generic web stylesheet.

The scope is narrow and deliberate. The README explicitly lists what is out of scope: JavaScript-based enhancements, print versions of web pages, and integration with static site generators. Those applications are acknowledged as valuable but are left to work built on top of tufte-css rather than included in it.

What the Tufte Style Delivers in Practice

The README describes Tufte's distinctive style as simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. In tufte-css, these translate to three concrete things.

First, body text is set in ET Book, a digitization of the typeface used in Tufte's printed books. The et-book directory in the repository contains the font files, and the stylesheet references them. This is the typographic foundation the entire design depends on.

Second, sidenotes appear in the margin alongside the paragraph they annotate rather than at the page bottom as footnotes. The package.json keywords list sidenotes as a primary feature. The README credits Stephen A. Thomas for automatically numbered sidenotes and Chris MacKay for sidenote toggling on small screens, suggesting the feature has received iterative refinement.

Third, the layout provides a specific column geometry. The text column occupies a defined width, and the remaining space becomes the margin for notes and figures. On small screens, sidenotes collapse to inline behavior, handled by Clay Harmon's media queries contribution noted in the contributors list.

The live demonstration at edwardtufte.github.io/tufte-css is the README's recommended starting point for understanding the full feature set.

Adding tufte-css to an HTML Project

Installation is a file copy, not a build step. The README instructs: copy `tufte.css` and the `et-book` font directory to your project, then add this to the HTML head:

<link rel="stylesheet" href="tufte.css"/>

After linking the stylesheet, the page picks up the ET Book font and column layout automatically. Every other file in the repository, including the test fixtures and the demonstration document, can be ignored for a production use.

A minified version, `tufte.min.css`, is generated by the build script using clean-css. The build script in package.json runs `cleancss -o tufte.min.css tufte.css`. Serve the minified version in production to reduce stylesheet size. The npm package ships only `tufte.css`, `tufte.min.css`, and the `et-book` directory, as declared in the `files` field of package.json.

Installation via npm is also possible, since the package is published at version 1.9.0 under the name `tufte-css`. The npm path is useful when bundling into a build pipeline that already manages CSS dependencies.

The CSS-Only Constraint and What It Costs

tufte-css is explicitly a CSS-only solution. The README states that JavaScript solutions, although often superior to pure CSS, are out of scope and will not be used. This is a stated design position, not an oversight.

The practical cost of that constraint becomes visible at the edges of the sidenote behavior. On small screens, sidenotes toggle between visible and hidden using only CSS-driven state. More interactive behavior, such as linking a margin note to its anchor in the text on hover, or positioning sidenotes dynamically to avoid overlap, would require JavaScript that tufte-css will not add.

Similarly, tables have a specific styled variant described as booktabs tables, contributed by Kevin Godby. The CSS supports that specific pattern; any departure from it requires the author to write their own overrides.

Developers who need richer interactivity around margin annotations should evaluate JavaScript-enhanced alternatives. The README acknowledges that JavaScript solutions are often superior; it excludes them because the project's stated goal is a purely CSS approach.

Static Site Generator Integration and What the Project Leaves to Others

The RELATED SEARCHES data for this project shows clear demand for tufte-css with Hugo, Jekyll, and Markdown workflows. The README addresses this indirectly: it lists integration with static site generators as explicitly out of scope, and notes that those applications can be well served by separate work that builds on top of tufte-css.

In practice, that means a developer using Hugo or Jekyll needs to write their own shortcodes or templates to emit the correct HTML structures that tufte-css expects, such as the specific class names for sidenotes and margin figures. The CSS itself does not change; only the HTML generation pipeline needs to know the class naming conventions.

The project's demonstration document, `index.html`, is described in the README as a self-describing document that walks through the features. Opening that file directly in a browser is the most direct way to learn the expected HTML structure before integrating with any generator.

For Markdown-heavy workflows, the gap is more significant: Markdown does not have a native syntax for sidenotes, so any Markdown-to-tufte-css pipeline requires a preprocessing step or a custom renderer. tufte-css does not provide one.

Maintenance Status and the Feature-Complete Boundary

The README states plainly that the project is maintained but not under active development, and that it is considered essentially feature-complete. Refactoring and new functionality are described as a very low priority. The last push to the repository was on 2026-06-24.

For a CSS-only library at version 1.9.0 with a narrow and stable scope, this is a reasonable end state. The feature set mirrors a well-established print convention that is not changing. Bug fixes and contributions are still accepted, and tests use Playwright to assert computed CSS properties, providing a regression baseline.

The license is MIT, which permits unrestricted use, modification, and redistribution. The ET Book font files are part of the repository and are covered by the same MIT license, so a production deployment carries no separate font licensing obligation.

A developer considering tufte-css for a long-lived project should accept that the library will not grow. If the feature set visible in the current demo matches the need, that is not a problem. If the project requires features beyond what version 1.9.0 provides, including print handling or dynamic sidenotes, the project will not add them.

Editorial conclusion

tufte-css is the right choice for a developer who wants Tufte's specific typographic conventions on a static HTML page or documentation site, and who accepts a CSS-only constraint. It is not appropriate for teams that need print output, dynamic sidenote toggling beyond what CSS alone can provide, or deep integration with a static site generator out of the box. The repository is at version 1.9.0 and the README states it is essentially feature-complete; any new requirement is unlikely to be added by the maintainers, so evaluate the live demo at edwardtufte.github.io/tufte-css before committing.

Frequently asked questions

Official sources

1. edwardtufte/tufte-css on GitHub
2. Issues
3. License: MIT
4. Project website
5. README