Völkertafel

Tufte CSS: An Adaptation

Dave Liepmann

An adap­ta­tion by Chris J. Zähller

Introduction

Tufte CSS pro­vides tools to style web arti­cles using the ideas demon­strated by Edward Tufte’s books and hand­outs. Tufte’s style is known for its sim­plic­ity, exten­sive use of side­notes, tight inte­gra­tion of graph­ics with text, and care­fully cho­sen typography.

The orig­i­nal Tufte CSS, of which this is an adap­ta­tion, was cre­ated by Dave Liepmann and is now an Edward Tufte project. The orig­i­nal idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout for­mat. We give hearty thanks to all the peo­ple who have con­tributed to those projects.

This is only one pos­si­ble way to lay out a web page. While we have endeav­ored to remain true to Tufte’s spirit, we cau­tion against slav­ish imi­ta­tion. This adap­ta­tion devi­ates from the orig­i­nal Tufte CSS in sev­eral ways, and we encour­age you to alter it fur­ther to suit your own needs.

Getting Started

Because this is a cus­tom imple­men­ta­tion, we don’t have an easy way to pro­vide you, dear reader, with very use­ful source files. But if you’d like to have a look at the style sheet, you can find the uncom­pressed ver­sion at https://mercury-photo/wp-content/themes/mercurymakespix/admin/css/style.merged.css. You can see the links to the cus­tom fonts in the doc­u­ment <head>. And finally, since many of the font-fam­ily rules are inlined to opti­mize per­for­mance, you can see those rules in the doc­u­ment <head> as well.

Fundamentals

Sections, Headings, and Lists

Organize your doc­u­ment with an article ele­ment inside your body tag. Inside that, use section tags around each log­i­cal group­ing of text and headings.

Tufte CSS uses h1 for the doc­u­ment title, p with class subtitle for the doc­u­ment sub­ti­tle, h2 for sec­tion head­ings, and h3 for low-level head­ings. More spe­cific head­ings are not sup­ported in the orig­i­nal Tufte CSS. We pro­vide sup­port for them in this adap­ta­tion; how­ever, if you feel the urge to reach for a head­ing of level 4 or greater, con­sider redesign­ing your document:

[It is] notable that the Feynman lec­tures (3 vol­umes) write about all of physics in 1800 pages, using only 2 lev­els of hier­ar­chi­cal head­ings: chap­ters and A-level heads in the text. It also uses the method­ol­ogy of sen­tences which then cumu­late sequen­tially into para­graphs, rather than the grunts of bul­let points. Undergraduate Caltech physics is very com­pli­cated mate­r­ial, but it didn’t require an elab­o­rate hier­ar­chy to organize.

As a bonus, this excerpt regard­ing the use of head­ings pro­vides an exam­ple of block quotes. In Tufte CSS they are just lightly styled, seman­ti­cally cor­rect HTML using blockquote and footer ele­ments. See page 20 of The Visual Display of Quantitative Information for an exam­ple in print.

Here is what the head­ings look like:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

If you must use them, here are what lists look like. The ordered list sup­ports a sin­gle level with no nesting.

  • Foo
  • Bar
  • Foobar this is a very long item that wraps so I’ll just keep typ­ing yep still not long enough okay maybe we’re get­ting there
  • Barfoo
    • Fundus
      • Wundus
        • Mundus
          • Helpus
  1. Some Greenfish
  2. The Lights from my Lady Cranfeildes Chamber
  3. Two dozen of Pewter spoons
  4. One greate fireshov­ell for ye nursery
  5. Ye oth­ers which were sent to be exchanged for some of a bet­ter fashion
  6. A new fry­ing pan
  7. A stoute length of rope
  8. Some freshe egges
  9. Sufficient twine to tie up a goose for my Lady Cranfeildes guestes
  10. Together with a note of ye prises of such Commoditie for ye rest

In his later books, [Sidenote: Beautiful Evidence] Tufte starts each sec­tion with a bit of ver­ti­cal space, a non-indented para­graph, and the first few words of the sen­tence set in small caps. [Sidenote: This demo also styles other ele­ments, such as abbre­vi­a­tions, with small caps, e.g., USA, AFL-CIO, and NASA.] For this we use a span with the class newthought, as demon­strated at the begin­ning of this para­graph. Vertical spac­ing is accom­plished sep­a­rately through <section> tags. Be con­sis­tent: though we do so in this para­graph for the pur­pose of demon­stra­tion, do not alter­nate use of header ele­ments and the newthought tech­nique. Pick one approach and stick to it.

Text

