Typography Tokens
Porchlight uses a fluid type scale with clamp() so text smoothly scales
between mobile and desktop without media queries.
Font stacks
| Token | Stack |
|---|---|
--pl-font-sans | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif |
--pl-font-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace |
Type scale
Five steps. The clamp() ranges ensure minimum readability on small
screens and comfortable scaling on large ones:
| Token | Min | Max | Example use |
|---|---|---|---|
--pl-text-xs | 0.75rem (12px) | 0.8125rem (13px) | Captions, labels, timestamps |
--pl-text-sm | 0.875rem (14px) | 0.9375rem (15px) | Body small, secondary text |
--pl-text-md | 1rem (16px) | 1rem (16px) | Body text (default) |
--pl-text-lg | 1.125rem (18px) | 1.25rem (20px) | Card titles, section headings |
--pl-text-xl | 1.25rem (20px) | 1.625rem (26px) | Page titles |
The viewport-relative unit (vi) in the clamp() values means text scales
with 1% of the viewport inline size, not the root font size.
Line height (leading)
| Token | Value | Usage |
|---|---|---|
--pl-leading-tight | 1.2 | Headings, UI labels |
--pl-leading-normal | 1.5 | Body text |
--pl-leading-loose | 1.7 | Long-form prose |
Text wrapping
These are applied globally, not as tokens:
| Property | Value | Usage |
|---|---|---|
text-wrap: balance | Global | Headings (H1-H4) distribute lines evenly |
text-wrap: pretty | Global | Paragraphs avoid orphan words on last line |