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.
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
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, 14pxAlignment
(.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.
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.
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.
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.
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.
Text Caret
(.t-caret) This text has a caret.