Type

Font Size

Font sizes across breakpoints. Since this is likely the most common font attribute you will use, it's shortened to simply f

font-size 0
font-size .1
font-size .2
font-size .3
font-size .4
font-size .5
font-size .6
font-size .7
font-size .8
font-size .9
font-size 1 base size
font-size 2
font-size 3
font-size 4
font-size 5
font-size 6
font-size 7
font-size 8
font-size 9
font-size 10
<div class="f:0">font-size 0</div>
<div class="f:.1">font-size .1</div>
<div class="f:.2">font-size .2</div>
<div class="f:.3">font-size .3</div>
<div class="f:.4">font-size .4</div>
<div class="f:.5">font-size .5</div>
<div class="f:.6">font-size .6</div>
<div class="f:.7">font-size .7</div>
<div class="f:.8">font-size .8</div>
<div class="f:.9">font-size .9</div>
<div class="f:1">font-size 1 base size</div>
<div class="f:2">font-size 2</div>
<div class="f:3">font-size 3</div>
<div class="f:4">font-size 4</div>
<div class="f:5">font-size 5</div>
<div class="f:6">font-size 6</div>
<div class="f:7">font-size 7</div>
<div class="f:8">font-size 8</div>
<div class="f:9">font-size 9</div>
<div class="f:10">font-size 10</div>

Font Weight

Font weights across breakpoints

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900
<div class="f-w:100">font-weight: 100</div>
<div class="f-w:200">font-weight: 200</div>
<div class="f-w:300">font-weight: 300</div>
<div class="f-w:400">font-weight: 400</div>
<div class="f-w:500">font-weight: 500</div>
<div class="f-w:600">font-weight: 600</div>
<div class="f-w:700">font-weight: 700</div>
<div class="f-w:800">font-weight: 800</div>
<div class="f-w:900">font-weight: 900</div>

Font Style

Font styles across breakpoints

font-style: normal
font-style: italic
font-style: oblique
<div class="f-s:n">font-style: normal</div>
<div class="f-s:i">font-style: italic</div>
<div class="f-s:o">font-style: oblique</div>

Font Family

Font families

font-family: sans
font-family: serif
font-family: mono
<div class="f-f:sans">font-family: sans</div>
<div class="f-f:serif">font-family: serif</div>
<div class="f-f:mono">font-family: mono</div>

Line Height

Line height utilities across breakpoints

line-height: default
line-height: tight
line-height: normal
line-height: loose
<div class="l-h:d">line-height: default</div>
<div class="l-h:t">line-height: tight</div>
<div class="l-h:n">line-height: normal</div>
<div class="l-h:l">line-height: loose</div>

Letter Spacing

Letter spacing utilities across breakpoints

letter-spacing: default
letter-spacing: tight
letter-spacing: normal
letter-spacing: loose
<div class="l-s:d">letter-spacing: default</div>
<div class="l-s:t">letter-spacing: tight</div>
<div class="l-s:n">letter-spacing: normal</div>
<div class="l-s:l">letter-spacing: loose</div>

Text Decoration

Text decoration utilities across breakpoints

text-decoration: none
text-decoration: underline
text-decoration: line-through
hover / text-decoration: none
hover / text-decoration: underline
hover / text-decoration: line-through
focus / text-decoration: none
focus / text-decoration: underline
focus / text-decoration: line-through
active / text-decoration: none
active / text-decoration: underline
active / text-decoration: line-through
visited / text-decoration: none
visited / text-decoration: underline
visited / text-decoration: line-through
<div class="t-d:n">text-decoration: none</div>
<div class="t-d:u">text-decoration: underline</div>
<div class="t-d:l-t">text-decoration: line-through</div>

<div class="hover/t-d:n">hover / text-decoration: none</div>
<div class="hover/t-d:u">hover / text-decoration: underline</div>
<div class="hover/t-d:l-t">hover / text-decoration: line-through</div>

<div class="focus/t-d:n">focus / text-decoration: none</div>
<div class="focus/t-d:u">focus / text-decoration: underline</div>
<div class="focus/t-d:l-t">focus / text-decoration: line-through</div>

<div class="active/t-d:n">active / text-decoration: none</div>
<div class="active/t-d:u">active / text-decoration: underline</div>
<div class="active/t-d:l-t">active / text-decoration: line-through</div>

<div class="visited/t-d:n">visited / text-decoration: none</div>
<div class="visited/t-d:u">visited / text-decoration: underline</div>
<div class="visited/t-d:l-t">visited / text-decoration: line-through</div>

Text Transform

Text transform utilities across breakpoints

text-transform: none
text-transform: uppercase
text-transform: lowercase
text-transform: capitalize
<div class="t-t:n">text-transform: none</div>
<div class="t-t:u">text-transform: uppercase</div>
<div class="t-t:l">text-transform: lowercase</div>
<div class="t-t:c">text-transform: capitalize</div>

Text Align

Text alignment utilities across breakpoints

text-align: center
text-align: left
text-align: right
text-align: justify
<div class="t-a:c">text-align: center</div>
<div class="t-a:l">text-align: left</div>
<div class="t-a:r">text-align: right</div>
<div class="t-a:j">text-align: justify</div>