Work Sans + Lora — Clean Editorial Typography

Work Sans + Lora for Editorial Content

This pairing reverses the typical serif heading / sans-serif body pattern. Work Sans provides clean, modern headings while Lora's warm serif letterforms create an inviting reading experience for long-form content.

Work Sans: The Quiet Headline

Work Sans is a grotesque sans-serif optimized for on-screen text. Its slightly narrow proportions and clean geometry make it an excellent heading font that does not distract from the content below.

h1, h2, h3 {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  font-weight: 700;
}

Lora: Built for Extended Reading

Lora is a well-balanced contemporary serif with roots in calligraphy. Its moderate contrast between thick and thin strokes makes it comfortable for extended screen reading, unlike high-contrast serifs that can cause eye fatigue.

body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.75;
  font-size: 18px;
}

Editorial Design Tips

For storytelling websites, use generous whitespace around text blocks, full-width images between sections, and pull quotes set in Lora italic at a larger size (24px). The combination of Work Sans's restraint and Lora's warmth creates an atmosphere that says "settle in and read."