Deprecated - contains information about version 17 of the IDS librarySeedesign.if.eufor the latest documentation

Typography

<div class="if text lead">

    Our typeface; If Sans — plays a key role in our visual identity. It encapsulates our "Simply Personal" concept
    by being a functional typeface with a personal style. With a simple, light and airy feeling it offers a good
    legibility. With typographic details inspired by the written expression of calligraphy makes it human.

</div>
<div class="if text body">
    Two typefaces are available for different applications:

    - Our primary typeface is If Sans, which is used for all external, public-facing communication.
    - Our fallback typeface is Arial, which is used for email communication and when technical limitations prevent
    the use of the primary typeface.

</div>

<div class="if text ids-doc layout box">

    <span class="if heading smallest">Demos</span>

    - <a
    href="/demos/typography.html"
    class="ids-doc"
>
    Typography
</a>
    - <a
    href="/demos/body-text.html"
    class="ids-doc"
>
    Body text
</a>

</div>

Resources

Table of Contents

Edit this section, Opens in new window

Typeface overview

For a full page overview, you can check out the demo or read the documentation for the typography component.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Eventually, you do plan to have dinosaurs on your dinosaur tour, right?

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Large mobile

Medium mobile

Small mobile

Edit this section, Opens in new window

Font size unit

In this design system, we're using the REM (root em size) unit for font sizes. Browsers calculate REM based on the root element size. Default root element size is 16px. If you want pixels, multiply REM with 16. Want REM? Divide pixels by

Edit this section, Opens in new window

Primary Typeface

If Sans is available in Thin, Light, Regular, Medium and Bold.

Thin, Light and Regular are used for large- and medium-size headlines and sub-headings to maintain our light and airy look and feel.

Medium and Bold are only used for small text sizes and to highlight key words in body copy.

An italic version is available in Thin Italic, Light Italic, Italic, Medium Italic and Bold Italic. These should be used to emphasize certain words or legal content. Never use italic in headlines or sub- headings.

If Sans should be used in most formats With the exception of digital platforms where it is only possible to use system fonts.

  1. ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΩμΏĂÂÊÔăâêô1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  2. ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΩμΏĂÂÊÔăâêô1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  1. If Sans Thin
  2. If Sans Thin Italic
Edit this section, Opens in new window

Principles for headlines and sub-headings

The wide variety of type weights enables an airy and clear text group hierarchy, where headlines and sub-headings maintain an equal stroke width.

We have simplified the headline principles into three levels. Depending on the size of the headline, we balance the weights by headline and sub- heading to achieve equal stroke width.

Depending on the layout, the headline and/or sub- headline can either be centered or left-aligned. We use sentence case in all text.

Level 1 - Large headline
  1. If Sans Thin, Line height/leading: 110-120%
  2. If Sans Regular, Line height/leading: 110-120%
Level 2 - Mid-size headline
  1. If Sans Light, Line height/leading: 110-120%
  2. If Sans Regular, Line height/leading: 110-120%
Level 3 - Small headline
  1. If Sans Regular, Line height/leading: 110-120%
  2. If Sans Medium, Line height/leading: 120-130%
  1. Large size,
    Thin headline.

    With equal stroke width, experience
    more subtle and less distracting.
  2. Mid-size,
    Light headline.

    With equal stroke width, experience
    more subtle and less distracting.
  3. Small size,
    Regular headline.

    With equal stroke width, experience
    more subtle and less distracting.
  1. Level 1 - Large headline
  2. Level 2 - Mid-size headline
  3. Level 3 - Small headline
Edit this section, Opens in new window

Text Weight Principles

1. First Priority Message (FPM)

Often a headline.

2. Second Priority Message (SPM)

Can be a sub-heading or preamble. It may not always be present.

3. Third Priority Message (TPM)

Can be a preamble or longer descriptive text. It may not always be present.

The way we use the different type weights in our brand communication is very distinctive. To emphasize our light airy typography, we use a lighter type weight in headlines and go bolder as we go further down the text hierarchy. We do this so as to maintain an equal stroke width through all sections of text.

In the DO example you can see how we apply the type weights:

  1. If Sans Light is used for FPM.
  2. If Sans Regular is used for SPM.
  3. If Sans Regular is used for TPM.

Notice that no bolder weight than Regular is used for TPM/body copy. Medium and Bold weights are only used for small text sizes and to highlight key words.

Lorum ipsum dolor sit amet consectetur.

Sed ut perspiciatisunde omnisiste

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nisl non eros hendrerit, eget imperdiet ipsum scelerisque.

Do use thin type weight on headlines (1) and go thicker on sub-heading (2). Think light to heavy principle on text priority.

Lorum ipsum dolor sit amet consectetur.

Sed ut perspiciatisunde omnisiste

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nisl non eros hendrerit, eget imperdiet ipsum scelerisque.

