One Tag Switches the Typeface

Every section heading on the redesigned homepage ends with an italic serif line. The hero: More business. The problem section: feed a spreadsheet. The work section: Still working. Six headings, same pattern.

The implementation is one CSS rule:

.studio-home h2 em {
  font-family: var(--font-fraunces), serif;
  font-weight: 400;
  letter-spacing: -.045em;
}

That's it. The heading is Manrope, the em inside it switches to Fraunces.

Why em and not span

The em element already renders italic by default. Fraunces is an optical-size serif with a prominent italic cut, so the browser's default italic rendering is the right one. Using em means the word carries semantic weight (emphasis) and gets the correct italic style without a font-style: italic declaration. A span with a class would have worked, but it carries no meaning and would have required an extra style property.

The markup reads naturally too: <h2>Your software<br /><em>department.</em></h2>. The line break and the emphasis are both in the HTML where a reader would expect them.

Letter-spacing is per-font, not universal

The h2 base rule sets letter-spacing: -.055em for Manrope. Fraunces has different optical metrics at the same size. At -.055em it looked too compressed, specifically on the round lowercase letters. We re-tuned the em override to -.045em, slightly less tight.

The hero h1 is the same situation. The h1 sets letter-spacing: -.067em for Manrope. The italic em line in the hero overrides to -.065em. Two em values, two different letter-spacing values, arrived at by rendering both at the actual display size and adjusting until the optical weight matched.

There is no formula for this. You pick values, render them at the size they will actually appear, and adjust.

The hero em gets three overrides

The hero h1 is a special case. Its em line is not just a different typeface: it is also the brand blue and it animates in 70ms after the first line.

.studio-hero h1 > em {
  font-family: var(--font-fraunces), serif;
  color: var(--studio-blue);
  font-weight: 400;
  letter-spacing: -.065em;
  animation-delay: 70ms;
}

The parent h1 has animation: studio-rise .7s var(--studio-spring) both applied to both child spans. The em inherits the animation and the delay property staggers it behind the first line. Three independent properties on a single element with no JavaScript.

Fraunces elsewhere on the page

The same font appears in the client name wall below the hero. Homefront Family Services and The Finishing Touch both have a soft, formal quality that pairs with the serif. Their names render in Fraunces with no italic, just the font-family swap and a slightly larger size.

.trust-homefront {
  font-family: var(--font-fraunces), serif;
  font-size: 24px;
  font-weight: 500;
}
.trust-finishing {
  font-family: var(--font-fraunces), serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
}

The Finishing Touch gets an explicit italic because that name reads better in italic. Homefront stays upright. Both use the same font, two different stylistic choices applied through the same mechanism.

The thing worth keeping

One CSS rule on a semantic element, with per-font letter-spacing tuned at render size. No wrapper components, no font-variant classes, no JavaScript. The heading structure is exactly what it looks like in the source.