Typography

Override default colors, styles, sizes and more with these utility classes.

Colors

tc--<color>

Class	Property & Value
`tc--white`	`color: $white`
`tc--white-alpha`	`color: $white-alpha`
`tc--black`	`color: $black`
`tc--black-alpha`	`color: $black-alpha`
`tc--gray`	`color: $gray`
`tc--gray-50`	`color: $gray-50`
`tc--gray-100`	`color: $gray-100`
`tc--gray-200`	`color: $gray-200`
`tc--gray-300`	`color: $gray-300`
`tc--gray-400`	`color: $gray-400`
`tc--gray-500`	`color: $gray-500`
`tc--gray-600`	`color: $gray-600`
`tc--gray-700`	`color: $gray-700`
`tc--gray-800`	`color: $gray-800`
`tc--gray-900`	`color: $gray-900`
`tc--red`	`color: $red`
`tc--red-dark`	`color: $red-dark`
`tc--red-light`	`color: $red-light`
`tc--orange`	`color: $orange`
`tc--yellow`	`color: $yellow`
`tc--green`	`color: $green`
`tc--teal`	`color: $teal`
`tc--blue`	`color: $blue`
`tc--blue-dark`	`color: $blue-dark`
`tc--purple`	`color: $purple`
`tc--beige`	`color: $beige`

Font Family

ff--<family>

Class	Property & Value
`ff--sans`	`font-family: $type-sans`
`ff--serif`	`font-family: $type-serif`
`ff--mono`	`font-family: $type-mono`

Class	Property & Value
`fs--root`	`@include type-root()`
`fs--xs`	`@include type-xs(false, true)`
`fs--sm`	`@include type-sm(false, true)`
`fs--lead`	`@include type-lead(1)`
`fs--d1`	`@include type-d1(false, true)`
`fs--d2`	`@include type-d2(false, true)`
`fs--d3`	`@include type-d3(false, true)`
`fs--d4`	`@include type-d4(false, true)`
`fs--d5`	`@include type-d5(false, true)`

Font Weight

fw--<weight>

Class	Property & Value
`fw--normal`	`font-weight: normal`
`fw--bold`	`font-weight: bold`
`fw--100`	`font-weight: 100`
`fw--200`	`font-weight: 200`
`fw--300`	`font-weight: 300`
`fw--400`	`font-weight: 400`
`fw--500`	`font-weight: 500`
`fw--600`	`font-weight: 600`
`fw--700`	`font-weight: 700`
`fw--900`	`font-weight: 900`

Letter Spacing

ls--<weight>

Class	Property & Value
`ls--none`	`letter-spacing: normal`
`ls--tight`	`letter-spacing: $letter-spacing-tight`
`ls--loose`	`letter-spacing: $letter-spacing-loose`

Line Height

lh--<size>

Class	Property & Value
`lh--inherit`	`line-height: inherit`
`lh--tight`	`line-height: $line-height-tight`
`lh--normal`	`line-height: $line-height-normal`
`lh--loose`	`line-height: $line-height-loose`

Lists

ls--<style>

Class	Property & Value
`ls--none`	`padding-left: 0` `list-style: none`
`ls--inline`	`padding-left: 0` `list-style: none`

Measure

measure--<length>

Class	Property & Value
`measure`	`max-width: $measure`
`measure--wide`	`max-width: $measure-wide`
`measure--narrow`	`max-width: $measure-narrow`

Style & Decoration

<property>--<value>

Class	Property & Value
Style
`fs--italic`	`font-style: italic`
`fs--roman`	`font-style: normal`
Decoration
`td--u`	`text-decoration: underline`
`td--line`	`text-decoration: line-through`
`td--none`	`text-decoration: none`
Transform
`tt--normal`	`text-transform: none`
`tt--l`	`text-transform: lowercase`
`tt--u`	`text-transform: uppercase`
`tt--c`	`text-transform: capitalize`
`tt--caps`	`font-size:92%` `text-transform: uppercase` `letter-spacing: 0.03rem`
Smoothing	(enable/disable for high-pixel-density screens)
`fs--smooth`	`-webkit-font-smoothing: antialiased` `-moz-osx-font-smoothing: grayscale`
`fs--smooth-auto`	`-webkit-font-smoothing: auto` `-moz-osx-font-smoothing: auto`

Text Alignment

ta--<value>

Class	Property & Value
`ta--l`	`text-align: left`
`ta--r`	`text-align: right`
`ta--c`	`text-align: center`

Text Shadow

ts

Class	Property & Value
`ts`	`text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25)`

Vertical Alignment

va--<value>

Class	Property & Value
`va--base`	`vertical-align: baseline`
`va--m`	`vertical-align: middle`
`va--t`	`vertical-align: top`
`va--b`	`vertical-align: bottom`

Whitespace & Wrapping

ws--<value>

Class	Property & Value
`ws--normal`	`white-space: normal`
`ws--nowrap`	`white-space: nowrap`
`ws--pre`	`white-space: pre`

Word Break

wb--<value>

Class	Property & Value
`wb--normal`	`word-break: normal`
`wb--wrap`	`word-break: break-all`
`wb--nowrap`	`word-break: keep-all`

# Typography

# Colors

# Font Family

# Font Size

# Font Weight

# Letter Spacing

# Line Height

# Lists

# Measure

# Style & Decoration

# Text Alignment

# Text Shadow

# Vertical Alignment

# Whitespace & Wrapping

# Word Break