Typography Cheatsheet
Heading Styles
| Class | When to use this | Example | Notes |
|---|---|---|---|
.h1 |
Use to style any text similar to <h1> |
Dallas College | |
.h2 |
Use to style any text similar to <h2> |
Dallas College | |
.h3 |
Use to style any text similar to <h3> |
Dallas College | |
.h4 |
Use to style any text similar to <h4> |
Dallas College | |
.h5 |
Use to style any text similar to <h5> |
Dallas College | |
.h6 |
Use to style any text similar to <h6> |
Dallas College | |
.page-header |
Use when wanting to style a heading with full-width underline | Dallas College | Must be applied to any heading element |
Body Copy Styles
| Class | When to use this | Example | Notes |
|---|---|---|---|
.mont |
Use to apply font-family:Mont to any text |
Dallas College | |
.lead |
Use when style introductory text at the beginning of any given page | Dallas College | Applies font-weight:300 and font-family:1.5em (24px) |
.small |
Use to style any text as a footnote | Dallas College | Applies font-size:.875em (14px) |
.indent |
Use to indent text without the use of <blockquote> |
Dallas College | Applies padding:1.5rem and margin:1.5rem |
Font Weight
| Class | When to use this | Example | Notes |
|---|---|---|---|
.font-light |
Dallas College | Applies font-weight:300 (or light) to Open Sans |
|
.font-semibold |
Dallas College | Applies font-weight:600 (or semibold) to Open Sans |
|
.font-bold |
Dallas College | Applies font-weight:700 (or bold) to Open Sans |
Text Alignment
| Class | When to use this | Example | Notes |
|---|---|---|---|
.text-left |
Use to align text to the left | Dallas College | Applies text-align:left; |
.text-right |
Use to align text to the right | Dallas College | Applies text-align:right; |
.text-center |
Use to align text to the center | Dallas College | Applies text-align:center; |
.text-justify |
Use to justify text | Dallas College | Applies text-align:justify; |
.text-nowrap |
Use to force text to not wrap | Dallas College | Applies white-space:nowrap; |
Transform Cases
| Class | When to use this | Example | Notes |
|---|---|---|---|
.text-lowercase |
Use to transform case to all lowercase | Dallas College | Applies text-transform:lowercase; |
.text-uppercase |
Use to transform case to all uppercase | Dallas College | Applies text-transform:uppercase; |
.text-capitalize |
Use to capitalize the first letter of every word | Dallas College | Applies text-transform:capitalize; |