Crimson Pro + Work Sans — Literary & Publishing Typography

Crimson Pro + Work Sans for Publishing

This pairing brings the craft of book typography to the web. Crimson Pro's refined letterforms evoke traditional publishing while Work Sans provides the digital readability modern readers expect.

Crimson Pro: The Digital Book Face

Crimson Pro is an update to the Crimson Text family, redesigned for better screen rendering. Its moderate contrast, slightly condensed proportions, and classical serif structure make it feel like a professionally typeset book.

h1, h2 {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 2.5rem;
}

blockquote {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
}

Work Sans: Clean Digital Complement

Work Sans serves as the structural typeface, handling navigation, metadata, captions, and any text that needs to feel functional rather than editorial.

body {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

Publishing-Specific Techniques

For a literary website, consider using Crimson Pro for both headings AND body text (with Work Sans for UI elements only). This creates an immersive reading experience closer to a physical book. Use 20-22px font size, 1.8 line-height, and a maximum width of 60ch.