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>

Defaults

H1 - Ubuntu Regular - 2.5rem / 40px / 48px

H2 - Ubuntu Regular - 2rem / 32px / 40px

H3 - Ubuntu Regular - 1.5rem / 24px / 32px

H4 - Ubuntu Regular - 1.25rem / 20px / 32px

Paragraph text - Promixa Nova - 1rem / 16px / 24px

Strong text - Promixa Nova - 1rem / 16px / 24px

A Link text - Promixa Nova - 1rem / 16px / 24px

Label text - Promixa Nova - 1rem / 16px / 24px

Code text - Monospace - 1rem / 16px / 16px

<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<p>Paragraph text</p>
<p><strong>Strong paragraph text</strong></p>
<a href="#">Link text</a>
<code>Code text</code>
<label>Label text</label>

Custom Sizes

(.t-5) The quick brown fox jumps over the lazy dog.

2.5rem, 40px

(.t-4) The quick brown fox jumps over the lazy dog.

2rem, 32px

(.t-3) The quick brown fox jumps over the lazy dog.

1.5rem, 24px

(.t-2) The quick brown fox jumps over the lazy dog.

1.25rem, 20px

(.t-1) The quick brown fox jumps over the lazy dog.

1rem, 16px

(.t-0) The quick brown fox jumps over the lazy dog.

0.875rem, 14px

<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

Default line heights are set to align with our 8px baseline grid. An optional 1-5 value line height is available for use to override defaults.

.t-line-height-5 / 3rem, 48px - The quick brown fox jumps over the lazy dog.

.t-line-height-4 / 2.5rem, 40px - The quick brown fox jumps over the lazy dog.

.t-line-height-3 / 2rem, 32px - 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.

.t-line-height-2 / 1.5rem, 24px - 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.

.t-line-height-1 / 1rem, 16px - 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>