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

(.u-ws-normal) All work and no play makes Jack a dull boy.
(.u-ws-nowrap) All work and no play makes Jack a dull boy.
<div class="border u-ws-normal m-bottom">
		normal
</div>
<div class="border u-ws-nowrap m-bottom">
		nowrap
</div>

Wordbreak

(.u-wb-normal) j3894jrerwfv98cqh3x498ryq349fq38mrf9q3948rymx93q8yf9
(.u-wb-break-all) j3894jrerwfv98cqh3x498ryq349fq38mrf9q3948rymx93q8yf9
<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>