Website Features and Design

Let’s start with the features, and then discuss the designThe text here discussing typography is modified from jekyll-theme-tufte..

Features

Markup Headers

Use layout: post for blog posts.
Use layout: page for standalone pages.
Use layout: blog-list for the listing of all blog posts.
head_title: foo — Use “foo” as the <title> text in the page <head>.
nav_title: Bar — Put a page in the nav bar, identified as “Bar”
weight: 123 — Set the order of pages in the nav.
full_width: true — Make the page body full width instead of half.

Sample blog post header:

---
layout: post
title: Your Title here
date: 2025-11-14
---

Sample page header:

---
layout: page
title: Your Title Here
---

Blockquotes

Space, like time, gives birth to forgetfulness, but does so by removing an individual from all relationships and placing him in a free and pristine state---indeed, in but a moment it can tyrn a pedant and philistine into something like a vagabond. Time, they say, is water from the river Lethe, but alien air is a similar drink; and if its effects are less profound, it works all the more quickly.

Thomas Mann, The Magic Mountain, trans. John E. Woods, p. 4

New thoughts

You may begin “new thoughts” with the newthought liquid shortcode.

Sidenotes and Margin Notes

One may include margin notes ⊕This is a margin note. and sidenotesThis is a sidenote..

Epigraphs

Man plans, and God laughs.

Yiddish proverb.

Images

Images in the main column:

From Edward Tufte, *Visual Display of Quantitative Information*, page 92.

Images in the margin:

⊕
F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zoological 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.

Full width image:

Design

Fonts

This theme bundles the et-book typeface from tufte-css.f

There is a version of et-book available upstream that includes ligatures (e.g. making the “ffi” in traffic one connected glyph), but I found that it reduces legibility, so it is not included here.

By default, we use lining numerals with uniform height. This is good for tables.

We zeroed in on 1,234 cases out of 5,678 candidates in the last 90 days.

Add the .numeral CSS class to any element to use old-style numerals. This is good for numbers in text.

We zeroed in on 1,234 cases out of 5,678 candidates in the last 90 days.

Color

Tufte CSS uses #fffff8 and #111111 because they are nearly indistinguishable from their ‘pure’ cousins, but dial down the harsh contrast.

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 ETBook, which Tufte CSS supplies with a @font-face reference to a .ttf file. In case ETBook somehow doesn’t work, Tufte CSS shifts gracefully to other serif fonts like Palatino and Georgia.

If you prefer sans-serifs, use the sans class. It relies on Gill Sans, Tufte’s sans-serif font of choice.

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. 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 Schwartz for that technique.

HTML Matters

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.

Sidenotes and Margin Notes

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">&amp;#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.

Figures

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 regular margin note inside the figure. For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:

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. This approach is demonstrated below using Edward Tufte’s English translation of the Napoleon’s March data visualization. From Beautiful Evidence, page 122-124.

Code

Tufte CSS follows GitHub’s font selection, which shifts 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. See the ET forum announcement thread for more on quilts. 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.