Typography Details

Agile Learning Centers primarily uses the font:

BK Samuels No5

Which comes in several different weights:

Thin 100

Light 200

Medium 400

Bold 700

Fat 900

In some circumstances we will use Karla, mainly for Google Documents. If you have a Google Apps account with alc.network you can use the ALC Document Template or view the document here

For Gitbook specific typographic styling visit the Gitbook Typography section of this book.

Below is a list of our typographic elements.

Web page's body css settings are font-size: 16px and line-height: 1.5 all other font sizes are based off this base.

Super Header

The super header is for top level section, main chapters, etc.

h1.superheader
weight - thin 100
font size - 4em
line height - 1.5

Headline

h1
weight - thin 100
font size - 4em
line height - 1.5
border-bottom - 1px solid

Secondary Headline

h2
color #414141 gray-700
weight - medium 400
font size - 2em
line height - 1.5

Section Header

h3
uppercase
weight - light 200
font size - 1.5em
line height - 1.5
letter spacing - 2px

Header 4

h4
uppercase
weight - medium 400
font size - 1.15em
line height - 1.5
letter spacing - 2px

Normal text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus feugiat justo, ac iaculis eros posuere et. Morbi id orci leo. Praesent ultricies sollicitudin est quis ultrices. Nullam in aliquet nibh. Phasellus a sem neque. Fusce et vulputate est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sed quam vestibulum, euismod leo et, tempor massa. Mauris elementum, orci id pharetra porta, sapien felis sodales mi, vitae pretium enim ex et neque. Sed mattis porta mattis.

Lorem link text dolor bold text sit amet, emphasis text consectetur marked text elit. Morbi luctus feugiat justo, ac iaculis eros posuere et.

p, dl, ol, table, ul 
weight - light 200
font size - 16px
line height - 1.5

link text default link color: #2693C3 blue-A700

link text default link:hover color: #A8262D red-A700

Quote text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus feugiat justo, ac iaculis eros posuere et. Morbi id orci leo. Praesent ultricies sollicitudin est quis ultrices. Nullam in aliquet nibh. Phasellus a sem neque. Fusce et vulputate est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sed quam vestibulum, euismod leo et, tempor massa. Mauris elementum, orci id pharetra porta, sapien felis sodales mi, vitae pretium enim ex et neque. Sed mattis porta mattis.

blockquote
color #414141 gray-700
weight - thin 100
font size - 1.25em
line height - 1.5

Story font: Lora

.story
font - Lora
weight - regular 400
font size - 1.15em
line height - 1.5