Home / Snippets / Typography /
Condensed heading
Live match ticker: a condensed face keeps long team names on one line beside the clock.
Portland · 102 — Denver · 98 · Final
Overtime thriller in the Rose Quarter; see the full play-by-play in the match center.
Widely Supported
Quick implementation
.scoreboard-title {
font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
font-stretch: condensed;
font-weight: 700;
font-size: clamp(1.4rem, 3.2vw, 1.95rem);
letter-spacing: 0.04em;
text-transform: uppercase;
}Prompt this to your LLM
Tickers and narrow sidebars.
You are building a sports score headline for a narrow card.
Goal: Use a condensed sans (or font-stretch: condensed) so long scores stay on one line.
Constraints:
- Uppercase with wide letter-spacing for legibility at small sizes.
- Clamp font-size between ~1.4rem and ~1.95rem.
Return CSS.Why this matters in 2026
Data-dense UIs need width without shrinking type to illegible sizes; condensed families are built for that.
The logic
font-stretch selects a width instance in variable fonts; otherwise pick a named condensed family.
Accessibility & performance
All-caps reduces readability for some users; reserve for short strings and pair with sentence case body copy.