Typography

Font-Face

Open Sans

Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
0123456789

CSS3
You can import the font to the site by inserting the following code in the top of the css file.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300);
                        
    body {
        font-family: 'Open Sans';
    }

Font-weight and style

Light 300

Grumpy wizards make toxic brew for the evil Queen and Jack.

Light 300 Italic

Grumpy wizards make toxic brew for the evil Queen and Jack.

Normal 400

Grumpy wizards make toxic brew for the evil Queen and Jack.

Normal 400 Italic

Grumpy wizards make toxic brew for the evil Queen and Jack.

Semi-Bold 600

Grumpy wizards make toxic brew for the evil Queen and Jack.

Semi-Bold 600 Italic

Grumpy wizards make toxic brew for the evil Queen and Jack.

Bold 700

Grumpy wizards make toxic brew for the evil Queen and Jack.

Bold 700 Italic

Grumpy wizards make toxic brew for the evil Queen and Jack.

Extra-Bold 800

Grumpy wizards make toxic brew for the evil Queen and Jack.

Extra-Bold 800 Italic

Grumpy wizards make toxic brew for the evil Queen and Jack.

CSS3
Here you can see the styling for each font-weight and style.

/* Light 300 */
p {
    font-weight: 300;
    font-style: normal;
}

/* Light 300 Italic */
p {
    font-weight: 300;
    font-style: italic;
}

/* Normal 400 */
p {
    font-weight: 400;
    font-style: normal;
}

/* Normal 400 Italic */
p {
    font-weight: 400;
    font-style: italic;
}

/* Semi-Bold 600 */
p {
    font-weight: 600;
    font-style: normal;
}

/* Semi-Bold 600 Italic */
p {
    font-weight: 600;
    font-style: italic;
}

/* Bold 700 */
p {
    font-weight: 700;
    font-style: normal;
}

/* Bold 700 Italic */
p {
    font-weight: 700;
    font-style: italic;
}

/* Ekstra-Bold 800 */
p {
    font-weight: 800;
    font-style: normal;
}

/* Ekstra-Bold 800 Italic */
p {
    font-weight: 800;
    font-style: italic;
}

Headings and Body Text

Primary Headings

Class: .text-header - Font-size: 28px - line-height: 30px - font-weight: 700

Secondary Headings

Class: .text-header s-2 - Font-size: 22px - line-height: 26px - font-weight: 700

Other Subheadings

Class: .text-header .s-3 - Font-size: 18px - line-height: 22px - font-weight: 700

Support Headings

Class: .text-header-sub - Font-size: 18px - line-height: 20px - font-weight: 400

Body Text

Class: .body-text - Font-size: 14px - line-height: 20px - font-weight: 400

HTML5
To use the different headings, just insert the class for the prefered heading/body text as listed under content.
For the 3 bold headers you have to add the class 'text-header' and then the class for the prefered header.

<p class="text-header">PRIMARY HEADINGS</p>

<p class="text-header s-2">SECONDARY HEADINGS</p>

<p class="text-header s-3">OTHER SUBHEADINGS</p>

<p class="text-header-sub">Support Headings</p>

<p class="body text">Body Text</p>

CSS3
This is the default styling of the different headings and body text.

/* Primary Headings */
.text-header {
    font-size: 28px;
    ling-height: 30px;
    font-weight: 700px;
    text-transform: uppercase;

    /* Secondary Headings */
    .s-2 {
        font-size: 22px;
        ling-height: 26px;
        font-weight: 700px;
        text-transform: uppercase;
    }

    /* Other Subheadings */
    .s-3 {
        font-size: 18px;
        ling-height: 22px;
        font-weight: 700px;
        text-transform: uppercase;
    }
}

/* Support Headings */
.text-header-sub {
    font-size: 18px;
    ling-height: 20px;
    font-weight: 400px;
    text-transform: none;
}

/* Body Text */
.body-text {
    font-size: 14px;
    ling-height: 20px;
    font-weight: 400px;
    text-transform: none;
}