Although paper hand­outs obvi­ously have a pure white back­ground, the web is bet­ter served by the use of slightly off-white and off-black col­ors. This adap­ta­tion of Tufte CSS uses rgb(255, 251, 245) and rgb(38, 38, 38) because they are nearly indis­tin­guish­able from their ‘pure’ cousins, but dial down the harsh con­trast. Which color is used for text and which for back­ground depends on whether you are view­ing this page in light mode or dark mode. Toggle the color switcher at the top of this page to see the alter­nate color scheme.

Apart from the drop­caps, we stick to the greyscale for text, reserv­ing color for spe­cific, care­ful use in fig­ures and images. Color in code blocks is han­dled via the Google Code Prettify library.

In print, Tufte has used the pro­pri­etary Monotype Bembo [Sidenote: See Tufte’s com­ment in the Tufte book fonts thread.]  font. A sim­i­lar effect is achieved in dig­i­tal for­mats with the now open-source ETBook, which Tufte CSS sup­plies with a @font-face ref­er­ence to a .ttf file. In this adap­ta­tion, we employ the excel­lent Merriweather type­face from Sorkin Type, with head­ings set in Playfair Display.

Also notice how Tufte CSS includes sep­a­rate font files for bold (strong) and italic (empha­sis), instead of rely­ing on the browser to mechan­i­cally trans­form the text. This is typo­graphic best practice.

If you pre­fer sans-ser­ifs, use the sans class. In this adap­ta­tion, we’ve opted for Merriweather Sans instead of Tufte’s pre­ferred sans-serif, Gill Sans. [Sidenote: While Gill Sans is a favorite of Tufte, it is a prob­lem­atic type­face. We can­not rec­om­mend it unless you are design­ing cov­ers for Penguin Books.]

Links in Tufte CSS match the body text in color and change color on hover, focus, and acti­va­tion. Here is a dummy exam­ple that goes nowhere. These links are under­lined, since this is the most widely rec­og­nized indi­ca­tor of click­able text. [Sidenote: Blue text, while also a widely rec­og­niz­able click­able-text indi­ca­tor, is crass and dis­tract­ing, not to men­tion inac­ces­si­ble to users with some forms of color-blind­ness. Luckily, it is also ren­dered unnec­es­sary by the use of under­lin­ing.] Because browsers now imple­ment text-decoration-skip: skip (Safari) or text-decoration-skip-ink: auto (all other mod­ern browsers), we have dis­pensed with Adam Schwartz’s faux-under­line tech­nique as used in the orig­i­nal Tufte CSS.

As always, these design choices are merely one approach that Tufte CSS pro­vides by default. Other approaches could also be made to work. The goal is to make sen­tences read­able with­out inter­fer­ence from links, as well as to make links imme­di­ately iden­ti­fi­able even by casual web users.

Epigraphs

The English lan­guage … becomes ugly and inac­cu­rate because our thoughts are fool­ish, but the sloven­li­ness of our lan­guage makes it eas­ier for us to have fool­ish thoughts.

George Orwell, Politics and the English Language

For a suc­cess­ful tech­nol­ogy, real­ity must take prece­dence over pub­lic rela­tions, for Nature can­not be fooled.

Richard P. Feynman, What Do You Care What Other People Think?

I do not paint things, I paint only the dif­fer­ences between things.

Henri Matisse, Henri Matisse Dessins: thèmes et vari­a­tions (Paris, 1943), 37

If you’d like to intro­duce your page or a sec­tion of your page with some quotes, use epigraphs. Modeled after chap­ter epigraphs in Tufte’s books (par­tic­u­larly Beautiful Evidence), these are blockquote ele­ments with a bit of spe­cial­ized styling. Quoted text is ital­i­cized. The source goes in a footer ele­ment inside the blockquote. We have pro­vided three exam­ples in the epi­graph of this sec­tion, demon­strat­ing shorter and longer quotes, with and with­out a para­graph tag, and show­ing how mul­ti­ple quotes within an epi­graph fit together with the use of a wrap­per class.

Sidenotes: Footnotes and Marginal Notes

One of the most dis­tinc­tive fea­tures of Tufte’s style is his exten­sive use of side­notes. [Sidenote: This is a side­note.] Sidenotes are like foot­notes, except they don’t force the reader to jump their eye to the bot­tom of the page, but instead dis­play off to the side in the mar­gin. Perhaps you have noticed their use in this doc­u­ment already. You are very astute.

