Typography

Schema comes equipped with Source Sans Pro by Paul D. Hunt. If is not the font you want to use you can assign new typefaces in the variables.less file.


Headings

All html headings h1 through h6 are available for use. You'll also find .h1 through .h6 to assign a matching style to any element you want.

EXAMPLE

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

p with a .h3 tag.

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Text Sizes

Add different text sizes to any element by using these classes.

Example Class Description
12px font-xs (@base-font-size * 0.75) = 12px / 0.75rem
14px font-sm (@base-font-size * 0.875) = 14px / 0.85rem
16px (Schema's base size) @base-font-size = 16px / 1rem
20px font-lg (@base-font-size * 1.25) = 20px / 1.25rem
24px font-xl (@base-font-size * 1.50) = 24px / 1.50rem

Font Weights

Schema comes with these default font weights.

Variable Description
@weight-300 font-weight; 300;
@weight-400 font-weight: 400;
@weight-700 font-weight: 700;
@weight-800 font-weight: 800;

Body Copy

The default font-size is 1rem (or 16px). Default line-height is 1.3125. helpers.less have classes to help with text alignment. You'll find text-left, text-right, etc.

<p></p>

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, dolorem, dolor, amet fugiat ad omnis eveniet harum recusandae maxime delectus illo nisi a nostrum modi ex. Nemo sapiente eum soluta?

Illo, iste, pariatur, dicta, consequatur maiores deserunt temporibus doloribus voluptas asperiores sint dolorum deleniti animi mollitia quod ullam fugit a atque inventore facilis ab dolorem magni necessitatibus tempore dolor itaque.

Eligendi, accusantium, inventore alias ab eos explicabo quam temporibus. Quae, error, ea repudiandae praesentium illo distinctio molestiae placeat totam quibusdam cumque veniam animi aut mollitia laborum soluta repellendus deleniti illum?

text-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, possimus, dignissimos mollitia blanditiis labore optio reiciendis odio iure doloremque quam eveniet doloribus laudantium inventore non atque officiis explicabo perspiciatis nam.

text-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, architecto fugiat possimus eius vero molestias ab harum nam dolores rerum. Officiis, dolores quam quas molestiae voluptatum ipsum quidem vero repellat.

text-justified

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, provident, ipsum laborum rem natus eveniet? Pariatur, corporis, nemo in ab quos tempore libero dolorem impedit dicta laboriosam! Quam, nemo libero.


Lead Copy

You can make a paragraph stand out more by adding the class lead to it.

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, ab nisi soluta voluptatum ea exercitationem assumenda minima fugit porro alias asperiores.

<p class="lead"></p>

Blockquote

Looking to use a quote? Wrap any quote with the html tag blockquote or the class .blockquote.

EXAMPLE

Lorem ipsum dolor sit amet, consectetur adipisicing

— Some Cool Person
<blockquote>
  <p></p>
  <cite></cite>
</blockquote>