Typography

Users digest most web content through text. Therefore, it is important to use good typographic principles to establish a clear visual hierarchy, as well as maximize readability.

Open Sans

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & * 1 2 3 4 5 6 7 8 9 0

Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. 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.

— Google Fonts (Open Sans specimen)

Usage

Font files can be heavy to download. Even if we use a standard serif font as fallback, we’d like to load the primary font as fast as possible.

Always remember that FOUT (Flash of Unstyled Text) is considered better than FOIT (Flash of Invisible Text). FOUT enables the user to start reading content earlier, even is the text is displayed in the fallback font. When the primary font is loaded, the displayed font will swap instantly (the visible “flash”).

Read more about FOUT and FOIT in A Historical Look At FOUT and FOIT.

Preload font files

Modern browsers now support preloading of resources. When it comes to font files, we know that these will be used in the entire page, so why not load them as fast as possible?

Add the following to the <head> of your page.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App title</title>
    <link rel="preload" href="/path-to-fonts/opensans-regular-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/path-to-fonts/opensans-bold-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/path-to-fonts/opensans-semibold-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/path-to-fonts/opensans-light-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <!-- The rest of head-content -->
</head>

It’s vital to add the <link>-tags as early as possible in the <head>. Just after the <title>-tag is perfect.

Read more about Preloading Content.

Link to CSS with font-declaration.

For faster display of the primary font, we provide a tiny css-file only containing the @font-face declarations. Once this is loaded, the font can be shown on screen. Even if the rest of the page is loading.

This way we don’t need to load the entire main css file just to see the correct font.

Link to the stylesheets in this order in the <head> of the page:

<link media="all" rel="stylesheet" href="/path/to/assets/styles/css/kx-fonts.css">
<link media="all" rel="stylesheet" href="/path/to/assets/styles/css/kx-styles.css">
<!-- Other custom stylesheets-->

Formats

We provide Open Sans in three different formats. Together they cover a broad set of browsers:

  • .woff2 - supported in super modern browser. Provides better compression than WOFF 1.0. Is now a W3C Candidate Recommendation.
  • .woff - supported in modern browsers. Developed in 2009, and is now a W3C Recommendation.
  • .ttf - supported in older Safar, Android an iOS. TrueType is the most common format for Mac and Windows operating systems.

Sizes

We offer different text sizes to convey visual hierarchy in text. The sizes are all carefully adjusted to fit our basline grid of 4px. This way we can be sure that text blocks and their line-heights, always is a factor of 4. This assures vertical rhythm in our designs.

Utility classes for font-size

Size Class (HTML) Mixin (Scss) Font-size Line-Height

Typescale

 kx-typescale--super @include type-scale(super); 64px 80px

Typescale

 kx-typescale--jumbo @include type-scale(jumbo); 50px 64px

Typescale

 kx-typescale--xxxlarge @include type-scale(xxxlarge); 42px 52px

Typescale

 kx-typescale--xxlarge @include type-scale(xxlarge); 34px 44px

Typescale

 kx-typescale--xlarge @include type-scale(xlarge); 27px 32px

Typescale

 kx-typescale--large @include type-scale(large); 22px 28px

Typescale

 kx-typescale--medium @include type-scale(medium); 19px 28px

Typescale

 kx-typescale--base @include type-scale(base); 16px 24px

Typescale

 kx-typescale--small @include type-scale(small); 13px 20px

Typescale

 kx-typescale--tiny @include type-scale(tiny); 11px 20px

Weights

Aa - 300 (light)

Aa - 400 (regular)

Aa - 600 (semibold)

Aa - 700 (extra-bold)

Header Styles

Headers ranging from h1-h6 have a default styling combining both scale and weight. The h1 corresponds to the kx-typescale--xxxlarge, the h2 to the kx-typescale--xxlarge and so on.

The larger scales kx-typescale--super and kx-typescale--jumbo can be applied to the h1-tag if you’d like to go even larger, e.g. in a large campaign element, hero or similar.

Style name Attributes Level Usage

Header 1

 Descript.. h1 Describe..

Header 2

 Descript.. h2 Describe..

Header 3

 Descript.. h3 Describe..

Header 4

 Descript.. h4 Describe..
Header 5
 Descript.. h5 Describe..
Header 6
 Descript.. h6 Describe..

Learn more