Don't use bolder type weight on headlines (1) and lighter on SPM (2) and TPM (3) on text priority.
Weight
  1. R
  2. R
  3. R
  4. R
  5. R
  6. R
  7. R
  8. R
  9. R
  10. R
  11. R
  12. R
  13. R
  1. font-variation-settings: "wght" 36;
  2. font-variation-settings: "wght" 40;
  3. font-variation-settings: "wght" 45;
  4. font-variation-settings: "wght" 48;
  5. font-variation-settings: "wght" 50;
  6. font-variation-settings: "wght" 54;
  7. font-variation-settings: "wght" 64;
  8. font-variation-settings: "wght" 70;
  9. font-variation-settings: "wght" 78;
  10. font-variation-settings: "wght" 82;
  11. font-variation-settings: "wght" 85;
  12. font-variation-settings: "wght" 104;
  13. font-variation-settings: "wght" 126;
Edit this section, Opens in new window

Readability and typographic rules

To ensure the best use of If typography, please respect the following rules.

Here are some examples of incorrect usage.

Lorem ipsum.

Do not use If Sans Bold in headlines.

NO UPPER CASE TEXT.

Never use only uppercase.

Lorum ipsum.

Do not use italic in headlines.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nisl non eros hendrerit, eget imperdiet ipsum scelerisque. Aenean eu odio in sapien iaculis faucibus. Nunc dapibus pulvinar quam, posuere rutrum odio luctus quis. Cras sapien purus, venenatis ut ex ac, vulputate elementum neque.
No need to track text (change letter-spacing).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nisl non eros hendrerit, eget imperdiet ipsum scelerisque. Aenean eu odio in sapien iaculis faucibus. Nunc dapibus pulvinar quam, posuere rutrum odio luctus quis. Cras sapien purus, venenatis ut ex ac, vulputate elementum neque.
Do not use justified typography.
Edit this section, Opens in new window

Fallback typeface

Arial is our universal fallback font. Some browsers, email clients and operating systems only let you use default typefaces. In situations where there are no other typeface options available other than the default, you should always use Arial in suitable and equivalent formats.

Arial is used in two weights: Regular and Bold.

  1. ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΩμΏĂÂÊÔăâêô1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  2. ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΩμΏĂÂÊÔăâêô1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  1. Arial Regular
  2. Arial Bold
Arial typeface for situations when only systems fonts are available.
Arial is used only in situations when primary typeface If Sans cannot be used due to technical limitations.
Never use Arial typeface in external printed communication.
Never replace If Sans typeface for external communication.
Edit this section, Opens in new window

Text flow

Below is two text flow examples. The first one is not adjusted to the baseline, but the second is.

  1. Heading - Medium 1

    Leading text with a bunch of other words. Just testing this out

    This is the body text, we need to add some placeholder text here. Perhaps not the basic Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of which, there are so many! But what if we just type the first things that enters our mind, so that the user can just get a hint of what's going on here?

  2. Heading - Medium 1

    Leading text with a bunch of other words. Just testing this out

    This is the body text, we need to add some placeholder text here. Perhaps not the basic Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of which, there are so many! But what if we just type the first things that enters our mind, so that the user can just get a hint of what's going on here?

  3. Heading - Medium 1

    Leading text with a bunch of other words. Just testing this out

    This is the body text, we need to add some placeholder text here. Perhaps not the basic Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of which, there are so many! But what if we just type the first things that enters our mind, so that the user can just get a hint of what's going on here?

  1. Untouched
  2. With basekick text flow
  3. Normalized, with line-heights going up in 5 ( 40px, 30px and 25px)

Now, when we add lines to indicate line-heights (baseline), look how the text aligns with them:

  1. Heading - Medium 1

    Leading text with a bunch of other words. Just testing this out

    This is the body text, we need to add some placeholder text here. Perhaps not the basic Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of which, there are so many! But what if we just type the first things that enters our mind, so that the user can just get a hint of what's going on here?

  2. Heading - Medium 1

    Leading text with a bunch of other words. Just testing this out

    This is the body text, we need to add some placeholder text here. Perhaps not the basic Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of which, there are so many! But what if we just type the first things that enters our mind, so that the user can just get a hint of what's going on here?

  3. Heading - Medium 1

    Leading text with a bunch of other words. Just testing this out

    This is the body text, we need to add some placeholder text here. Perhaps not the basic Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of which, there are so many! But what if we just type the first things that enters our mind, so that the user can just get a hint of what's going on here?

  1. Untouched
  2. With basekick text flow
  3. Normalized, same line heights
The small miss-alignment to the text on right hand side examples are due to the line heights we use are not based on a linear scale. This might improve in the future.
<div class="if text vertical-spacing-base">
    <h2 class="if heading medium">Heading - Medium 1</h2>
    <p class="if text lead">Leading text with a bunch of other words. Just testing this out</p>
    <p class="if text body">
        This is the body text, we need to add some placeholder text here. Perhaps not the basic
        Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of
        which, there are so many! But what if we just type the first things that enters our mind, so
        that the user can just get a hint of what's going on here?
    </p>
</div>
<div class="if text flow vertical-spacing-base">
    <h2 class="if heading medium">Heading - Medium 1</h2>
    <p class="if text lead">Leading text with a bunch of other words. Just testing this out</p>
    <p class="if text body">
        This is the body text, we need to add some placeholder text here. Perhaps not the basic
        Lorum ipsum dolor sit amet text, but something else? We could do that, but not certain of
        which, there are so many! But what if we just type the first things that enters our mind, so
        that the user can just get a hint of what's going on here?
    </p>
</div>
Edit this section, Opens in new window
Contact us, Opens in new window