Tufte CSS

Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. This page was in fact originally an adaptation of the Tufte Handout Example PDF. We give hearty thanks to all the people who have contributed to those projects.

If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.

Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

Getting Started

To use Tufte CSS, copy tufte.css and the et-book directory of font files to your project directory, then add the following to your HTML document’s head block:

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

Now you just have to use the provided CSS rules, and the Tufte CSS conventions described in this document. For best results, View Source and Inspect Element frequently.

Fundamentals

Sections and Headings

Organize your document with an article element inside your body tag. Inside that, use section tags around each logical grouping of text and headings.

Tufte CSS uses h1 for the document title, p with class subtitle for the document subtitle, h2 for section headings, and h3 for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn’t require an elaborate hierarchy to organize.

As a bonus, this excerpt regarding the use of headings provides an example of block quotes. They are just lightly styled, semantically correct HTML using blockquote and footer elements.

In his later booksE.g. Beautiful Evidence, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps. For this we use a span with the class newthought, as demonstrated at the beginning of this paragraph. Vertical spacing is accomplished separately through <section> tags. Be consistent: though we do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought technique. Pick one approach and stick to it.

Text

Although paper handouts obviously have a pure white background, the web is better served by the use of slightly off-white and off-black colors. Tufte CSS uses #fffff8 and #111111 because they are nearly indistinguishable from their ‘pure’ cousins, but dial down the harsh contrast. We stick to the greyscale for text, reserving color for specific, careful use in figures and images.

In print, Tufte has used the proprietary Monotype BemboSee Tufte’s comment in the Tufte book fonts thread. font. A similar effect is achieved in digital formats with the now open-source ET Book, which Tufte CSS supplies with a @font-face reference to a .ttf file. In case ET Book somehow doesn’t work, Tufte CSS degrades gracefully to other serif fonts like Palatino and Georgia.

Also notice how Tufte CSS includes separate font files for bold (strong) and italic (emphasis), instead of relying on the browser to mechanically transform the text. This is typographic best practice. It’s also really important. Thus concludes my inappropriate usage of em and strong for the purpose of example.

If you prefer sans-serifs, use the sans class. It relies on Gill Sans, Tufte’s sans-serif font of choice. Notice how weird and jarring this paragraph is, since it switches from serif to sans-serif? Don’t follow this paragraph’s bad example! Pick either serif or sans-serif for paragraphs throughout your document.

Links in Tufte CSS match the body text in color and do not change on mouseover or when clicked. Here is a dummy example that goes nowhere. These links are underlined, since this is the most widely recognized indicator of clickable text. ⊕Blue text, while also a widely recognizable clickable-text indicator, is crass and distracting. Luckily, it is also rendered unnecessary by the use of underlining. However, because most browsers’ default underlining does not clear descenders and is so thick and distracting, the underline effect is instead achieved using CSS trickery involving background gradients instead of standard text-decoration. Credit goes to Adam Shwartz for that technique.

As always, these design choices are merely one approach that Tufte CSS provides by default. Other approaches, such as changing color on click or mouseover, or using highlighting or color instead of underlining to denote links, could also be made to work. The goal is to make sentences readable without interference from links, as well as to make links immediately identifiable even by casual web users.

Lists

Tufte points out that while lists have valid uses, they tend to promote ineffective writing habits due to their “lack of syntactic and intellectual discipline”. He is particularly critical of hierarchical and bullet-pointed lists. So before reaching for an HTML list element, ask yourself:

• Does this list actually have to be represented using an HTML ul or ol element?
• Would my idea be better expressed as sentences in paragraphs?
• Is my message causally complex enough to warrant a flow diagram instead?

This is but a small subset of a proper overview of the topic of lists in communication. A better way to understand Tufte’s thoughts on lists would be to read “The Cognitive Style of PowerPoint: Pitching Out Corrupts Within,” a chapter in Tufte’s book Beautiful Evidence, excerpted at some length by Tufte himself on his website. The whole piece is information-dense and therefore difficult to summarize. He speaks to web design specifically, but in terms of examples and principles rather than as a set of simple do-this, don’t-do-that prescriptions. It is well worth reading in full for that reason alone.

