Typography

Font weights

Avenir Light

<div class="font-sans-light">Avenir Light</div>

Avenir Light Italic

<div class="font-sans-light-ital">Avenir Light Italic</div>

Avenir Regular

<div class="font-sans-regular">Avenir Regular</div>

Avenir Regular Italic

<div class="font-sans-regular-ital">Avenir Regular Italic</div>

Avenir Medium

<div class="font-sans-light">Avenir Medium</div>

Avenir Medium Italic

<div class="font-sans-medium-ital">Avenir Medium Italic</div>

Avenir Demi

<div class="font-sans-demi">Avenir Demi</div>

Avenir Demi Italic

<div class="font-sans-demi-ital">Avenir Demi Italic</div>

Text Sizes

Utility class	Rems	Pixels	Typography class
.text-sm-3	0.625rem	10px	.milli
.text-sm-2	0.75rem	12px	.tiny
.text-sm-1	0.875rem	14px	.small
.text-base	1rem	16px
.text-body	1.125rem	18px	.heading-epsilon
.text-lg-1	1.25rem	20px
.text-lg-2	1.75rem	28px	.heading-delta
.text-lg-3	2rem	36px	.heading-gamma
.text-lg-4	2.75rem	44px	.heading-beta
.text-lg-5	3.4375rem	55px	.heading-alpha
.text-display	4.25rem	68px
.text-jumbo	5.375rem	86px

Headings

Heading 1

.text-lg-5/.text-lg-5 (small/large)

<h1 class="heading-alpha">Heading 1</h1>

Heading 2

.text-lg-3/.text-lg-5 (small/large)

<h2 class="heading-beta">Heading 2</h2>

Heading 3

.text-lg-2/.text-lg-4 (small/large)

<h3 class="heading-gamma">Heading 3</h3>

Heading 4

.text-lg-1/.text-lg-3 (small/large)

<h4 class="heading-delta">Heading 4</h4>

Heading 5

.text-lg-body/.text-lg-2 (small/large)

<h5 class="heading-epsilon">Heading 5</h5>

Heading 6

.text-lg-base/.text-lg-body (small/large)

<h6 class="heading-zeta">Heading 6</h6>

Text Margins

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, aperiam reiciendis recusandae rem reprehenderit quos ipsam perspiciatis incidunt quisquam tenetur commodi ducimus consectetur consequuntur animi ratione.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi eius vero.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem saepe soluta eaque hic illo est velit animi dolor incidunt ea! Hic fugiat ab harum vitae a ullam tenetur fuga, accusamus vel! Eaque fugit iure ab laudantium repellat porro accusantium facere nesciunt dolores in, dicta debitis necessitatibus illum aut, vero, amet labore atque maiores! Ipsa quia, nisi illo minus accusamus quam tempora cumque distinctio officia non! Hic, fugiat. Architecto mollitia eligendi consequatur praesentium ipsum. Numquam eaque at ullam dolores iusto aspernatur non cum! Reprehenderit perspiciatis porro sint adipisci facilis explicabo, culpa, sit dolore error earum ea molestias exercitationem, placeat quaerat harum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi eius vero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quaerat magnam saepe. Omnis consequatur quasi dolorum obcaecati, aperiam expedita. Debitis?

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi eius vero, vel deleniti cumque.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat cupiditate, nihil sint natus quia quod ratione ipsum quis repellendus cum at distinctio dolores molestias, nemo quasi, ullam omnis nulla temporibus facere. Laboriosam, facilis eos? Ipsum blanditiis, asperiores explicabo beatae facere, quae repellat minima vero magni debitis nihil officia nobis distinctio molestias eius. Beatae commodi in, nam qui placeat ipsum quasi culpa perspiciatis vitae doloribus enim nesciunt facilis, error amet necessitatibus.