Typography
Typography utilities are prefixed with t-.
Fonts
DreamHost uses Ubuntu for headings and Proxima Nova for body text.
(.t-heading) The quick brown fox jumps over the lazy dog.
(.t-body) The quick brown fox jumps over the lazy dog.
(.t-mono)The quick brown fox jumps over the lazy dog.
<p class="t-heading">The quick brown fox jumps over the lazy dog.</p>
<p class="t-body">The quick brown fox jumps over the lazy dog.</p>
<p class="t-mono">The quick brown fox jumps over the lazy dog.</p>Sizes
(.t-5) The quick brown fox jumps over the lazy dog.
2rem, 32px(.t-4) The quick brown fox jumps over the lazy dog.
1.5rem, 24px(.t-3 - default) The quick brown fox jumps over the lazy dog.
1rem, 16px(.t-2) The quick brown fox jumps over the lazy dog.
0.875rem, 14px(.t-1) The quick brown fox jumps over the lazy dog.
0.75rem, 12px<p class="t-5">The quick brown fox jumps over the lazy dog.</p>
<p class="t-4">The quick brown fox jumps over the lazy dog.</p>
<p class="t-3">The quick brown fox jumps over the lazy dog.</p>
<p class="t-2">The quick brown fox jumps over the lazy dog.</p>
<p class="t-1">The quick brown fox jumps over the lazy dog.</p>Alignment
(.t-left) The quick brown fox jumps over the lazy dog.
(.t-right) The quick brown fox jumps over the lazy dog.
(.t-center) The quick brown fox jumps over the lazy dog.
<p class="t-left">The quick brown fox jumps over the lazy dog.</p>
<p class="t-right">The quick brown fox jumps over the lazy dog.</p>
<p class="t-center">The quick brown fox jumps over the lazy dog.</p>Weight
(.t-bold) The quick brown fox jumps over the lazy dog.
(.t-regular) The quick brown fox jumps over the lazy dog.
(.t-light) The quick brown fox jumps over the lazy dog.
(.t-lighter) The quick brown fox jumps over the lazy dog.
<p class="t-bold">The quick brown fox jumps over the lazy dog.</p>
<p class="t-regular">The quick brown fox jumps over the lazy dog.</p>
<p class="t-light">The quick brown fox jumps over the lazy dog.</p>
<p class="t-lighter">The quick brown fox jumps over the lazy dog.</p>Styles
(.t-decoration-underline) The quick brown fox jumps over the lazy dog.
(.t-decoration-none) The quick brown fox jumps over the lazy dog.
(.t-style-italic) The quick brown fox jumps over the lazy dog.
<p class="t-decoration-underline">The quick brown fox jumps over the lazy dog.</p>
<p class="t-decoration-none">The quick brown fox jumps over the lazy dog.</p>
<p class="t-style-italic">The quick brown fox jumps over the lazy dog.</p>Transform
(.t-transform-uppercase) The quick brown fox jumps over the lazy dog.
(.t-transform-capitalize) The quick brown fox jumps over the lazy dog.
(.t-transform-lowercase) The quick brown fox jumps over the lazy dog.
(.t-transform-none) The quick brown fox jumps over the lazy dog.
<p class="t-transform-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="t-transform-capitalize">The quick brown fox jumps over the lazy dog.</p>
<p class="t-transform-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="t-transform-none">The quick brown fox jumps over the lazy dog.</p>Line Heights
The default line height is set at a 1.4 scale. An optional 1 value scale (current font-size) line height is available for use with larger header point sizes.
(.t-line-height-1) The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven of typography together with Hermann Zapf.
<p class="t-line-height-1">The quick brown fox jumps over the lazy dog.</p>White space
<div class="border u-ws-normal m-bottom">
normal
</div>
<div class="border u-ws-nowrap m-bottom">
nowrap
</div>Wordbreak
<div class="border u-wb-normal m-bottom">
normal
</div>
<div class="border u-wb-break-all m-bottom">
break-all
</div>Text Caret
(.t-caret) This text has a caret.
<p class="t-caret">This text has a caret.</p>