For these reasons, Tufte CSS encourages caution before reaching for a list element, and by default removes the bullet points from unordered lists.

Epigraphs

If you’d like to introduce your page or a section of your page with some quotes, use epigraphs. Modeled after chapter epigraphs in Tufte’s books (particularly Beautiful Evidence), these are blockquote elements with a bit of specialized styling. Quoted text is italicized. The source goes in a footer element inside the blockquote. We have provided three examples in the epigraph of this section, demonstrating shorter and longer quotes, with and without a paragraph tag, and showing how multiple quotes within an epigraph fit together with the use of a wrapper class.

Sidenotes

One of the most distinctive features of Tufte’s style is his extensive use of sidenotes.This is a sidenote. Sidenotes are like footnotes, except they don’t force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. Perhaps you have noticed their use in this document already. You are very astute.

Sidenotes are a great example of the web not being like print. On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. On smaller viewports, elements that would go in the margin are hidden until the user toggles them into view. The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them. At the same time, this secondary information should stay out of the way of the eye, not interfering with the progression of ideas in the main text.

Sidenotes consist of two elements: a superscript reference number that goes inline with the text, and a sidenote with content. To add the former, just put a label and dummy checkbox into the text where you want the reference to go, like so:

<label for="sn-demo" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-demo" class="margin-toggle"/>

You must manually assign a reference id to each side or margin note, replacing “sn-demo” in the for and the id attribute values with an appropriate descriptor. It is useful to use prefixes like sn- for sidenotes and mn- for margin notes.

Immediately adjacent to that sidenote reference in the main text goes the sidenote content itself, in a span with class sidenote. This tag is also inserted directly in the middle of the body text, but is either pushed into the margin or hidden by default. Make sure to position your sidenotes correctly by keeping the sidenote-number label close to the sidenote itself.

