Skip to content

Typography13.10.5

> Don't you worry about a thing!™


$ npm i @if-design-system/typography@13.10.5

Edit this section

Usage

Hero title

The quick brown fox jumps over the lazy dog

Hero title

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading hero-title">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
  IDS_TYPOGRAPHY_Heading_Hero()
Sass/Scss
.myHeading {
  @include IDS_TYPOGRAPHY_Heading_Hero;
}
Less
.myHeading {
  .IDS_TYPOGRAPHY_Heading_Hero();
}

Heading largest

The quick brown fox jumps over the lazy dog

Heading largest

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading largest">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
  IDS_TYPOGRAPHY_Heading_Largest()
Sass/Scss
.myHeading {
  @include IDS_TYPOGRAPHY_Heading_Largest;
}
Less
.myHeading {
  .IDS_TYPOGRAPHY_Heading_Largest();
}

Heading larger

The quick brown fox jumps over the lazy dog

Heading larger

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading larger">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
  IDS_TYPOGRAPHY_Heading_Larger()
Sass/Scss
.myHeading {
  @include IDS_TYPOGRAPHY_Heading_Larger;
}
Less
.myHeading {
  .IDS_TYPOGRAPHY_Heading_Larger();
}

Heading large

The quick brown fox jumps over the lazy dog

Heading large

As in current viewport

Medium mobile
Usage with class
<h2 class="if heading large">The quick brown fox jumps over the lazy dog</h2>
Usage with mixins
Stylus
.myHeading
  IDS_TYPOGRAPHY_Heading_Large()
Sass/Scss
.myHeading {
  @include IDS_TYPOGRAPHY_Heading_Large;
}
Less
.myHeading {
  .IDS_TYPOGRAPHY_Heading_Large();
}

Heading medium

The quick brown fox jumps over the lazy dog

Heading medium

As in current viewport

Medium mobile
Usage with class
<h3 class="if heading medium">The quick brown fox jumps over the lazy dog</h3>
Usage with mixins
Stylus
.myHeading
  IDS_TYPOGRAPHY_Heading_Medium()
Sass/Scss
.myHeading {
  @include IDS_TYPOGRAPHY_Heading_Medium;
}
Less
.myHeading {
  .IDS_TYPOGRAPHY_Heading_Medium();
}

Heading small

The quick brown fox jumps over the lazy dog

Heading small

As in current viewport

Medium mobile
Usage with class
<h4 class="if heading small">The quick brown fox jumps over the lazy dog</h4>
Usage with mixins
Stylus
.myHeading
  IDS_TYPOGRAPHY_Heading_Small()
Sass/Scss
.myHeading {
  @include IDS_TYPOGRAPHY_Heading_Small;
}
Less
.myHeading {
  .IDS_TYPOGRAPHY_Heading_Small();
}

Heading smallest

The quick brown fox jumps over the lazy dog

Heading smallest

As in current viewport

Medium mobile
Usage with class
<h5 class="if heading smallest">The quick brown fox jumps over the lazy dog</h5>
Usage with mixins
Stylus
.myHeading
  IDS_TYPOGRAPHY_Heading_Smallest()
Sass/Scss
.myHeading {
  @include IDS_TYPOGRAPHY_Heading_Smallest;
}
Less
.myHeading {
  .IDS_TYPOGRAPHY_Heading_Smallest();
}

Lead text

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.

Lead text

As in current viewport

Medium mobile
Usage with class
<p class="if text lead">The quick brown fox jumps over the lazy dog</p>
Usage with mixins
Stylus
.myText
  IDS_TYPOGRAPHY_Text_Lead()
Sass/Scss
.myText {
  @include IDS_TYPOGRAPHY_Text_Lead;
}
Less
.myText {
  .IDS_TYPOGRAPHY_Text_Lead();
}

Body text

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.

Body text

As in current viewport

Medium mobile
Usage with class
<p class="if text body">
  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.
</p>
Usage with mixins
Stylus
.myText
  IDS_TYPOGRAPHY_Text_Body()
