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 2rem, 32px

The quick brown fox jumps over the lazy dog.

.t-4 1.5rem, 24px

The quick brown fox jumps over the lazy dog.

.t-3 (default) 1rem, 16px

The quick brown fox jumps over the lazy dog.

.t-2 0.875rem, 14px

The quick brown fox jumps over the lazy dog.

.t-1 0.75rem, 12px

The quick brown fox jumps over the lazy dog.

<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>

Text Caret

.t-caret

This text has a caret.

<p class="t-caret">This text has a caret.</p>