Typography
Two typefaces with two jobs. Oswald, condensed and always uppercase at 700, carries every headline; DM Sans, plain at 1rem, carries everything else. Both are self-hosted variable fonts, and the gap between the two voices is the point.
High typographic contrast
The brand's typographic signature is the distance between its loudest and quietest voices, placed side by side: a .75rem tracked label, a heading up to 9rem, and a 1rem paragraph. Headlines are large so they can be short; body stays small so it can be long. Neither moves toward the other.
Car accidents · North Carolina
They have adjusters. You have us.
The insurer's first offer is a number chosen to make you go away. We read the police report, the medical records and the policy before we tell you what the claim is worth — and then we hold them to it.
| Pairing | Ratio at desktop | Rule |
|---|---|---|
--display-poster over --text-body | 9 : 1 | The maximum. Poster is under eight words. |
--display-hero over --lead-hero | 4.4 : 1 | Hero headline under twelve words; the lead carries the rest. |
--display-section over --text-body | 5 : 1 | Section heading under eight words. |
--text-label beside any display size | 1 : 12 and beyond | The label is always present above a display heading. It is the small end that makes the large end read as large. |
Oswald and DM Sans
Two variable faces served from /design-system/fonts/. --display is Oswald, weight axis 200–700, used only at 700 and only in capitals: a headline is a set block, not a sentence. --body is DM Sans, weight axis 100–1000, which carries body, leads, labels, kickers, buttons and captions. Nothing else is ever set in Oswald, and no headline is ever set in DM Sans.
Oswald · 700 · uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 & $ % — “ ” ’
DM Sans · 400 / 650 / 750
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
The insurer's first offer is a number chosen to make you go away.
Car accidents · North Carolina
Display metrics are fixed
Every display size shares the same four metrics. Only the size token changes — which is why display headings are one CSS rule, not seven.
| Property | Value | Why |
|---|---|---|
| font-weight | 700 | Oswald's top weight; display type is always at it |
| text-transform | uppercase | Every headline is capitals. Write copy in sentence case; the rule sets it |
| letter-spacing | .01em | Slightly open. The condensed face closes up on its own; negative tracking would weld the letters |
| line-height | .95 | Sub-1 leading; capitals have no descenders, so headlines set as blocks, not lines |
Display scale
Named by the job each size does, not by a step number. The ramp is not geometric — every clamp was tuned against real copy, so --display-band is not --display-section minus one step.
Body scale
| Token | Value | Use | Sample |
|---|---|---|---|
--lead-hero | clamp(1.1rem, 1.45vw, 1.3rem) | Hero supporting sentence. | We handle the claim. |
--lead-section | clamp(1.1rem, 1.7vw, 1.4rem) | Section intro paragraph. | We handle the claim. |
--text-body | 1rem | Body copy. | We handle the claim. |
--text-small | .88rem | Consent, form notes, fine print. | We handle the claim. |
--text-label | .75rem | Eyebrows, kickers, section labels. | We handle the claim. |
Weights
650 and 750 are DM Sans weights and are deliberate. They are not roundable to 600 and 700 — the variable axis renders them distinctly and the system depends on the difference. 700 is the only Oswald weight in use.
| Token | Value | Use | Sample |
|---|---|---|---|
--weight-body | 400 | Body copy | Wallace Pierce Law |
--weight-medium | 650 | Nav links, trust items, captions | Wallace Pierce Law |
--weight-label | 750 | Labels, kickers, eyebrows | Wallace Pierce Law |
--weight-cta | 750 | Buttons | Wallace Pierce Law |
--weight-display | 700 | All display headings | Wallace Pierce Law |