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.

Roboto

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

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

— Google Fonts (Roboto 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/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/path-to-fonts/Roboto-Bold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/path-to-fonts/Roboto-Medium.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/path-to-fonts/Roboto-Light.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/styles/day-theme.css">
<link media="all" rel="stylesheet" href="/path/to/styles/dusk-theme.css">
<!-- Other custom stylesheets-->

Formats

We provide Roboto 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--xxxlarge @include type-scale(xxxlarge); 58px 79px

Typescale

 kx-typescale--xxlarge @include type-scale(xxlarge); 45px 58px

Typescale

 kx-typescale--xlarge @include type-scale(xlarge); 34px 45px

Typescale

 kx-typescale--large @include type-scale(large); 26px 34px

Typescale

 kx-typescale--medium @include type-scale(medium); 20px 26px

Typescale

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

Typescale

 kx-typescale--small @include type-scale(small); 12px 16px

Typescale

 kx-typescale--tiny @include type-scale(tiny); 10px 14px

Weights

Aa - 300 (light)

Aa - 400 (regular)

Aa - 500 (medium)

Aa - 700 (bold)

Header Styles

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

The largest scale kx-typescale--xxxlarge 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 3

 Descript.. h4 Describe..

Using default typesettings

Since many HTML elements like <p>, <ul>, <ol> are used as structural elements outside a strict text based context, we try not to force too much default styling to these elements.

If you want to use our base typographic settings for such elements (e.g. in an article, blog post or other “long form” reading context), we provide a simple helper class: .kx-prose.

Use .kx-prose on a wrapper outside these elements. This provides sensible defaults when it comes to spacing between elements

<div class="kx-prose">
    <p>In the user experience space, industry is globally transforming its best-of-breed stand-ups...</p>
    <ul>
        <li>Conservatively aligning dynamically </li>
        <li>Innovative low hanging fruit</li>
        <li>Reliably monetizing synergies</li>
    </ul>
    <p>
        Competitive big datas intelligently enable knowledge transfer stacks for our dot-bombs
    </p>
    <blockquote>
        You need to proactively invest your alignments to increase your organic growth velocity
    </blockquote>
</div>

Learn more