If you want a sidenote without footnote-style numberings, then you want a margin note. ⊕ This is a margin note. Notice there isn’t a number preceding the note. On large screens, a margin note is just a sidenote that omits the reference number. This lessens the distracting effect taking away from the flow of the main text, but can increase the cognitive load of matching a margin note to its referent text. However, on small screens, a margin note is like a sidenote except its viewability-toggle is a symbol rather than a reference number. This document currently uses the symbol ⊕ (&#8853;), but it’s up to you.

Margin notes are created just like sidenotes, but with the marginnote class for the content and the margin-toggle class for the label and dummy checkbox. For instance, here is the code for the margin note used in the previous paragraph:

<label for="mn-demo" class="margin-toggle">&#8853;</label>
<input type="checkbox" id="mn-demo" class="margin-toggle"/>
<span class="marginnote">
  This is a margin note. Notice there isn’t a number preceding the note.
</span>

Figures in the margin are created as margin notes, as demonstrated in the next section.

Figures

Tufte emphasizes tight integration of graphics with text. Data, graphs, and figures are kept with the text that discusses them. In print, this means they are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling.

Figures should try to use the figure element, which by default are constrained to the main column. Don’t wrap figures in a paragraph tag. Any label or margin note goes in a figcaption tag inside the figure. For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:

⊕F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s Visual Explanations. But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a p tag, as seen to the right of this paragraph.

If you need a full-width figure, give it the fullwidth class. Make sure that’s inside an article, and it will take up (almost) the full width of the screen. To give it a caption, use a figcaption tag inside the figure tag. This approach is demonstrated below using Edward Tufte’s English translation of the iconic Napoleon’s March data visualization.

Tables

Tabular data are presented by default with right-aligned numbers, left-aligned text, and minimal grid lines. The default font is TrebuchetTrebuchet has ~97% penetration., though a given table might require a different choice. This turns out to be a major principle of tables in Tufte CSS: while there are some defaults, each table requires substantial individual care. Here, more than anywhere else in Tufte CSS, one must customize the styling in order to present one’s data optimally.

Let’s look at some examples. Here’s one, from page 121 of Tufte’s Visual Display of Quantitative Information:

Note how beyond a few fundamentals, much of what makes this table Tuftean is that its content is descriptive. The column headings and first cell of each row are terse, but don’t rely on abbreviations or labels that require looking elsewhere for explanation. All information necessary for processing the table is contained within the table. The table is a single unit for examination.

Please understand: this is not the One True Table. Such a style does not exist. This table gets some styling from tufte.css, but largely relies on custom styling. What makes this table work is its column spacing and font choice (overriding the table default of Trebuchet to return to ET Book), unique to #newspaper-tone style contained in the head of this document. This is because one must craft each table with custom care to the narrative one is telling with that specific data. You should examine this table with your browser’s developer tools to distinguish default Tufte CSS table styling from custom styles.

So take Tufte CSS table styling not as “the table style to use”, but rather as “a table style to start from”. From there, use principles to guide you: avoid chartjunk, optimize the data-ink ratio (“within reason”, as Tufte says), and “mobilize every graphical element, perhaps several times over, to show the data.”. Page 139, The Visual Display of Quantitative Information, Edward Tufte 2001. Furthermore, one must know when to reach for more complex data presentation tools, like a custom graphic or a JavaScript charting library.

Let’s start looking at alternative table styles. Academic publications written in LaTeX often rely on the booktabs package to produce clean, clear tables. Similar results, tweaked to Tufte’s preference for minimal extraneous lines, can be achieved in Tufte CSS with the booktabs class:

Notice how this table is centered and compact. The heavy rules that booktabs usually puts on the top and bottom are gone. A lighter-weight rule is used to separate the table head from its body. If you need a column heading to span two or more other column headings, an even lighter-weight rule may be used. Vertical rules are unnecessary. Additionally, the spacing around the rules has been increased to avoid a cramped appearance.

Tufte CSS also provides supertable functionality, pulled from page 179 of Tufte’s Visual Display of Quantitative Information. I'll let Tufte introduce it:

Tables also work well when the data presentation requires many localized comparisons. In this 410-number table that I designed for the New York Times to show how different people voted in presidential elections in the United States, comparisons between the elections of 1980 and 1976 are read across each line; within-election analysis is conducted by reading downward in the clusters of three to seven lines. The horizontal rules divide the data into topical paragraphs; the rows are ordered so as to tell an ordered story about the elections. This kind of elaborate table, a supertable, is likely to attract and intrigue readers through its organized, sequential detail and reference-like quality. One supertable is better than a hundred little bar charts.

Again, much of the styling for this supertable is unique to this individual table. For that styling, see table#groups-voting styles. Those styles aside, Tufte CSS supertables arrange a table, its heading, and its explanatory paragraph using a div of class supertable-wrapper. It uses the classes divider and psedoparagraph-heading on table rows and table cell elements respectively to break up the data into logical chunks. The footer class is used on the final td to source the data.

It’s not specific to supertables, but this table also needed centered columns of right-aligned numbers. Out of the box HTML and CSS are bad at this, so we must reach for a kludge made of extra markup: divs of class number that wrap the data in each cell. For example, in this table we have number number2 for a centered column containing right-aligned numbers of at most 2 digits and number number7 to center the “Carter/Ford in 1976” column. This solution is less elegant than we would like, but it seems to be the best option.

Here’s an example of a table that makes use of the full width of the viewport, highlighting of critical data points, omitting of irrelevant and repetitive data, and an alternative approach to table heading underlines. Remember, the basic principle that Tufte emphasizes is to use few lines, typically only under table headings, and to make them very thin. This optimizes the data-ink ratio, thereby reducing distractions in the table. If the data is arranged and aligned properly, most border lines within a table become unnecessary. This table is from page 44 of Visual Explanations:

Highlighting of important data points is accomplished with the danger class on the relevant td. It overrides the default table font in order to match its (print) source, and—as usual—column widths and specifics of vertical alignment are handled uniquely for this table id.

Table labels are margin notes with an additional table-label class, placed inside a p tag preceding the table. That class adds a top margin so the margin note matches the table header. Multiple sidenotes for a table, or sidenotes that must align to a specific height relative to the table, require custom styling and attention. Be aware that table labels are of limited utility for many tables, since they are often troublesome or awkward on small screens.

This table, from page 59 of Tufte’s Beautiful Evidence, also makes use of the table-wrapper-small class to contain its thin width.

⊕This is a table label. Use it for sourcing, describing how the table data was gathered, or to display related figures. See page 59 of Tufte’s Beautiful Evidence for an example of sidenoting a table.

Code

Technical jargon, programming language terms, and code samples are denoted with the code class, as I’ve been using in this document to denote HTML. Code needs to be monospace for formatting purposes and to aid in code analysis, but it must maintain its readability. To those ends, Tufte CSS apes GitHub’s font selection, which degrades gracefully along the monospace spectrum from the elegant but rare Consolas all the way to good old reliable Courier.

Extended code examples should use a pre tag with class code. This adds control over indentation and overflow as well:

;; Some code examples in Clojure. This is a comment.

;; applying a function to every item in the collection
(map tufte-css blog-posts)
;;;; if unfamiliar, see http://www.lispcast.com/annotated-map

;; side-effecty loop (unformatted, causing text overflow) - from https://clojuredocs.org/clojure.core/doseq
(doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d)))

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

