Italic display heading

Fraunces’ italic axis at display sizes gives a warm, editorial swing—useful for culture sites and annual reports.

Notes from the winter studio

Sketches, pigments, and late-afternoon light on the paper—this season’s catalog opens with a softer voice than last year’s bold sans.

Widely Supported

typographyitalicno-js

Quick implementation

.hero-italic {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

Prompt this to your LLM

Magazine-style landing pages.

You are styling a hero headline that should feel editorial and warm.

Goal: Italic display serif (variable font Fraunces or similar), not a slanted sans.

Constraints:
- Use font-style: italic with a serif that has a true italic.
- Clamp font-size between ~1.65rem and ~2.35rem; tight line-height.
- Body blurb stays sans or neutral text below.

Return CSS for .hero-italic and a short HTML example.

Why this matters in 2026

Brand voices diversify beyond geometric sans; italic display serifs signal craft and human curation.

The logic

Variable fonts with optical size let you lean on display cuts without loading separate files.

Accessibility & performance

Italic blocks can be harder for some readers; keep supporting paragraphs in upright roman for contrast.