Type scale

E-Ink rationale: System fonts avoid FOUT/FOIT and the full-page repaint that webfont loading would trigger. The scale is generous — E-Ink screens typically run at 150–300 PPI, so slightly larger text improves legibility.

--eink-text-4xl (2.25rem)

Heading 1

--eink-text-3xl (1.875rem)

Heading 2

--eink-text-2xl (1.5rem)

Heading 3

--eink-text-xl (1.25rem)

Heading 4

--eink-text-base (1rem)

Body text — the default size for paragraphs and general content.

--eink-text-sm (0.875rem)

Small text — captions, help text, labels.

--eink-text-xs (0.75rem)

Extra small — fine print, metadata, timestamps.

Font stacks

Sans-serif

The quick brown fox jumps over the lazy dog. 0123456789.

Serif

The quick brown fox jumps over the lazy dog. 0123456789.

Monospace

The quick brown fox jumps over the lazy dog. 0123456789.

Line length (measure)

E-Ink rationale: Controlled line length prevents eye-tracking loss on wide screens and avoids reflow/re-pagination on narrow ones. The 65ch default matches typographic best practice.

Narrow (45ch)

This paragraph is constrained to 45 characters wide. It's suitable for single-column reading on smaller E-Ink screens or sidebar content.

Default (65ch)

This paragraph uses the default measure of 65 characters. It provides a comfortable reading experience for body text, balancing line length with information density on standard 6–8 inch E-Ink displays.

Wide (80ch)

This paragraph uses the wide measure of 80 characters. Use sparingly — only for data-dense content like tables or code where horizontal space is needed. Most E-Ink readers are too narrow for this to matter, but it caps width on larger devices like the Kindle Scribe.

Prose block

The .eink-prose class adds vertical rhythm between child elements.

On the legibility of electronic paper

Electronic paper displays — commonly called E-Ink after the dominant manufacturer — use electrophoretic technology to rearrange charged pigment particles between two electrode layers. The result is a reflective display that closely mimics paper.

Unlike LCD or OLED screens, E-Ink requires no backlight. The display is perfectly legible in direct sunlight, making it ideal for extended reading. However, the slow refresh rate (typically 250–450ms for a full page update) demands careful UI design.

"The best interface for a reading device is one that disappears entirely."

Design constraints for E-Ink include: no animations, no hover effects (most E-Ink devices are touch-only or use D-pad navigation), minimal use of filled backgrounds, and generous spacing to avoid ghosting artifacts.

Inline elements

Bold text using <strong>

Italic text using <em>

Small text using <small>

Marked/highlighted text using <mark>

Inline code using <code>

Ctrl + S using <kbd>

E-Ink using <abbr>

A link to somewhere using <a>

Code block

E-Ink rationale: Code blocks use a subtle background border rather than a filled background to minimize the repainted area on page render.

/* Example: using eink-ui tokens */
.my-component {
  color: var(--eink-fg);
  border: var(--eink-border-thin) solid var(--eink-border-color);
  padding: var(--eink-space-4);
  font-family: var(--eink-font-sans);
}

Hyphenation & word-break

E-Ink rationale: Hyphenation is intentionally NOT enabled by default. On E-Ink devices, hyphenation triggers re-layout during pagination which causes visible ghosting. Use hyphens: auto only if the reading system handles pagination (e.g., embedded book readers). For UI text, overflow-wrap: break-word is a safer fallback.

Supercalifragilisticexpialidocious and other extraordinarily long words handled with overflow-wrap: break-word.