;; If this proselytizing has worked, check out:
;; http://howistart.org/posts/clojure/1
      

ImageQuilts

Tufte CSS provides support for Edward Tufte and Adam Schwartz’s ImageQuilts. Some have ragged edges, others straight. Include these images just as you would any other figure.

This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width figure to accomodate its girth:

Here is an ImageQuilt of 47 animal sounds over and over, in a figure constrained to the main text region. This quilt has ragged edges, but the image itself is of course still rectangular.

Other Tools

Tufte CSS attempts only to cover some basic “Tuftean” ideas, providing one possible set of defaults, using cascading stylesheets. Therefore many of the more interesting techniques he points to are far outside the scope of this project. Graphing data, interactive data visualizations, and non-traditional text formats are fantastic tools that aren’t covered by Tufte CSS. Here is a short and incomplete overview of tools that can help accomplish a few Tufte-like techniques.

Sparklines are awesome, and can be created in a variety of ways. People are making them with plain javascript, jQuery, d3.js, and HighCharts. Evaluate those solutions to see which is most appropriate for your needs.

If you need to display mathematical symbols and equations, MathJax is supposed to be good.

Finally, I'd like to note some other approaches to the ideas that Tufte CSS addresses. A diverse design ecosystem is healthy, and good for design evolution. Maybe what they do will inspire you to create the right solution for your situation.

The Vulture has an interesting way of handling sidenote-type content. Sidenoted text is underlined (implemented as a border, mind you) and await mouseover, at which time they reveal a text aside on the left margin. On small screens the mouseover is dropped in favor of a pop-up-like textbox. This keeps marginalia out of the eye's way when it's not needed. However, one should have qualms about functionality that relies on mouseover: it is useless on touchscreens and distracting elswhere.

In this article about Brazilian jiu-jitsu, Grantland experiments with rich marginalia. Mousing over a linkified person's name brings to life a navigable family tree. This is a great example of how a digital reading experience can do so much more than mere print.

Although Tufte CSS doesn’t follow all of its prescriptions, Butterick’s Practical Typography is valuable for its thoughts on designing text for the web.

Bret Victor has published some vintage computer science talks and papers, like this one by Alan Kay, that have a Tufte-CSS feel.