Typography

This page documents the FDIC design system's foundational type rules and the stable typography tokens published in the runtime stylesheet.

Typography foundations

Typography decisions optimize for readability, plain-language presentation, clear scanning in public-service workflows, and predictable behavior across zoom and reflow. For the authored-content container, page-level utilities, and specialized long-form patterns, see Prose.

Font families

The public runtime contract includes two font-family tokens: a sans-serif family for body and heading content, and a monospace stack for code. The shipped typography token family uses the --fdic-font-*, --fdic-line-height-*, and --fdic-letter-spacing-* prefixes.

Sans-serif

Source Sans 3

The FDIC brand typeface. Successor to Source Sans Pro with variable-weight support. Loaded via Google Fonts @import.

--fdic-font-family-sans-serif

Monospace

System monospace stack

Used for code blocks, inline code, kbd, samp, var, and output elements. No external font load required.

--fdic-font-family-mono

Sans-serif stack: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Monospace stack: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace

Font shorthand is banned

Always use individual properties (font-family, font-size, font-weight, line-height) to avoid PostCSS parse failures. Never use the font shorthand.

Type scale

The size ramp is locked — do not change without leadership approval.

Financial guidance should feel clear and official.

h1 · 2.5313rem · weight 600

Review and confirm your account details

h2 · 1.6875rem · weight 600

Body copy should be easy to read, support plain language, and remain readable under zoom and reflow.

body · 1.125rem · weight 400

Supporting text helps explain why information is requested and what will happen next.

body-small · 1rem · weight 400

Font size tokens

TokenValueUsage

--fdic-font-size-h12.5313remPage title

--fdic-font-size-h21.6875remSection heading

--fdic-font-size-h31.4063remSubsection heading

--fdic-font-size-h41.125remMinor heading

--fdic-font-size-body1.125remDefault reading text

--fdic-font-size-body-big1.25remLead paragraphs, article intros

--fdic-font-size-body-small1remSupporting text, footnotes

Line height tokens

TokenValueUsage

--fdic-line-height-h11.15Page title — tight for large text

--fdic-line-height-h21.2Section headings

--fdic-line-height-h31.25Subsection headings

--fdic-line-height-h41.25Minor headings

--fdic-line-height-body1.375Body text — the shipped default reading rhythm

Letter spacing tokens

Token	Value	Usage
--fdic-letter-spacing-none	0	Body text, default
--fdic-letter-spacing-h1	-0.025em	h1 headings
--fdic-letter-spacing-h2	-0.019em	h2 headings
--fdic-letter-spacing-h6	0.148em	small uppercase-style headings

Responsive scaling

Responsive type behavior exists in the source of truth and in some docs implementations, but separate public mobile typography token bundles are not part of the v1 runtime contract.

Use the stable typography tokens as the baseline and add app-level media queries only for your page layout or prose treatment. Do not assume a second published token scale exists for mobile.

Heading styles

