Tufte Layout

While trying to redesign this blog to something more visually pleasing, I came across the works of Edward Tufte.

Edward R. Tufte pioneered data visualisation. His four books have described his principles for how visual design can help us understand data better than in simple tabular form. Good visual design lets us confer a high-level understanding of the data without sacrificing detail.

However, his books’ presentation of data, layout, and typography follow principles that enhance the understanding of this topic. One principle is that he replaces footnotes with sidenotesAn example footnote that becomes a sidenote

to provide context for the notes. Sidenotes have two advantages: The sidenote is closer to the text it references, and the main text becomes narrower, allowing for an easier read.

The Tufte CSS project attempts to apply these principles to web design. Based on the Tufte-LaTeX style sheets, it supplies tools that emphasise simplicity and extensive use of sidenotes.

Integrating Tufte-CSS into Hakyll

By now, you should know that this blog is written using Hakyll, a static site generator written in Haskell. To integrate Tufte-CSS into Hakyll, the Pandoc-Sidenote library must be added to the project. Tony Zorman’s article “Using Sidenotes with Hakyll” describes this excellently.

Once integrated, the Tufte-CSS file must be added to the template file that generates the pages. So far, I am pretty happy with the result. The site is more readable, and the sidenotes are a nice touch. The only thing I would likely change is the fonts. I like sans serif fonts for headings and serif fonts for the main text, as the serifs add readability. So, in a future update, I could see using a different font. Although the Tufte ET fonts are readable, they appear old-fashioned. I prefer a more modern font, probably a sans serif font, but I have not decided yet so that I will stick with the current defaults for now.