Sass/Scss
.myText {
  @include IDS_TYPOGRAPHY_Text_Body;
}
Less
.myText {
  .IDS_TYPOGRAPHY_Text_Body();
}

Meta text

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.

Meta text

As in current viewport

Medium mobile
Usage with class
<p class="if text meta">
  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.
</p>
Usage with mixins
Stylus
.myText
  IDS_TYPOGRAPHY_Text_Meta()
Sass/Scss
.myText {
  @include IDS_TYPOGRAPHY_Text_Meta;
}
Less
.myText {
  .IDS_TYPOGRAPHY_Text_Meta();
}

Caption text

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

Caption text

As in current viewport

Medium mobile
Usage with class
<figcaption class="if text caption">
  Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
</figcaption>
Usage with mixins
Stylus
.myText
  IDS_TYPOGRAPHY_Text_Caption()
Sass/Scss
.myText {
  @include IDS_TYPOGRAPHY_Text_Caption;
}
Less
.myText {
  .IDS_TYPOGRAPHY_Text_Caption();
}

Disclaimer text

Disclaimer text

As in current viewport

Medium mobile
Usage with class
<div class="if text disclaimer">
  Läs om vår <a href="" class="if">hantering av personuppgifter</a>,
  <a href="" class="if">automatisk behandling av köp</a> och hur vi arbetar med
  <a href="" class="if">uppringande kvalitetssamtal</a>.
</div>
Usage with mixins
Stylus
.myText
  IDS_TYPOGRAPHY_Text_Disclaimer()
Sass/Scss
.myText {
  @include IDS_TYPOGRAPHY_Text_Disclaimer;
}
Less
.myText {
  .IDS_TYPOGRAPHY_Text_Disclaimer();
}
Edit this section

Mixins

Here's a list of all typography mixins.

“A mixin can be used as a standalone helper, or you can pass values as arguments to make it extra flexible.”

All typography mixins are named the same, but not used with the same syntax! See usage sections below!
Name What it does
IDS_TYPOGRAPHY_FontFamily_Sans Sets the font-family to "If Sans", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansThin Sets the font-family to "If Sans Thin", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansThinItalic Sets the font-family to "If Sans Thin Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansLight Sets the font-family to "If Sans Light", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansLightItalic Sets the font-family to "If Sans Light Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansItalic Sets the font-family to "If Sans Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansMedium Sets the font-family to "If Sans Medium", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansMediumItalic Sets the font-family to "If Sans Medium Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansBold Sets the font-family to "If Sans Bold", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansBoldItalic Sets the font-family to "If Sans Bold Italic", Arial, sans-serif
IDS_TYPOGRAPHY_Text_Lead Sets the typography for lead text
IDS_TYPOGRAPHY_Text_Meta Sets the typography for meta text
IDS_TYPOGRAPHY_Text_Disclaimer Sets the typography for disclaimer text
IDS_TYPOGRAPHY_Text_Caption Sets the typography for caption text
IDS_TYPOGRAPHY_Text_Body Sets the typography for body text
IDS_TYPOGRAPHY_Heading_Smallest Sets the typography for smallest heading
IDS_TYPOGRAPHY_Heading_Small Sets the typography for small heading
IDS_TYPOGRAPHY_Heading_Medium Sets the typography for medium heading
IDS_TYPOGRAPHY_Heading_Large Sets the typography for large heading
IDS_TYPOGRAPHY_Heading_Larger Sets the typography for larger heading
IDS_TYPOGRAPHY_Heading_Largest Sets the typography for largest heading
Usage with Stylus
.myStyle
  IDS_TYPOGRAPHY_Heading_Large()
Usage with Sass/Scss
.myStyle{
  @include IDS_TYPOGRAPHY_Heading_Large;
}
Usage with Less
.myStyle {
  .IDS_TYPOGRAPHY_Heading_Large();
}
Edit this section

Classnames

Here you will see the full reference of exposed classnames to be utilised as helper classes for your html styling.

Font-weight

