Typography

Fonts

Headings

The default sans-serif heading font is Lato. This font can be changed out for different customers, based on a design review for sizing/usage. Using an open source font through Google Fonts is recommended.

Lato Light 300

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Lato Light Italic 300

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Lato Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Lato Regular Italic 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Lato Bold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Lato Bold Italic 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890


The default serif heading font is Merriweather. This font can be changed out for different customers, based on a design review for sizing/usage. Using an open source font through Google Fonts is recommended.

EB Garamond Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

EB Garamond Regular Italic 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

EB Garamond Bold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

EB Garamond Bold Italic 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890


Body Copy

The default font for all body copy is Source Sans Pro. This font can be changed out for different customers, based on a design review for sizing/usage. Using an open source font through Google Fonts is recommended.

Source Sans Pro Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Source Sans Pro Bold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Source Sans Pro Regular Italic 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Source Sans Pro Bold Italic 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Text Elements

Sans-Serif Fonts

Heading 1 Lato Light

Heading 2 Lato Light

Heading 3 Lato Regular

Heading 4 Lato Regular

Heading 5 Lato Regular
Heading 6 Lato Regular

Serif Fonts

Heading 1 EB Garamond Regular

Heading 2 EB Garamond Regular

Heading 3 EB Garamond Regular

Heading 4 EB Garamond Regular

Heading 5 EB Garamond Regular
Heading 6 EB Garamond Regular

Paragraphs

All body copy uses Source Sans Pro. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was 1960s with the release of Letraset sheets containing .loremIpsumClass.

This is an active link.

This is an visited link.

Alignment

LEFT
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

CENTER
It is a long established fact that a reader will be distracted by the readable content.

RIGHT
There are many variations of passages of Lorem Ipsum available, but the majority have.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a printing and typesetting ante.

Author name in Book name

Unordered Lists

  • But I must explain
  • To you how all this mistaken
  • Idea of denouncing pleasure
  • Great explorer of the truth
  • To take a trivial example
    • Or one who avoids a pain
    • Indignation and dislike men
    • Nor again is there anyone
    • But who has any right
  • That they cannot foresee
  • Who avoids a pain that produces
  • Consequences that are extremely

Ordered Lists

  1. But I must explain
  2. To you how all this mistaken
  3. Idea of denouncing pleasure
  4. Great explorer of the truth
  5. To take a trivial example
    • Or one who avoids a pain
    • Indignation and dislike men
    • Nor again is there anyone
    • But who has any right
  6. That they cannot foresee
  7. Who avoids a pain that produces
  8. Consequences that are extremely

Description Lists

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Emphasis

This is an example of primary text.

This is an example of success text.

This is an example of secondary text.

This is an example of warning text.

This is an example of danger text.

Special CSS Classes

This is bold text.

This is italic text.

This is uppercase text.

This is lowercase text.