-
Notifications
You must be signed in to change notification settings - Fork 3
Typography
Typography in the UMD Libraries Design System inherits from and extends the base UMD Design System typography. Sizing, weight, and line-height values are controlled by the UMD Design System's tokens and are applied consistently across all components.
The primary typeface is Interstate, loaded via the UMD Design System. The fallback stack is:
"Interstate", Helvetica, Arial, Verdana, sans-serif
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.
Typography values are defined as CSS custom properties in base.css. These tokens inherit from the UMD Design System and should not be overridden in component-level CSS. To adapt the type scale, update the token values in base.css.