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
- 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>
Text Caret
(.t-caret) This text has a caret.
<p class="t-caret">This text has a caret.</p>