-
Notifications
You must be signed in to change notification settings - Fork 3
Typography
Typography in the UMD Libraries Design System builds on the base UMD Design System and is implemented as a type ramp of t-* utility classes in css/base.css. Sizing, weight, and line-height are applied consistently across all components through those classes — never via raw font-size.
The fonts are embedded directly in css/base.css as base64 @font-face declarations — no external font request is made.
-
Interstate — the primary UI/body typeface, declared across the full weight range (100–950, normal + italic). Fallback stack:
"Interstate", Helvetica, Arial, Verdana, sans-serif -
Barlow Condensed — used only by the
t-displaystyle (large italic uppercase display text). - Crimson Pro — an embedded serif (weights 300/400+).
Interstate is a licensed font; the embedded faces fall back to Helvetica/Arial. (In Figma the team substitutes Inter / Inter Tight, since Interstate is not plugin-loadable.)
Type styles are applied through the t-* utility classes, not raw font-size. Each class sets family, size, weight, and line-height at once, and cascades to child elements (via the .t-x, .t-x * selector) — so setting a type class on a wrapper tags everything inside it. The ramp scales up at the 768px breakpoint (mobile-first, single responsive step).
| Class | Font | Size (mobile → ≥768px) | Weight | Use |
|---|---|---|---|---|
t-display |
Barlow Condensed | 3rem → 5rem, italic, uppercase | 700 | Display text — page hero and in-component display (e.g. a stat number) |
t-headline |
Interstate | 2rem → 3rem | 700 | Page-level h1 only |
t-title-large |
Interstate | 1.5rem → 2rem | 700 | |
t-title-medium |
Interstate | 1.125rem → 1.5rem | 700 | Card / section titles (default title) |
t-title-small |
Interstate | 1rem → 1.125rem | 700 | |
t-body-large |
Interstate | 1.125rem → 1.5rem | 400 | |
t-body-medium |
Interstate | 1rem → 1.125rem | 400 | |
t-body-small |
Interstate | 1rem | 400 | Workhorse body / card / list text |
t-interactive |
Interstate | 1rem → 1.125rem | 700 | Links / buttons |
t-label |
Interstate | 0.875rem | 400 | Dates, captions, meta |
t-eyebrow |
Interstate | 0.875rem, uppercase | 700 | Eyebrows / kickers |
Modifiers t-uppercase, t-italic, and t-bold stack on top as !important overrides. See Design Tokens and Utility Classes for the full utility reference and Building a Component for how to choose a ramp slot.
Heading styles are applied through the Heading component, not directly through HTML heading elements in the content area. There are four heading variants available:
| Variant | HTML Element | Typical Use |
|---|---|---|
| H1 | <h1> |
Page title (one per page) |
| H2 | <h2> |
Major section heading |
| H3 | <h3> |
Sub-section heading |
| H4 | <h4> |
Minor section heading |
Note: Heading levels H5 and H6 are available as the heading_level prop on components that support it (e.g., Card, Accordion Child) but are not standalone variants of the Heading component.
Body text is managed by the Text component using the WYSIWYG editor with the Basic HTML text format. Standard inline elements supported include:
-
<p>— Paragraph -
<a>— Inline link (see Link) -
<strong>/<b>— Bold -
<em>/<i>— Italic -
<ul>,<ol>,<li>— Lists
Do not use heading elements (<h1>–<h6>) directly inside the Text component. Use the Heading component instead.
The fonts and the t-* ramp are defined in css/base.css and should not be overridden in component-level CSS. To adapt the type scale, update the values in base.css rather than individual components. See Design Tokens for the broader token architecture.