◆ Type · Body & Lead
DM Sans · the operator's voice
Body 16 px · 1.65 · max 70 ch
Lead 22 px · 1.5 · balance + pretty
TYPE · BODY · MD-TYPE-BODY
◆ What body type has to do

Read like an operator
on a 3am shift.

Body type is where trust gets earned. A dashboard caller can't afford a font that fatigues at paragraph three — every line has to read clean on surface-1 at a glance and on a 4K monitor at three feet.

DM Sans carries the body load because it survives both places. Tall x-height for glanceable labels, friendly terminals for long-form marketing, disambiguated I / l / 1 for numerics that get compared against carrier IDs. No dropped characters, no fashion quirks.

We set lead copy at 22 / 33 and rely on text-wrap: pretty to keep the last lines from orphaning. Body runs at 16 / 26, capped at 70 ch — tight enough to keep the eye tracking, loose enough that stats breathe inside the paragraph.

  • Default weight for paragraphs: 400 Regular
  • Inline emphasis: 600 SemiBold — never italic for emphasis
  • Links: #4DFFB8 with 4-px underline offset
  • Never less than 13 px (legal, fine print only)
READ METERP95
Measure62 ch
Leading1.65
X-height0.53 em
Contrast12.8 : 1
Flesch62
PASSES WCAG AAA text-wrap · pretty
01BODY LADDER · 5 sizes
every size has a job
LEADBODY-LG+
MobDial routes every outbound through the carrier your callers will actually pick up.
SIZE22 / 1.375
WEIGHT400
LEAD1.5
MEASURE< 55 ch
BODY-LGprose
The predictive engine watches agent pacing, carrier latency and local area codes — then paces outbound so agents are always on the phone.
SIZE18 / 1.125
WEIGHT400
LEAD1.6
MEASURE60 ch
BODY-MDdefault
This is the default paragraph size. Long-form sections, support articles, and in-app description copy live here. Reliable, unglamorous, never fails.
SIZE16 / 1rem
WEIGHT400
LEAD1.65
MEASURE65–70 ch
BODY-SMui
Form helper text, dashboard microcopy, table rows. Weight 500 when it needs to punch; 400 for everything else.
SIZE14 / .875
WEIGHT400 / 500
LEAD1.55
MEASURE50 ch
BODY-XSlegal
Disclaimers, metadata rows, footer copy. 12.5 px is the floor — anything below risks AA failure at the muted tier.
SIZE12.5 / .78
WEIGHT400
LEAD1.5
MINAA @ 12.5
02INLINE ELEMENTS · prose richness
b · i · a · code · mark · ul · bq
GLOSSARY DEMO14 elements

Running prose supports emphasis via bold for key terms and italic for titles like On the Air. Links such as carrier partners use brand-hover underline. Inline code like POST /api/call renders mono. You can highlight a phrase the user searched for.

Footnotes and asides sit at 12.5 px muted — still AA on surface-1.

  • Lists use hanging bullets in brand magenta
  • Two-line items wrap cleanly at 1.55 leading
  • Nested lists drop to body-sm
"We cut voicemail-to-live-conversation in half the week we switched."
— Ops lead, carrier customer
03MEASURE · 2-col reading block
never wider than 75 ch per column

The measure of a column is the number of characters per line. At 16 px body with DM Sans, a column 380 px wide lands at roughly 62 characters — inside the 45–75 ch comfort band for sustained reading.

When a layout exceeds 720 px of reading-width, split it into two columns before the eye has to physically track across the page. Column rules use 1px dashed var(--md-border-subtle) — a quiet shepherd.

On narrow viewports, columns collapse at 960 px. Below that, a single column of body-md carries the load.

04TOKEN REFERENCE
CSS custom properties
FAMILYbodyDM Sans
FALLBACKIntersystem-ui
DEFAULTsize16 px
DEFAULTlead1.65
WEIGHTSloaded400/500/600/700
FEATUREsetrlig calt
MEASUREbody60–75 ch
WRAPleadbalance
WRAPbodypretty
COLORdefaultfg-secondary
COLORstrongfg #FFF
MINfloor12.5 px