Font weight class helpers (for variable fonts) Example
class="if font weight-36" .if.font.weight-36
class="if font weight-40" .if.font.weight-40
class="if font weight-45" .if.font.weight-45
class="if font weight-48" .if.font.weight-48
class="if font weight-50" .if.font.weight-50
class="if font weight-54" .if.font.weight-54
class="if font weight-64" .if.font.weight-64
class="if font weight-70" .if.font.weight-70
class="if font weight-78" .if.font.weight-78
class="if font weight-82" .if.font.weight-82
class="if font weight-85" .if.font.weight-85
class="if font weight-104" .if.font.weight-104
class="if font weight-126" .if.font.weight-126

Font-family

Font-family helper classes Example
class="if font family sans fallback" .if.font.family.sans.fallback
class="if font family sans" .if.font.family.sans
class="if font family sans thin" .if.font.family.sans.thin
class="if font family sans thin-italic" .if.font.family.sans.thin-italic
class="if font family sans light" .if.font.family.sans.light
class="if font family sans light-italic" .if.font.family.sans.light-italic
class="if font family sans italic" .if.font.family.sans.italic
class="if font family sans medium" .if.font.family.sans.medium
class="if font family sans medium-italic" .if.font.family.sans.medium-italic
class="if font family sans bold" .if.font.family.sans.bold
class="if font family sans bold-italic" .if.font.family.sans.bold-italic

Heading

Heading helper classes Example
class="if heading hero-title"

.if.heading.hero-title

class="if heading largest" .if.heading.largest
class="if heading larger" .if.heading.larger
class="if heading large" .if.heading.large
class="if heading medium" .if.heading.medium
class="if heading small" .if.heading.small
class="if heading smallest" .if.heading.smallest

Text

Text helper classes Example
class="if text lead" .if.text.lead
class="if text body" .if.text.body
class="if text meta" .if.text.meta
class="if text disclaimer" .if.text.disclaimer
class="if text caption" .if.text.caption
Edit this section

Tokens

All of the tokens can be used as preprocessor variables

Font size

Name Value Example
$size-font-14 0.875rem A
$size-font-15 0.9375rem A
$size-font-16 1rem A
$size-font-18 1.125rem A
$size-font-20 1.25rem A
$size-font-22 1.375rem A
$size-font-24 1.5rem A
$size-font-26 1.625rem A
$size-font-28 1.75rem A
$size-font-30 1.875rem A
$size-font-32 2rem A
$size-font-33 2.0625rem A
$size-font-36 2.25rem A
$size-font-38 2.375rem A
$size-font-42 2.625rem A
$size-font-48 3rem A
$size-font-54 3.375rem A
$size-font-56 3.5rem A
$size-font-66 4.125rem A
$size-font-14px 14px A
$size-font-15px 15px A
$size-font-16px 16px A
$size-font-18px 18px A
$size-font-20px 20px A
$size-font-22px 22px A
$size-font-24px 24px A
$size-font-26px 26px A
$size-font-28px 28px A
$size-font-30px 30px A
$size-font-32px 32px A
$size-font-33px 33px A
$size-font-36px 36px A
$size-font-38px 38px A
$size-font-42px 42px A
$size-font-48px 48px A
$size-font-54px 54px A
$size-font-56px 56px A
$size-font-66px 66px A

Font weight

Name Value Example
Aa$font-weight-36 36 A
Aa$font-weight-40 40 A
Aa$font-weight-45 45 A
Aa$font-weight-48 48 A
Aa$font-weight-50 50 A
Aa$font-weight-54 54 A
Aa$font-weight-64 64 A
Aa$font-weight-70 70 A
Aa$font-weight-78 78 A
Aa$font-weight-82 82 A
Aa$font-weight-85 85 A
Aa$font-weight-104 104 A
Aa$font-weight-126 126 A

Font family

