Typographies

Atomic classes for managing an element’s typography styling.

Font-style

🔗
Class CSS
.fs-normal font-style: normal;
.fs-italic font-style: italic;
.fs-unset font-style: unset;

Text-transform

🔗
capitalize, lowercase, uppercase, none, unset
Class CSS
.tt-capitalize text-transform: capitalize;
.tt-lowercase text-transform: lowercase;
.tt-uppercase text-transform: uppercase;
.tt-none text-transform: none;
.tt-unset text-transform: unset;

Text-decoration

🔗
Class CSS
.td-none text-decoration: none;
.td-underline text-decoration: underline;
.td-line-through text-decoration: line-through;

Font-weight

🔗
Class CSS
.fw-300e font-weight: 300;
.fw-400 font-weight: 400;
.fw-500 font-weight: 500;
.fw-600 font-weight: 600;
.fw-700 font-weight: 700;
.fw-800 font-weight: 800;
.fw-900 font-weight: 900;

Text-align

🔗
Class CSS
.ta-left text-align: left;
.ta-center text-align: center;
.ta-right text-align: right;
.ta-justify text-align: justify;
.ta-unset text-align: unset;

font-size

🔗
Class Usage
.fs-canon Hero or blog post title
.fs-trafalgar Article title or section header
.fs-paragon Primary headline on indexes
.fs-double-pica Sub header
.fs-great-primer Headline title or subtitle
.fs-body-copy Article body copy only
.fs-pica Index links, titles & headlines
.fs-long-primer Index body copy & image captions
.fs-brevier Time stamps and bylines
.fs-minion Small header capitals

Additional sizes for larger contexts

🔗
Class Usage
.fs-atlas Hero headlines, large display text
.fs-elephant Large headlines, feature titles
.fs-imperial Major section headers
.fs-royal Page titles, important headings
.fs-foolscap Subsection headers

White-space

🔗
Class CSS
.ws-normal white-space: normal;
.ws-nowrap white-space: nowrap;
.ws-pre white-space: pre;
.ws-pre-wrap white-space: pre-wrap;
.ws-pre-line white-space: pre-line;
.ws-unset white-space: unset;

Word-break

🔗
Class CSS
.wb-normal word-break: normal;
.wb-break-all word-break: break-all;
.wb-keep-all word-break: pre;
.wb-inherit word-break: inherit;
.wb-initial word-break: initial;
.wb-unset word-break: unset;

Overflow-wrap

🔗
Class CSS
.ow-normal overflow-wrap: normal;
.ow-break-word overflow-wrap: break-word;
.ow-inherit overflow-wrap: inherit;
.ow-initial overflow-wrap: initial;
.ow-unset overflow-wrap: unset;

Word-wraps

🔗
Class CSS
.ww-break-word word-wraps: break-word;

Hyphens

🔗
none, auto, unset
Class CSS
.hyphens-normal hyphens: normal;
.hyphens-auto hyphens: auto;
.hyphens-unset hyphens: unset;

Customization

Override typography variables:

$font-families: (
  sans: (system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif),
  mono: ("SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace),
);
$base-font-size: 16px;
$font-sizes: atlas, elephant, imperial, royal, foolscap, canon, trafalgar, paragon, double-pica, great-primer, body-copy, pica, long-primer, brevier, minion;
$font-weights: 300, 400, 500, 600, 700, 800, 900;
$font-styles: normal, italic, unset;
$text-aligns: left, center, right, justify, unset;
$text-decorations: none, underline, line-through;
$text-transforms: capitalize, lowercase, uppercase, none, unset;
$white-spaces: normal, nowrap, pre, pre-wrap, pre-line, unset;
$word-breaks: normal, break-all, keep-all, inherit, initial, unset;
$overflow-wraps: normal, break-word, inherit, initial, unset;
$word-wraps: break-word;
$hyphens: none, auto, unset;