Tufte Bootstrap
The web is not print. Webpages are not books.
Edward Tufte uses distinctive, simple, well-set typography; extensive annotations; and tight integration of graphics and charts. Tufte Bootstrap brings Tufte's style to the Bootstrap framework.
This project is inspired by Tufte CSS, Tufte-LaTeX, R Markdown's Tufte Handout format, and of course the work of Edward Tufte and his collaborators.
Fundamentals
Organize your article element inside your body tag. Inside that, use section tags around each logical grouping of text and headings.
Use 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. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:
Blockquotes
This excerpt regarding the use of headings provides an example of block quotes. In Tufte CSS they are just lightly styled, semantically correct HTML using blockquote and footer elements.
A well-known quote, contained in a blockquote element.
Text
We stick to the greyscale for text, reserving color for specific, careful use in figures and images.
In print, Tufte has used the proprietary Monotype Bembo font. An alternative, open-source ETBook, which Tufte CSS supplies separate font files for bold (strong) and italic (emphasis), instead of relying on the browser to mechanically transform the text. This is typographic best practice.
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.
Sidenote
One of the most distinctive features of Tufte's style is his extensive use of sidenotes. These appear in the margin, keeping the main text focused.