Sizes and styles
The CT.gov design system brings user experiences to life using only two font faces. For all headlines Poppins is used, and for all other copy Arial is used.
Desktop
The headline or H tag structure is as follows:
Paragraph content or body copy - Arial, 16 pt
Mobile
The headline or H tag structure for mobile devices is as follows:
Paragraph content or body copy - Arial, 16 pt
General guidelines by element
| Element | Recommended line height | Why |
|---|---|---|
|
Body Text |
1.5 to 1.6 (e.g., 16px × 1.5 = 24px) |
Improves legibility, prevents eye fatigue, and meets WCAG accessibility requirements. |
|
Headings / Titles |
1.1 to 1.3 |
Larger text naturally has wider spacing; tightening it prevents massive, disjointed gaps between lines. |
|
Buttons / Inputs |
1.0 to 1.2 (or controlled via padding) |
Keeps components compact so tap targets are easier to manage without disproportionate whitespace. |
|
Microcopy / Footers |
1.3 to 1.4 |
Smaller secondary text requires less breathing room than full paragraphs. |
Pro-tips for CSS and Design Systems
Use unitless values: In CSS, set your line-height as a pure multiplier (e.g., line-height: 1.5;) instead of pixels (e.g., line-height: 24px;). This allows the line height to scale proportionally if the user changes their text size.
Mobile & Web variations: While 1.5 works globally, developers frequently use media queries to push mobile line-heights closer to 1.3 or 1.4. Because mobile screen widths are narrower, eyes travel a much shorter distance, meaning you don't need as much vertical space to separate the lines
The standard line height (or line spacing) for web and mobile body text is 1.5 to 1.6 times the font size. This ratio ensures maximum readability, provides comfortable breathing room between lines, and meets standard accessibility guidelines for both desktop and smartphone screens
