ZigZagUI

# Typography

Classes and helpers for controlling font size and style.

# Base styles

Our typographic scale is pretty straightforward. For the most part, you should be able to use h1 - h4 for heading tags. We're not currently using h5 or h6 tags. There are heading classes that correspond to each of these type hierarcies:

Class Properties Mixin
.heading-jumbo size: 48px / 3.42rem
line-height: 32px / 0.6666
weight: 500 / Medium
.heading-1 size: 24px / 1.71rem
line-height: 32px / 1.3333
weight: 500 / Medium		 @include heading-1
.heading-2 size: 20px / 1.43rem
line-height: 28px / 1.4
weight: 400 / Regular		 @include heading-2
.heading-3 size: 16px / 1.14rem
line-height: 24px / 1.5
weight: 400 / Regular		 @include heading-3
.heading-4 size: 14px / 1.00rem
line-height: 20px / 1.43
weight: 500 / Medium		 @include heading-4
.text-small size: 12px / 0.857em
p size: 14px / 1em
line-height: 21px / 1.5

TIP

You may also prefer to only use a particular size or weight from the above heading settings. There is a helper function for this:

typo(element, attribute)

...where element is one of: h1 h2 h3 h4 body, small, button
...and attribute is one of: line-height, size, or weight

# Example:

typo('h1', 'size')           // 24px;
typo('small', 'size')        // 22px;
typo('h3', 'weight')         // 400
typo('body', 'line-height')  // 1.5

# Usage

EXAMPLE

.heading-jumbo

The quick brown fox jumped over the lazy dog.

.heading-1

The quick brown fox jumped over the lazy dog.

.heading-2

The quick brown fox jumped over the lazy dog.

.heading-3

The quick brown fox jumped over the lazy dog.

.heading-4

The quick brown fox jumped over the lazy dog.

p

The quick brown fox jumped over the lazy dog.

.text-small

The quick brown fox jumped over the lazy dog.

<p class="heading-jumbo ...">The quick brown fox ...</p>
<p class="heading-1 ...">The quick brown fox ...</p>
<p class="heading-2 ...">The quick brown fox ...</p>
<p class="heading-3 ...">The quick brown fox ...</p>
<p class="heading-4 ...">The quick brown fox ...</p>
<p>The quick brown fox ...</p>
<p class="text-small ...">The quick brown fox ...</p>

# Text modifiers

Class Properties
.text-capitalize text-transform: capitalize;
.text-lowercase text-transform: lowercase;
.text-uppercase text-transform: uppercase;
.text-no-wrap white-space: nowrap
.text-truncate overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
.text-left text-align: left;
.text-center text-align: center;
.text-right text-align: right;
.text-justify text-align: justify;
.text-underline text-decoration: underline;
.text-strike-through text-decoration: line-through;

# Usage

EXAMPLE

.text-capitalize

The quick brown fox jumped over the lazy dog.

.text-lowercase

The quick brown fox jumped over the lazy dog.

.text-uppercase

The quick brown fox jumped over the lazy dog.

.text-no-wrap

The quick brown fox jumped over the lazy dog.

.text-truncate

The quick brown fox jumped over the lazy dog.

.text-left

The quick brown fox jumped over the lazy dog.

.text-center

The quick brown fox jumped over the lazy dog.

.text-right

The quick brown fox jumped over the lazy dog.

.text-justify

The quick brown fox jumped over the lazy dog.

.text-underline

The quick brown fox jumped over the lazy dog.

.text-strike-through

The quick brown fox jumped over the lazy dog.

<p class="text-capitalize ...">The quick brown fox ...</p>
<p class="text-lowercase ...">The quick brown fox ...</p>
<p class="text-uppercase ...">The quick brown fox ...</p>
<p class="text-no-wrap ...">The quick brown fox ...</p>
<p class="text-truncate ...">The quick brown fox ...</p>
<p class="text-left ...">The quick brown fox ...</p>
<p class="text-center ...">The quick brown fox ...</p>
<p class="text-right ...">The quick brown fox ...</p>
<p class="text-justify ...">The quick brown fox ...</p>
<p class="text-underline ...">The quick brown fox ...</p>
<p class="text-strike-through ...">The quick brown fox ...</p>

# Font weights

Class Properties
.font-weight-regular font-weight: 400;
.font-weight-medium font-weight: 500;
.font-weight-bold (or <strong>) font-weight: 600;

# Usage

EXAMPLE

.font-weight-regular

The quick brown fox jumped over the lazy dog.

.font-weight-medium

The quick brown fox jumped over the lazy dog.

.font-weight-bold

The quick brown fox jumped over the lazy dog.

<p class="font-weight-regular ...">The quick brown fox ...</p>
<p class="font-weight-medium ...">The quick brown fox ...</p>
<p class="font-weight-bold ...">The quick brown fox ...</p>

← Motion →