All headings use weight 600, primary color (#212123), and re-declare font-family for standalone safety.

• h1: padding-bottom + border-bottom — the only heading with a visible divider
• h2: padding-bottom only
• Vertical rhythm: 1.5em above, 0.5em below each heading
• Stacked headings (h2 + h3, h3 + h4, etc.): top margin collapses to 0.5em

Heading hierarchy

Use headings in strict hierarchical order (h1, h2, h3) — never skip levels or use headings for visual sizing alone. One h1 per page. (WCAG 1.3.1)

Body text

• Size: 1.125rem (18px), line-height 1.5, weight 400
• Text rendering: -webkit-font-smoothing: antialiased, -moz-osx-font-smoothing: grayscale, text-rendering: optimizeLegibility
• Text wrapping: text-wrap: pretty and hanging-punctuation: first allow-end last
• Selection: rgba brand-blue at 20% opacity

Lead paragraph

The .lead (or .prose-lead) class is used for article introductions and section summaries:

• Size: 1.25rem (--fdic-font-size-body-big)
• Color: secondary (#595961)

<p class="lead">This introductory paragraph summarizes the section.</p>

Blockquotes

These rules define the baseline visual treatment for quoted content. For rendered examples alongside headings, lists, and supporting patterns, see Prose.

• Line-height: 1.6 (slightly airier than body)
• Color: secondary (#595961)
• Left border: 4px solid brand-blue (#0d6191)
• Nested blockquotes use --fdic-color-border-divider for the border to show hierarchy

Attribution

Wrap attributions in <footer><cite> — do not use blockquotes for visual indentation of non-quoted content (WCAG 1.3.1).

Inline element styles

These styles describe the baseline treatment for inline semantic HTML in authored content. The current implementation is most visible inside .prose, but the rules here are foundational rather than page-specific:

For rendered examples that show these elements in running content, see Prose.

ElementVisual treatmentKey styles

abbr[title]Dotted underline, help cursorSecondary color underline, text-underline-offset: 0.15em

kbdKey-cap effectMonospace 0.8em, container bg, 1px border + 2px bottom border, border-radius-sm

markYellow highlight#fff3cd background, color: inherit, 2px radius

smallReduced text0.875em, secondary color

delStrikethroughline-through in secondary color

insGreen backgroundNo underline, #e6f4ea background, 2px radius

dfnDefinition termItalic + weight 600

varVariableMonospace italic, 0.875em

qInline quotationCurly quotes via CSS quotes property

sampSample outputMonospace 0.8em, container bg, 3px left border

outputComputed resultMonospace 0.8em, container bg, 1px border all around

time[datetime][title]Dotted underline, help cursorSame treatment as abbr

sup / subSuper/subscript0.75em, line-height: 0 (prevents line distortion)

Accessibility notes for inline elements

• <del> / <ins>: Include <span class="sr-only">deleted: </span> or <span class="sr-only">inserted: </span> inside so screen readers announce the change
• <mark>: Screen reader support for role="mark" is inconsistent — ensure surrounding text conveys the significance without relying on color alone
• <abbr>: Spell out abbreviations on first use in visible body text: Federal Deposit Insurance Corporation (<abbr title="...">FDIC</abbr>)
• <output>: Has implicit role="status" (ARIA live region) — use the for attribute to associate with input controls

Link styling

Links use a four-state color model with underline thickness transitions:

StateColorUnderline

Default #1278B0thickness 6.25%, offset 12.5%, from-font position

Hover #0D6191thickness bumps to 2px

Visited #855AA5same as default

Visited hover #79579Fthickness 2px

• Focus: outline: 2px solid var(--fdic-color-border-input-focus), outline-offset: 2px, border-radius: 2px
• External links (a[href^="http"]:not([href*="fdic.gov"])): Phosphor ArrowSquareOut icon appended via background-image with padding-right; visited variant swaps icon fill to visited purple
• Content guidance: Use descriptive link text that makes sense out of context — avoid "click here" or "read more"

Spacing conventions

All spacing tokens use rem — never px.

TokenValueUsage

--fdic-spacing-2xs0.25remSimple list item spacing, tight gaps

--fdic-spacing-xs0.5remBelow-heading spacing

--fdic-spacing-sm0.75remInternal component padding

--fdic-spacing-md1remComplex list item spacing

--fdic-spacing-xl1.25remDefault block element margin-bottom

--fdic-spacing-3xl3remThematic breaks (<hr>)

Vertical rhythm rules

• Block elements (p, ul, ol, dl, blockquote, pre, figure, table, hr): margin-top: 0; margin-bottom: var(--fdic-spacing-xl, 1.25rem)
• Headings: 1.5em above, 0.5em below
• HR: --fdic-spacing-3xl (3rem) above and below — larger gap for thematic breaks
• Boundary resets: First child of .prose gets margin-top: 0; last child gets margin-bottom: 0

List spacing

• Simple items: --fdic-spacing-2xs (0.25rem) between siblings
• Complex items (containing <p>): --fdic-spacing-md (1rem) between siblings
• Nested lists: tight to parent (0.25rem above, 0 below)
• Sibling items with nested lists: 1rem between them

Text rendering and wrapping

These text-rendering and wrapping defaults are currently applied through the .prose content container. They are documented here because they reflect the underlying reading model rather than a one-off component decision:

Property	Value	Purpose
text-wrap	pretty	Prevents orphaned words at line ends
hanging-punctuation	first allow-end last	Optically aligned punctuation at margins
-webkit-font-smoothing	antialiased	Consistent subpixel rendering on macOS
-moz-osx-font-smoothing	grayscale	Firefox equivalent
text-rendering	optimizeLegibility	Enables kerning and ligatures
max-width	65ch	Optimal line length for sustained reading (45–75ch range)

See Prose for the container API, supporting patterns, and long-form authoring guidance. Override --prose-max-width only in layouts that have a documented need for a different reading measure.

Content guidance

Typography should support direct, explicit government content:

• Use short headings with clear meaning
• Use plain-language labels
• Maintain readable line lengths via the 65ch max-width
• Use paragraph spacing that supports scanning
• Spell out abbreviations on first use in body text
• Write descriptive link text that makes sense out of context
• Use <pre><code class="language-{lang}"> for code examples

Do not treat the type scale as visual decoration without considering document structure and comprehension.