Sidenotes are a great exam­ple of the web not being like print. On suf­fi­ciently large view­ports, Tufte CSS uses the mar­gin for side­notes, mar­gin notes, and small fig­ures. On smaller view­ports, ele­ments that would go in the mar­gin are hid­den until the user tog­gles them into view. The goal is to present related but not nec­es­sary infor­ma­tion such as asides or cita­tions as close as pos­si­ble to the text that ref­er­ences them. At the same time, this sec­ondary infor­ma­tion should stay out of the way of the eye, not inter­fer­ing with the pro­gres­sion of ideas in the main text.

Sidenotes con­sist of two ele­ments: a super­script ref­er­ence num­ber that goes inline with the text, and a side­note with con­tent. To add the for­mer, just put a label and dummy check­box into the text where you want the ref­er­ence to go, like so:

<label for="sn-demo"
       class="note__toggle note__number" alt="note">
</label>
<input type="checkbox"
       id="sn-demo"
       class="note__toggle" aria-role="note" />

You must man­u­ally assign a ref­er­ence id to each side or mar­gin note, replac­ing “sn-demo” in the for and the id attribute val­ues with an appro­pri­ate descrip­tor. It is use­ful to use pre­fixes like sn- for side­notes and mn- for mar­gin notes.

Immediately adja­cent to that side­note ref­er­ence in the main text goes the side­note con­tent itself, in a small ele­ment with class note__side. This tag is also inserted directly in the mid­dle of the body text, but is either pushed into the mar­gin or hid­den by default. Make sure to posi­tion your side­notes cor­rectly by keep­ing the side­note-num­ber label close to the side­note itself.

If you want a side­note with­out foot­note-style num­ber­ings, then you want a mar­gin note. [Sidenote: This is a mar­gin note. Notice there isn’t a num­ber pre­ced­ing the note. ] On large screens, a mar­gin note is just a side­note that omits the ref­er­ence num­ber. This lessens the dis­tract­ing effect tak­ing away from the flow of the main text, but can increase the cog­ni­tive load of match­ing a mar­gin note to its ref­er­ent text. However, on small screens, a mar­gin note is like a side­note except its viewa­bil­ity-tog­gle is a sym­bol rather than a ref­er­ence num­ber. The <label> ele­ment wraps the sym­bol. This doc­u­ment uses the FontAwesome sticky note glyph (<span class="fa-layers fa-fw mn-"><i class="far fa-sticky-note aria-role="hidden"></i><i class="fas fa-sticky-note aria-role="hidden"></i></span>), but it’s up to you.

Margin notes are cre­ated just like side­notes, but with the note__margin class for the con­tent and the note__toggle class for the label and dummy check­box. For instance, here is the code [Sidenote: For WordPress, we’ve cre­ated a short­code. that uses the syn­tax [mn‐ id="mn-my-unique-id"]My margin note text goes here.[/mn‐] Similarly, use [sn‐ id="sn-my-unique-id"]My side note text goes here.[/sn‐] to gen­er­ate a side­note.] for the mar­gin note used in the pre­vi­ous paragraph:

<label for="mn-demo" class="note__toggle" alt="note">
  <span class="fa-layers fa-fw mn-">
    <i class="fas fa-sticky-note" aria-role="hidden"></i>
    <i class="far fa-sticky-note" aria-role="hidden"></i>
  </span>
</label>
<input type="checkbox" id="mn-demo" class="note__toggle" aria-role="note" />
<small class="note note__margin">
  <span class="h-screen-reader-text"> [Sidenote: </span>
  This is a margin note. Notice there isn’t a number preceding the note.
  <span class="h-screen-reader-text">] </span>
</small>

Figures in the mar­gin are cre­ated as mar­gin notes, as demon­strated in the next section.

Tables

Tabular data are pre­sented with right-aligned num­bers, left-aligned text, and min­i­mal grid lines. Table labels are mar­gin notes placed inside a <p> tag that wraps the <table>.

[Sidenote: Table 1: First Row of MTcars]

Make + Modelmpgcyldisphpdratwt
A respon­sive table based on Edward Tufte’s design principles.
Mazda RX421.061601103.902.62
Mazda RX4 Waggon21.061601103.902.88
Datsun 71022.84108933.852.32
Hornet 4 Drive21.462581103.083.21
Hornet Sportabout18.783601753.153.44
Valiant18.162251052.763.46

