Styling Tufte for screen and print with CSS

Edward Tufte goes by the name ET. You can find his books on his personal site. 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. Edward Tufte’s books are beloved for the insight they provide into fascinating topics, and also for their beautiful design. Opening a Tufte book is a revelation – you are presented with alluring illustrations and stunning spreads on thick creamy paper.

The designs in Tufte's books are complex and each page has been carefully laid out by a human being (Tufte himself, in collaboration with Howard Gralla, I believe). It is impossible for an automatic process to achieve that level of perfection, but we can get fairly close. This guide will help you style your own content in a Tufte-like manner, both for screen and print.

We describe three types of presentations in this guide: for a laptop screen, a smaller mobile screen, and a PDF file. Text and figures are written into one HTML document which is styled in the three different ways with CSS. For on-screen viewing you can use common browsers. To generate the PDF file, we use Prince, an HTML-to-PDF-via-CSS converter.

The sidenote area

The sidenote area is a key feature of Tufte's designs. In his books, there is always a sidenote area on the right side of the page. The sidenote area is covers about a third of the page. In the sidenote area one finds bibliographical references, captions, clarifying remarks, and narrow figures.

The rhinoceros which appeared earlier in the document is an example of a narrow figure. To denote such figures we use a simple HTML element with a class name:

  <figure class=size-s>...</figure>

Due to parsing rules in HTML5, we use the span element (instead of figure) when the figure appears inline. You will surely recognize, and remember, the size-s code from clothing. Likewise, there are four more classes for labelling other types of figures: size-m, size-l, and size-xl.

An alternative class name for the Rhinocorus figure would be a sidenote. Indeed, this is how it appears on print in Tufte's book. However, when presenting the document on an small mobile phone, the figure will not be shown on the side. Instead, it will be shown in the one and only column, somewhewhat reduced in size. Try resizing your browser window to see this, or use a mobile phone.

Onscreen presentation

In his printed books, Tufte always has one sidenote area, and it it always on the right side of the page. On screen this is different. On PC screens, there will be two sidenote areas. The main reason for this is that when doing automatic layout, we cannot optimize the placement of content the same way as for paper. By having two sidenote areas, there is more room to place sidenotes, with fewer chances of collision.

We use this compelling picture of a letter-case to illustrate how a *medium* figure is shown. Typographers stored letters in such cases. The upper case contained capitals, the lower case contained miniscules. Hence, uppercase and lowercase.

Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

E. R. Tufte, The Visual Display of Quantitative Information, Graphics Press (Cheshire, Conn. 1983)Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua.

A treatise on Tufte is not complete without the map of Napoleon's ill-fated 1812 campaign in Russia. The illustration was made by Charles Joseph Minard, a French civil engineer known for his work in information graphics.

Generating a PDF

To generate a PDF document from this page, we recommend downloading and installing Prince on your own computer. When installed, you can produce a PDF document by running, from the command-line:

$ prince https://css4.pub/2025/tufte -o tufte.pdf

Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua.

The 11th-century Ramsung carving is a Sigurd stone that depicts the legend of Sigurd.

Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua.