tufte-text-formatting

name

tufte-text-formatting

description

Apply Edward Tufte-inspired text representation: restrained typography, sidenotes, margin notes, quiet tables, annotations, integrated evidence, and low-decoration analytical formatting. Use when the user mentions Tufte, Tufte CSS, sidenotes, margin notes, dense readable documents, typography for analytical writing, text-heavy interfaces, data-rich prose, report formatting, or any text display that should prioritize clarity over decoration.

Tufte Text Formatting

Use this skill to format analytical text so readers can inspect evidence with minimal friction. Do not mimic a visual brand. Make words, numbers, notes, tables, and figures work together with quiet precision.

Read references/tufte-research.md when the task asks for rationale, a design review, or a new formatting system.

Core Principles

1. Show the Content

Make the argument, evidence, examples, labels, and measurements visually dominant. Remove decoration that does not help interpretation.

• Prefer direct labels over legends.
• Prefer compact explanatory text next to the thing it explains.
• Prefer meaningful titles over generic headings.
• Avoid hero-scale text, ornamental dividers, tinted panels, and repeated badges in analytical documents.
• Do not hide important context in hover-only UI, collapsed accordions, or endnotes when there is room to show it.

2. Use Typography as Structure

Create hierarchy with placement, scale, italics, spacing, and measure before using heavy weights, boxes, or color.

• Use a readable serif for long-form analytical prose when the project allows it. Practical defaults: ET Book, Bembo, Charter, Iowan Old Style, Source Serif, Georgia.
• Use a quiet sans for labels, navigation, small UI controls, and metadata when needed. Keep it secondary.
• Keep headings modest. A heading should announce structure, not compete with the evidence.
• Prefer sentence case and mixed case. Avoid all-caps except for tiny labels where tracking is carefully set.
• Use real italic and bold faces when available. Do not rely on synthetic browser styles for polished document typography.

3. Design for Dense Reading

Tufte-style clarity often comes from useful detail, not from stripping the page bare.

• Let the reader see overview and detail together.
• Use high information density when labels, alignment, and grouping make scanning easier.
• Use white space as a separator. Use hairlines only when alignment needs reinforcement.
• Keep body measure comfortable: roughly 55ch to 75ch for prose.
• Use line-height around 1.4 to 1.6 for prose; tighten labels, captions, and tables.
• Use font-variant-numeric: tabular-nums for aligned numeric columns, counters, dates, and measurements.

4. Integrate Notes Instead of Exiling Them

Use sidenotes, margin notes, captions, and inline annotations to keep explanations near their referents.

• Use sidenotes for citations, caveats, definitions, source notes, and small examples.
• Use margin figures or inline sparklines when a small visual belongs in the sentence or paragraph.
• On narrow screens, collapse sidenotes directly below the referenced sentence or paragraph.
• Keep sidenotes brief. If a note becomes a second essay, move it into the main text or an appendix.

5. Make Tables Quiet and Precise

Treat tables as text. Format them for comparison and lookup, not decoration.

• Prefer booktabs-style tables: top rule, header rule, bottom rule; no vertical rules.
• Align text left, numbers right, decimals by decimal point when possible.
• Use tabular numerals for numeric columns.
• Put units in headers instead of repeating them in every cell.
• Use subtle row grouping only when it improves comparison.
• Add source notes below the table, not in a visually heavy caption box.

6. Use Color Sparingly

Color should carry meaning, not mood.

• Use color to identify categories, highlight exceptions, or link text to annotations.
• Keep non-data ink subdued: gray rules, muted labels, quiet source notes.
• Never make red/green the only essential distinction.
• Avoid decorative gradients, tinted card backgrounds, and one-note palettes in analytical text.

Formatting Patterns

Analytical Markdown

Use this shape for prose, reports, memos, and documentation:

# Specific Claim or Topic

Short opening paragraph that states the main point and scope.

## Evidence

Dense prose with direct references, short examples, and numbers kept in the sentence when they matter to the argument.

> Use blockquotes only for short primary-source excerpts or visibly distinct evidence, not for decoration.

| Measure | 2024 | 2025 | Change |
| --- | ---: | ---: | ---: |
| Active accounts | 12,400 | 18,900 | +52% |

Source: concise source note with date and caveat.

## Interpretation

Explain what changed, what did not, and what uncertainty remains.

Web Typography CSS

Adapt this to the existing codebase rather than pasting it blindly:

.tufte-prose {
  max-width: 68ch;
  font-family: "ET Book", "Iowan Old Style", Charter, Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  color: rgb(22 22 20);
  font-variant-numeric: oldstyle-nums;
}

.tufte-prose h1,
.tufte-prose h2,
.tufte-prose h3 {
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.tufte-prose table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tufte-prose th,
.tufte-prose td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid rgb(0 0 0 / 12%);
}

Sidenote Layout

Use this shape for web or document layouts that support marginalia. Keep the note close to the sentence it explains.

<p>
  The result changed after the pricing update.
  <span class="sidenote">The rollout reached 80% of accounts on May 14.</span>
</p>

.reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(12rem, 22rem);
  column-gap: 3rem;
}

.sidenote {
  float: right;
  clear: right;
  width: 18rem;
  margin-right: -21rem;
  font-size: 0.78em;
  line-height: 1.35;
  color: rgb(80 78 72);
}

@media (max-width: 900px) {
  .reading-layout {
    display: block;
  }

  .sidenote {
    float: none;
    display: block;
    width: auto;
    margin: 0.4rem 0 0;
  }
}

Review Checklist

• Main evidence is visible without decorative competition.
• Headings are modest and useful.
• Body measure, line-height, and spacing support sustained reading.
• Notes, labels, captions, and caveats sit near the related text or data.
• Tables use alignment and light rules instead of boxes and fills.
• Numbers use tabular figures where alignment matters.
• Color carries meaning and is not the only signal.
• Mobile layouts keep sidenotes readable inline.
• The result fits the local design system instead of importing a full visual style.

Output Style

When asked to propose or review formatting, respond with a compact table:

Area	Tufte-based change	Why
Heading	Reduce weight and size; use sentence case	Keeps hierarchy without overpowering evidence
Notes	Move footnotes into sidenotes on wide screens	Keeps context beside the claim
Table	Remove vertical rules; right-align numbers	Improves comparison with less ink

When implementing code, make the smallest scoped changes that produce the typographic behavior. Preserve existing design tokens unless they conflict with the evidence-first purpose.