tufte-css theme
Typstatic 
Page status: seedling
Contents
Typstatic is pre-alpha!
Everything changes all the time, everything breaks all the time, and most of the time nobody tells you anything about that. Just like life.
This website is very fragmentary, broken in many places, and sometimes misleading and out of date.
Be patient, Typstatic in development (2026-08). When it’s ready for public use it will be announced on the forum and this message will be removed.
The default theme in Typstatic TODO Tufte CSS
Fundamentals
Sections and Headings
Only the first (=) and second (==) levels, which are translated to <h2> and <h3> respectively, are supported by Tufte CSS styling. See this for the rationale. <h1> is reserved for the document title.
Nevertheless, it’s very easy to define the styling of lesser levels of heading using CSS, like so (based on the definitions of <h2> and <h3>):
h4 {
font-style: italic;
font-weight: 400;
font-size: 1.4em;
margin-top: 2rem;
margin-bottom: 1.4rem;
line-height: 1;
}As a bonus, 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. See page 20 of The Visual Display of Quantitative Information for an example in print.
In his later books, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps. For this we use a span with the class newthought, as demonstrated at the beginning of this paragraph. Vertical spacing is accomplished separately through tags. Be consistent: though we do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought technique. Pick one approach and stick to it.
Text
Serif and sans serif
Epigraphs
For a successful technology, reality must take precedence over public relations, for Nature cannot be fooled.
Sidenotes: Footnotes and Marginal Notes
TODO: If you want a sidenote without footnote-style numberings, then you want a margin noteThis 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.hello world However, asdfon 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.
Figures
