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;