Name Value
$font-family-sans-thin If Sans Thin
$font-family-sans-light If Sans Light
$font-family-sans If Sans
$font-family-sans-medium If Sans Medium
$font-family-sans-bold If Sans Bold
$font-family-sans-thin-italic If Sans Thin Italic
$font-family-sans-light-italic If Sans Light Italic
$font-family-sans-italic If Sans Italic
$font-family-sans-medium-italic If Sans Medium Italic
$font-family-sans-bold-italic If Sans Bold Italic

Line height

Name Value
$size-line-height-24 1.5rem
$size-line-height-28 1.75rem
$size-line-height-32 2rem
$size-line-height-40 2.5rem
$size-line-height-42 2.625rem
$size-line-height-44 2.75rem
$size-line-height-48 3rem
$size-line-height-52 3.25rem
$size-line-height-56 3.5rem
$size-line-height-64 4rem
$size-line-height-72 4.5rem
$size-line-height-24px 24px
$size-line-height-28px 28px
$size-line-height-32px 32px
$size-line-height-40px 40px
$size-line-height-42px 42px
$size-line-height-44px 44px
$size-line-height-48px 48px
$size-line-height-52px 52px
$size-line-height-56px 56px
$size-line-height-64px 64px
$size-line-height-72px 72px
Edit this section

App development

For application development, we also expose tokens for native app development, like Android and IOS. We also expose tokens for JavaScript development.

JavaScript

We expose this file: @if-design-system/typography/src/typography/variables/js/variables.esm.js, in this format:

"size": {
  "font": {
    "14": {
      "value": "0.875rem",
      "comment": "14 pixels",
      "filePath": "./src/tokens/font-size.json",
      "isSource": true,
      "original": {
        "value": "0.875rem",
        "comment": "14 pixels"
      },
      "name": "SizeFont14",
      "attributes": {
        "category": "size",
        "type": "font",
        "item": "14"
      },
      "path": [
        "size",
        "font",
        "14"
      ]
    },}}

This can be used like so:

import typographyTokens from '@if-design-system/typography/src/typography/variables/js/variables.module.js';

const myTitle = ({title}) => (<h1 style={{fontSize: typographyTokens.size.font.14.value}})>{title}</h1>);

And we also expose this file: @if-design-system/typography/src/typography/variables/js/variables.esm.js, in this format:

export const SizeFont20px = "20rem"; // 1.25rem
export const SizeFont22px = "22rem"; // 1.375rem
export const SizeFont24px = "24rem"; // 1.5rem
export const SizeFont26px = "26rem"; // 1.625rem
export const SizeFont28px = "28rem"; // 1.75rem
export const SizeFont30px = "30rem"; // 1.875rem

This can be used like so:

import { SizeFont26px } from '@if-design-system/typography/src/typography/variables/js/variables.esm.js';

const myTitle = ({title}) => (<h1 style={{fontSize: SizeFont26px}})>{title}</h1>);

Android

For Android development, you might be interested in this file: @if-design-system/typography/src/variables/android/font_dimens.xml, in this format:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <dimen name="size_font_14">14.00sp</dimen><!-- 14 pixels -->
  <dimen name="size_font_15">15.00sp</dimen><!-- 15 pixels -->
  <dimen name="size_font_16">16.00sp</dimen><!-- 16 pixels -->
  <dimen name="size_font_18">18.00sp</dimen><!-- 18 pixels -->
  <dimen name="size_font_20">20.00sp</dimen><!-- 20 pixels -->
  <dimen name="size_font_22">22.00sp</dimen><!-- 22 pixels -->
  <dimen name="size_font_24">24.00sp</dimen><!-- 24 pixels -->
  <dimen name="size_font_26">26.00sp</dimen><!-- 26 pixels -->
  <dimen name="size_font_28">28.00sp</dimen><!-- 28 pixels -->
  <!-- ... -->
</resources>

IOS

For IOS development, we have IfDesignSystemFontSize.h and IfDesignSystemFontSize.m under src/variables/ios, and IfDesignSystem.swift and IfDesignSystemFontSize.swift under src/variables/ios-swift.

Flutter

We also have ifdesignsystem.dart under src/variables/flutter.

Edit this section

Contact us