Please under­stand: this is not the One True Table. Such a style does not exist. One must craft each data table with cus­tom care to the nar­ra­tive one is telling with that spe­cific data. So take this not as “the table style to use”, but rather as “a table style to start from.” From here, use prin­ci­ples to guide you: avoid chartjunk, opti­mize the data-ink ratio (within rea­son, as Tufte says), and mobi­lize every graph­i­cal ele­ment, per­haps sev­eral times over, to show the data. [Sidenote: Page 139, The Visual Display of Quantitative Information, Edward Tufte 2001.]

Figures

Tufte empha­sizes tight inte­gra­tion of graph­ics with text. Data, graphs, and fig­ures are kept with the text that dis­cusses them. In print, this means they are not rel­e­gated to a sep­a­rate page. On the web, that means read­abil­ity of graph­ics and their accom­pa­ny­ing text with­out extra clicks, tab-switch­ing, or scrolling.

Figures should try to use the figure ele­ment, which by default are con­strained to the main col­umn. Don’t wrap fig­ures in a para­graph tag. Any label or mar­gin note goes in a reg­u­lar mar­gin note inside the fig­ure. For exam­ple, most of the time one should intro­duce a fig­ure directly into the main flow of dis­cus­sion, like so:

[Sidenote: From Edward Tufte, Visual Display of Quantitative Information, page 92.] Exports and Imports to and from Denmark & Norway from 1700 to 1780
This is the default style for a fig­cap­tion. See the exam­ple below for a “full width” caption.

[Sidenote: Image of a Rhinoceros Image of a Rhinoceros, 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 inte­gra­tion of graph­ics with text is cen­tral to Tufte’s work even when those graph­ics are ancil­lary to the main body of a text. In many of those cases, a mar­gin fig­ure may be most appro­pri­ate. To place fig­ures in the mar­gin, just wrap an image (or what­ever) in a mar­gin note inside a p tag, as seen to the right of this paragraph.

If you need a full-width fig­ure, give it the fullwidth class. Make sure that’s inside an article, and it will take up (almost) the full width of the screen. This approach is demon­strated below using Edward Tufte’s English trans­la­tion of the Napoleon’s March data visu­al­iza­tion. From Beautiful Evidence, pages 122  –  124.

Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813
This is a fig­cap­tion. It is the child of a fig­ure with class “full­width”, that is, figure.fullwidth figcaption

Code

Technical jar­gon, pro­gram­ming lan­guage terms, and code sam­ples are denoted with the code class, as we’ve been using in this doc­u­ment to denote HTML. Code needs to be mono­space for for­mat­ting pur­poses and to aid in code analy­sis, but it must main­tain its read­abil­ity. To those ends, this imple­men­ta­tion of Tufte CSS shifts grace­fully along the mono­space spec­trum from the open-source Cousine to the ele­gant but rare Consolas all the way to good old reli­able Courier.

Extended code exam­ples should use a pre tag with class code. This adds con­trol over inden­ta­tion and over­flow 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

This demo omits ImageQuilts, since this site does not use them. See the ET forum announce­ment thread for more on quilts. 

Definition Lists

Here is an exam­ple of how you might style a def­i­n­i­tion list. Styles are applied to <dl> ele­ments with the class glossary.

Thieves’ Cant

Some slang devoted to var­i­ous birds and fowl. [Sidenote: Thieves Cant, The Website of Pascal Bonenfant]

Biddy, Chick-a-biddy
A chicken
A young wench (fig­u­ra­tive)
Bubbly jock
A turkey cock
Cackler
A hen
Cackling cheats
Fowl
Chickens
Cocks
Hens
Capon
A cas­trated cock
A eunuch (fig­u­ra­tive)
Carriers
Pigeons

A less styl­ish, but per­haps more prac­ti­cal def­i­n­i­tion list looks like this (it is the default for this site):

More Cant

Some slang devoted to var­i­ous items of cloth­ing. [Sidenote: ibid.]

Farting Crackers
Farting-Crackers
Hams
Breeches
Mish Topper
A coat or petticoat
Famble Cheats
Gold rings
Gloves
Jervis’s Upper Benjamin
a box, or coachman’s great coat
Belcher
A red silk hand­ker­chief, inter­mixed with yel­low and a lit­tle black
Rum Clout
A fine silk, cam­bric, or hol­land handkerchief
Penthouse Nab
A broad brimmed hat

Epilogue

Many thanks go to Edward Tufte for lead­ing the way with his work. It is only through his kind and care­ful edit­ing that this project accom­plishes what it does. All errors of imple­men­ta­tion are of course mine.

About Chris J. Zähller

International Man of Mystery. Cocktail Nerd. Occasionally designs websites. Sometimes snaps a picture or two.

↑ Go back to the beginning of this page.
Mercury Photo Bureau underlying-calculable