This sample document discusses the design of Edward Tufte’s books
Edward R. Tufte. The Visual Display of Quantitative Information. Graphics Press, Cheshire, Connecticut, 2001. ISBN 0-9613921-4-2;
Edward R. Tufte. Envisioning Information. Graphics Press, Cheshire, Connecticut, 1990. ISBN 0-9613921-1-8;
Edward R. Tufte. Visual Explanations. Graphics Press, Cheshire, Connecticut, 1997. ISBN 0-9613921-2-6;
and Edward R. Tufte. Beautiful Evidence. Graphics Press, LLC, first edition, May 2006. ISBN 0-9613921-7-7
and the use of the tufte-css. You can find the repository for code that is discussed in this document at https://github.com/32bitkid/tufte-css.
The pages of a book are usually divided into three major sections: the front matter (also called preliminary matter or prelim), the main matter (the core text of the book), and the back matter (or end matter).
The front matter of a book refers to all of the material that comes before the main text. The following table from shows a list of material that appears in the front matter of The Visual Display of Quantitative Information, Envisioning Information, Visual Explanations, and Beautiful Evidence along with its page number. Page numbers that appear in parentheses refer to folios that do not have a printed page number (but they are still counted in the page number sequence).
| Page content | Books | |||
|---|---|---|---|---|
| VDQI | EI | VI | BE | |
| Blank half title page | (1) | (1) | (1) | (1) |
| Frontispiece | (2) | (2) | (2) | (2) |
| Full title page | (3) | (3) | (3) | (3) |
| Copyright page | (4) | (4) | (4) | (4) |
| Contents | (5) | (5) | (5) | (5) |
| Dedication | (6) | (7) | (7) | 7 |
| Epigraph | – | – | (8) | – |
| Introduction | (7) | (9) | (9) | 9 |
The design of the front matter in Tufte’s books varies slightly from the traditional design of front matter. First, the pages in front matter are traditionally numbered with lowercase roman numerals (e.g., i, ii, iii, iv, . . . ). Second, the front matter page numbering sequence is usually separate from the main matter page numbering. That is, the page numbers restart at 1 when the main matter begins. In contrast, Tufte has enumerated his pages with arabic numerals that share the same page counting sequence as the main matter.
There are also some variations in design across Tufte’s four books. The page opposite the full title page (labeled “frontispiece” in the above table) has different content in each of the books. In The Visual Display of Quantitative Information, this page is blank; in Envisioning Information and Visual Explanations, this page holds a frontispiece; and in Beautiful Evidence, this page contains three epigraphs.
The dedication appears on page 6 in VDQI (opposite the introduction), and is placed on its own spread in the other books. In VE, an epigraph shares the spread with the opening page of the introduction.
None of the page numbers (folios) of the front matter are expressed except in BE, where the folios start to appear on the dedication page.
Tufte’s books primarily use two typefaces: Bembo and Gill Sans. Bembo is used for the headings and body text, while Gill Sans is used for the title page and opening epigraphs in Beautiful Evidence.
Since neither Bembo nor Gill Sans are available in default in most browsers, the tufte-css document classes default to using Palatino and Helvetica, respectively. In addition, the Bera Mono typeface is used for monospaced type.
The following font sizes are defined by the css classes:
tufte-css classes.| CSS Class | Font size | Line height | Used for |
|---|---|---|---|
.tufte-font.tiny |
50% | 1.2 | - |
.tufte-font.script |
70% | ≈ 1.14 | Superscript size |
.tufte-font.footnote |
80% | 1.25 | Sidenotes, captions |
.tufte-font.small |
90% | ≈ 1.33 | quotations |
.tufte-font.normal |
100% | 1.4 | body text |
.tufte-font.big |
110% | ≈ 1.36 | h4 element |
.tufte-font.large |
120% | ≈ 1.33 | h3 element |
.tufte-font.huge |
200% | 1.5 | h2 element |
.tufte-font.epic |
240% | 1.5 | h1 element |
Hyperlinks and citations are fundamental to the web. Links and citations are automatically generated with asides when possible. A basic link, opting into the "aside" generation, looks like this:
Search <a href="http://google.com" class="aside num">Google</a> to find more information.
<cite> element to the link.
...based on <a href="#multi-cite" class="aside num">other works</a>
<cite id='multi-cite'>
<a href="http://codepen.io/" class="aside num">Example 1</a> and
<a href="http://codepen.io/" class="aside num">Example 2</a>.
</cite>
General text asides can also be included by using the <aside> element.
<aside>This is a random thought...</aside>
Code is important; however, to my knowledge, there are no examples of code references in Tufte’s books. The default style implemented for code block in tufte-css are based on example tables in Tufte’s, and draw inspiration from GitHub styled markdown.
tufte-code class<figure class="tufte-code">
<code>
/* Place the code here */
</code>
</figure>
Adding captions to code references is also easy:
tufte-code<figure class="tufte-code">
<figcaption>Code caption</figcaption>
<code>
/* Place the code here */
</code>
</figure>