Skip to main content
Docs
Components
Foundation
1.0.0Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 1.0.0

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.

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​

SizeClass (HTML)Mixin (Scss)Font-sizeLine-Height
Typescalekx-typescale--xxxlarge@include type-scale(xxxlarge);58px79px
Typescalekx-typescale--xxlarge@include type-scale(xxlarge);45px58px
Typescalekx-typescale--xlarge@include type-scale(xlarge);34px45px
Typescalekx-typescale--large@include type-scale(large);26px34px
Typescalekx-typescale--medium@include type-scale(medium);20px26px
Typescalekx-typescale--base@include type-scale(base);16px22px
Typescalekx-typescale--small@include type-scale(small);12px16px
Typescalekx-typescale--tiny@include type-scale(tiny);10px14px

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 nameAttributesLevelUsage
Header 1========Descript..h1Describe..
Header 2--------Descript..h2Describe..
### Header 3Descript..h3Describe..
#### Header 3Descript..h4Describe..

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​