Text
Size, weight, color, alignment and spacing for type.
Type is styled with three properties. font sets the typeface: size, family, weight and letter spacing. text sets how the text sits on the page: color, line height, line length, alignment and decoration. format handles case and wrapping.
<h2 class="font:h4:semibold:tight text:grey-3:snug">…</h2><p class="font:base text:grey:relaxed:blog">…</p>font
| Modifier | Values | Compiles to |
|---|---|---|
| Size | tiny, eyebrow, small, base, h6, h5, h4, h3, h2, h1, display (type scale) | font-size |
| Family | sans, serif, mono, rounded: each the operating system’s own font, with fallbacks | font-family |
| Weight | thin 100, extra-light 200, light 300, regular 400, medium 500, semibold 600, bold 700, extra-bold 800, black 900 | font-weight |
| Letter spacing | extra-tight -0.04em, tight -0.02em, normal 0, wide 0.02em, wider 0.05em, widest 0.1em | letter-spacing |
The default families use the fonts already on each device, like San Francisco on Apple devices and Segoe UI on Windows, so they look native and load instantly. To use a brand font, load it in your CSS and point a family token at it in elevate/. Letter spacing is in em, so it scales with the text: tight on a headline does as much as tight on body copy.
text
| Modifier | Values | Compiles to |
|---|---|---|
| Color | Any color token | color |
| Line height | none 1, hug 1.2, snug 1.3, normal 1.4, relaxed 1.5, loose 1.6, spacious 1.7, extra-spacious 1.8 | line-height |
| Line length | note 20ch, blob 35ch, brief 45ch, blog 65ch, book 70ch, essay 75ch, full 80ch | max-width |
| Alignment | left, center, right, justify | text-align |
| Decoration | underline, overline, line-through, underline-overline, underline-line-through, overline-line-through, underline-overline-line-through, no-decoration | text-decoration |
text:none sets line-height: 1. To remove an underline, use text:no-decoration.
format
| Modifier | Values | Compiles to |
|---|---|---|
| Case | uppercase, lowercase, capitalize | text-transform |
| Hyphens | none, manual, auto | hyphens |
| White space | normal, no-wrap, pre, pre-line, pre-wrap, break-spaces | white-space |
| Word break | all (break-all), keep (keep-all), word (break-word), break-normal | word-break |
| Overflow wrap | break-word, anywhere, wrap-normal | overflow-wrap |
format:normal sets white-space. The other two axes use break-normal and wrap-normal.
<p class="format:no-wrap overflow:hidden text-overflow:ellipsis">…</p>More type properties
Each of these is its own property.
| Property | Values | Example |
|---|---|---|
font-style | normal, italic, oblique | font-style: |
font-variant | normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps | font-variant: |
font-stretch | ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded | font-stretch: |
text-indent | A spacing token | text-indent: |
text-overflow | clip, ellipsis | text-overflow: |
text-rendering | auto, optimizeSpeed, optimizeLegibility, geometricPrecision | text-rendering: |
word-spacing | A spacing token | word-spacing: |
tab-size | A number | tab-size: |
writing-mode | horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr | writing-mode: |
direction | ltr, rtl | direction: |
unicode-bidi | normal, embed, bidi-override, isolate, isolate-override, plaintext | unicode-bidi: |
line-clamp | A number | line-clamp: |
text-decoration-color | A color token | text-decoration-color: |
text-decoration-style | solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden | text-decoration-style: |
text-decoration-thickness | A spacing token | text-decoration-thickness: |
line-clamp writes only the standard line-clamp property. Browsers that need the older -webkit-line-clamp with display: -webkit-box won’t clamp from this class alone.