CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window

Bundle

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/typography@17.0.30-alpha.8

New Style Typography (used in Figma)

Preview

Typography

Preview

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

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

Läs om vår hantering av personuppgifter, automatisk behandling av köp och hur vi arbetar med uppringande kvalitetssamtal.

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.”

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

Font size tokens

Preprocessor	CSS Variable	Value
$ids-font-size-12	`var(--ids-font-size-12)`	`0.75rem`
$ids-font-size-14	`var(--ids-font-size-14)`	`0.875rem`
$ids-font-size-15	`var(--ids-font-size-15)`	`0.9375rem`
$ids-font-size-16	`var(--ids-font-size-16)`	`1rem`
$ids-font-size-18	`var(--ids-font-size-18)`	`1.125rem`
$ids-font-size-20	`var(--ids-font-size-20)`	`1.25rem`
$ids-font-size-22	`var(--ids-font-size-22)`	`1.375rem`
$ids-font-size-24	`var(--ids-font-size-24)`	`1.5rem`
$ids-font-size-26	`var(--ids-font-size-26)`	`1.625rem`
$ids-font-size-28	`var(--ids-font-size-28)`	`1.75rem`
$ids-font-size-30	`var(--ids-font-size-30)`	`1.875rem`
$ids-font-size-32	`var(--ids-font-size-32)`	`2rem`
$ids-font-size-33	`var(--ids-font-size-33)`	`2.0625rem`
$ids-font-size-36	`var(--ids-font-size-36)`	`2.25rem`
$ids-font-size-38	`var(--ids-font-size-38)`	`2.375rem`
$ids-font-size-42	`var(--ids-font-size-42)`	`2.625rem`
$ids-font-size-48	`var(--ids-font-size-48)`	`3rem`
$ids-font-size-54	`var(--ids-font-size-54)`	`3.375rem`
$ids-font-size-56	`var(--ids-font-size-56)`	`3.5rem`
$ids-font-size-66	`var(--ids-font-size-66)`	`4.125rem`
$ids-font-size-14px	`var(--ids-font-size-14px)`	`14px`
$ids-font-size-15px	`var(--ids-font-size-15px)`	`15px`
$ids-font-size-16px	`var(--ids-font-size-16px)`	`16px`
$ids-font-size-18px	`var(--ids-font-size-18px)`	`18px`
$ids-font-size-20px	`var(--ids-font-size-20px)`	`20px`
$ids-font-size-22px	`var(--ids-font-size-22px)`	`22px`
$ids-font-size-24px	`var(--ids-font-size-24px)`	`24px`
$ids-font-size-26px	`var(--ids-font-size-26px)`	`26px`
$ids-font-size-28px	`var(--ids-font-size-28px)`	`28px`
$ids-font-size-30px	`var(--ids-font-size-30px)`	`30px`
$ids-font-size-32px	`var(--ids-font-size-32px)`	`32px`
$ids-font-size-33px	`var(--ids-font-size-33px)`	`33px`
$ids-font-size-36px	`var(--ids-font-size-36px)`	`36px`
$ids-font-size-38px	`var(--ids-font-size-38px)`	`38px`
$ids-font-size-42px	`var(--ids-font-size-42px)`	`42px`
$ids-font-size-48px	`var(--ids-font-size-48px)`	`48px`
$ids-font-size-54px	`var(--ids-font-size-54px)`	`54px`
$ids-font-size-56px	`var(--ids-font-size-56px)`	`56px`
$ids-font-size-66px	`var(--ids-font-size-66px)`	`66px`

Font weight tokens

Preprocessor	CSS Variable	Value
Aa$ids-font-weight-36	`var(--ids-font-weight-36)`	`36`
Aa$ids-font-weight-40	`var(--ids-font-weight-40)`	`40`
Aa$ids-font-weight-45	`var(--ids-font-weight-45)`	`45`
Aa$ids-font-weight-48	`var(--ids-font-weight-48)`	`48`
Aa$ids-font-weight-50	`var(--ids-font-weight-50)`	`50`
Aa$ids-font-weight-54	`var(--ids-font-weight-54)`	`54`
Aa$ids-font-weight-60	`var(--ids-font-weight-60)`	`60`
Aa$ids-font-weight-64	`var(--ids-font-weight-64)`	`64`
Aa$ids-font-weight-70	`var(--ids-font-weight-70)`	`70`
Aa$ids-font-weight-78	`var(--ids-font-weight-78)`	`78`
Aa$ids-font-weight-82	`var(--ids-font-weight-82)`	`82`
Aa$ids-font-weight-85	`var(--ids-font-weight-85)`	`85`
Aa$ids-font-weight-104	`var(--ids-font-weight-104)`	`104`
Aa$ids-font-weight-106	`var(--ids-font-weight-106)`	`106`
Aa$ids-font-weight-126	`var(--ids-font-weight-126)`	`126`
Aa$ids-font-weight-132	`var(--ids-font-weight-132)`	`132`

Font family tokens

Preprocessor	CSS Variable	Value
$ids-font-family-sans-thin	`var(--ids-font-family-sans-thin)`	`If Sans Thin`
$ids-font-family-sans-light	`var(--ids-font-family-sans-light)`	`If Sans Light`
$ids-font-family-sans	`var(--ids-font-family-sans)`	`If Sans`
$ids-font-family-sans-medium	`var(--ids-font-family-sans-medium)`	`If Sans Medium`
$ids-font-family-sans-bold	`var(--ids-font-family-sans-bold)`	`If Sans Bold`
$ids-font-family-sans-thin-italic	`var(--ids-font-family-sans-thin-italic)`	`If Sans Thin Italic`
$ids-font-family-sans-light-italic	`var(--ids-font-family-sans-light-italic)`	`If Sans Light Italic`
$ids-font-family-sans-italic	`var(--ids-font-family-sans-italic)`	`If Sans Italic`
$ids-font-family-sans-medium-italic	`var(--ids-font-family-sans-medium-italic)`	`If Sans Medium Italic`
$ids-font-family-sans-bold-italic	`var(--ids-font-family-sans-bold-italic)`	`If Sans Bold Italic`

Line height tokens

Preprocessor	CSS Variable	Value
$ids-size-line-height-14	`var(--ids-size-line-height-14)`	`0.875rem`
$ids-size-line-height-16	`var(--ids-size-line-height-16)`	`1rem`
$ids-size-line-height-18	`var(--ids-size-line-height-18)`	`1.125rem`
$ids-size-line-height-20	`var(--ids-size-line-height-20)`	`1.25rem`
$ids-size-line-height-24	`var(--ids-size-line-height-24)`	`1.5rem`
$ids-size-line-height-28	`var(--ids-size-line-height-28)`	`1.75rem`
$ids-size-line-height-32	`var(--ids-size-line-height-32)`	`2rem`
$ids-size-line-height-40	`var(--ids-size-line-height-40)`	`2.5rem`
$ids-size-line-height-42	`var(--ids-size-line-height-42)`	`2.625rem`
$ids-size-line-height-44	`var(--ids-size-line-height-44)`	`2.75rem`
$ids-size-line-height-48	`var(--ids-size-line-height-48)`	`3rem`
$ids-size-line-height-52	`var(--ids-size-line-height-52)`	`3.25rem`
$ids-size-line-height-56	`var(--ids-size-line-height-56)`	`3.5rem`
$ids-size-line-height-64	`var(--ids-size-line-height-64)`	`4rem`
$ids-size-line-height-72	`var(--ids-size-line-height-72)`	`4.5rem`
$ids-size-line-height-24px	`var(--ids-size-line-height-24px)`	`24rem`
$ids-size-line-height-28px	`var(--ids-size-line-height-28px)`	`28rem`
$ids-size-line-height-32px	`var(--ids-size-line-height-32px)`	`32rem`
$ids-size-line-height-40px	`var(--ids-size-line-height-40px)`	`40rem`
$ids-size-line-height-42px	`var(--ids-size-line-height-42px)`	`42rem`
$ids-size-line-height-44px	`var(--ids-size-line-height-44px)`	`44rem`
$ids-size-line-height-48px	`var(--ids-size-line-height-48px)`	`48rem`
$ids-size-line-height-52px	`var(--ids-size-line-height-52px)`	`52rem`
$ids-size-line-height-56px	`var(--ids-size-line-height-56px)`	`56rem`
$ids-size-line-height-64px	`var(--ids-size-line-height-64px)`	`64rem`
$ids-size-line-height-72px	`var(--ids-size-line-height-72px)`	`72rem`

Headings tokens

Text tokens

Preprocessor	CSS Variable	Value
$ids-text-disclaimer-max-width	`var(--ids-text-disclaimer-max-width)`	`600px`
$ids-text-disclaimer-color	`var(--ids-text-disclaimer-color)`	`rgb(110,98,94)`
$ids-text-disclaimer-font-family	`var(--ids-text-disclaimer-font-family)`	`If Sans`
$ids-text-disclaimer-font-size	`var(--ids-text-disclaimer-font-size)`	`1.125rem`
$ids-text-disclaimer-line-height	`var(--ids-text-disclaimer-line-height)`	`1.75rem`
Aa$ids-text-disclaimer-font-weight	`var(--ids-text-disclaimer-font-weight)`	`78`
$ids-text-meta-font-size-media-query-base	`var(--ids-text-meta-font-size-media-query-base)`	`0.875rem`
$ids-text-meta-font-size-media-query-xs	`var(--ids-text-meta-font-size-media-query-xs)`	`0.9375rem`
$ids-text-meta-font-size-media-query-md	`var(--ids-text-meta-font-size-media-query-md)`	`1rem`
$ids-text-meta-font-family	`var(--ids-text-meta-font-family)`	`If Sans`
$ids-text-meta-line-height	`var(--ids-text-meta-line-height)`	`1.5rem`
Aa$ids-text-meta-font-weight-media-query-base	`var(--ids-text-meta-font-weight-media-query-base)`	`85`
Aa$ids-text-meta-font-weight-media-query-md	`var(--ids-text-meta-font-weight-media-query-md)`	`82`
$ids-text-meta-bold-font-family	`var(--ids-text-meta-bold-font-family)`	`If Sans Bold`
Aa$ids-text-meta-bold-font-weight	`var(--ids-text-meta-bold-font-weight)`	`126`
$ids-text-caption-font-size-media-query-base	`var(--ids-text-caption-font-size-media-query-base)`	`0.875rem`
$ids-text-caption-font-size-media-query-xs	`var(--ids-text-caption-font-size-media-query-xs)`	`0.9375rem`
$ids-text-caption-font-family	`var(--ids-text-caption-font-family)`	`If Sans Medium Italic`
$ids-text-caption-line-height	`var(--ids-text-caption-line-height)`	`1.5rem`
Aa$ids-text-caption-font-weight	`var(--ids-text-caption-font-weight)`	`85`
$ids-text-body-font-size-media-query-base	`var(--ids-text-body-font-size-media-query-base)`	`1rem`
$ids-text-body-font-size-media-query-xs	`var(--ids-text-body-font-size-media-query-xs)`	`1.125rem`
$ids-text-body-font-family	`var(--ids-text-body-font-family)`	`If Sans`
$ids-text-body-line-height	`var(--ids-text-body-line-height)`	`1.75rem`
Aa$ids-text-body-font-weight	`var(--ids-text-body-font-weight)`	`78`
$ids-text-lead-font-size	`var(--ids-text-lead-font-size)`	`1.375rem`
$ids-text-lead-font-family	`var(--ids-text-lead-font-family)`	`If Sans`
$ids-text-lead-line-height	`var(--ids-text-lead-line-height)`	`2rem`
Aa$ids-text-lead-font-weight	`var(--ids-text-lead-font-weight)`	`70`

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: @ids-core/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 '@ids-core/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: @ids-core/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 '@ids-core/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: @ids-core/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

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

The first and last segment in a segment group have rounded corners. Size

variations of segments- large, small, x-small.

Merged PR 101974: feat(segmented-control): VID update for segmented control (addab60), closes #686994 #686994

14.22.2 (2022-05-03)

Miscellaneous chores

package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.19.0 (2022-04-13)

Documentation Updates

✏️ Update documentation elements to prepare for Dark Mode (7b0b859) . We are utilizing some of the IDS components when documenting our components, and these elements needed to be updated with the .ids-doc CSS flag so we can add themes to them. In the same change, we also ammended some of the documentation to be more up to speed with current state.

14.18.3 (2022-04-13)

Bug Fixes

changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.18.2 (2022-04-11)

Documentation Updates

✏️ Add correct variables for typograpjhy (9d9b047)

14.16.0 (2022-04-07)

Bug Fixes

🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.11.0 (2022-03-16)

Bug Fixes

🐛 Remove the reset mixin from typography reset, it was bad (0155383)

14.9.0 (2022-03-03)

Miscellaneous chores

🤖 Bootstrap (6822f5b)

14.8.6 (2022-03-01)

Bug Fixes

🐛 Add back margin to paragraphs with if text body and p (01638a7) , closes #561534

14.8.5 (2022-02-24)

Bug Fixes

use correct name reference (487f6aa)

build (039d811)

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

14.5.0 (2022-02-15)

Code Refactoring

use a filter generator (e1608cd)
Remove old stuff (f47d5a8)

14.4.0 (2022-02-11)

Features

Add heading and text tokens (a2a0f43)
Add new token hierarchy to typography (bf7688f)

Bug Fixes

Fix variable generation (4abd7eb)
Make sure CSS variables are imported separately, so we can run the tests (26ff650)

Code Refactoring

forgot to addd the split up files (1458d54)
Separate mixins (5ff1b45)
split up files (e0597e0)
Use CSS variables (4f87dac)
Use filter, remove sketch generation (82fbc41)
Use proper order for including required mixins and variables (9620151)
add new dev server (8773fde)
Regenerate variables, remove CSS variable import from variables.* (ceeeee6)

reinstall (147df55)

remove old files (c8d915c)
use correct versions (f1b5deb)
Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

💡 Change focus styles, remove whatinput (75fd31b) , closes #505205

14.2.0 (2021-12-08)

Bug Fixes

🐛 Use correct heading hierarchy for design documentation (6c54ae4) , closes #511303
rebuild and reinstall (f9fb687)

reinstall (885c74b)

fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

🧨 The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core
🧨 Util is now renamed to Utils
🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
🧨 Navigation structure has now changed. Please see release notes!

Bug Fixes

🐛 Be more specific with selector (527fa24)

Documentation Updates

✏️ Adjust documentation (8e77c36)
✏️ Adjust documentation, examples etc (d161cd3)
✏️ Clean up for frontmatter and token generation (5fff306) , closes #490579
✏️ Documentation adjustments (73c09e3) , closes #467386
✏️ Remove unneeded margins for shortcuts (36c7e8d)
✏️ Separate out CSS documentation (0f43297) , closes #467386
✏️ Update links and change navigation structure (0bfd27d) , closes #490579

Code Refactoring

💡 Categorize components (9965266) , closes #490579
💡 Reduce spacing tokens, use correct size tokens (97aa461)
💡 Rename scope and repository (3ea5423)
💡 Use new navigation structure for documentation (415aee5) , closes #490579
another change in the structure (38a0d2e)

Miscellaneous chores

🤖 Prune changelogs (2c660c2)
🤖 Rename util to utils (f78721f)

bootstrap (6fc1ed8)

fix all old references to util (d57bf17)
Install missing dependencies (be7f1b8)
prepare for merge (0184490)
rebuild after fixing navigation structure (3995914)

reinstall (da80dba)

Rename scope and repo (257684e)
use correct version for utils (49e72d9)

13.12.0 (2021-10-22)

Bug Fixes

🐛 util (bc7fb32) , closes #491994 . Fix sass compiler calc function precision

13.11.0 (2021-10-19)

Features

🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

🐛 Complete the pseudo-element fix (1dcee2c)

13.7.0 (2021-09-22)

Documentation Updates

✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

🐛 Update repository urls (3dae3a3) , closes #465976

13.6.0 (2021-09-08)

Documentation Updates

Use default shortcut listing for demo links (a746602)

13.5.0 (2021-09-06)

Documentation Updates

✏️ Update documentation for navigation card change (0379db5)
🤖 Use node v14 (4009973)

bootstrap (d23e139)

🤖 Replace node-sass with dart-sass (078262c) , closes #434376
🤖 Use correct order for diff (cc6a4fd)

13.0.0 (2021-08-25)

⚠ BREAKING CHANGES

🧨 We are removing IE11 support
🤖 Remove IE11 support for typography (fcd4e91) , closes #336127

12.14.4 (2021-08-16)

Bug Fixes

do not blacklist src/fonts (b2419af)

12.14.1 (2021-08-12)

Miscellaneous chores

🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

12.12.1 (2021-08-10)

Bug Fixes

🐛 Make sure components using fonts, have fonts bundled (d5bb642) , closes #354912
🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
🤖 Reinstall (e660696)
🤖 Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

🐛 Manually set firstPublished and lastModified (e83af7d)
🐛 We don't need lastModified (e458a12)

12.1.0 (2021-05-07)

Documentation Updates

✏️ Documentation fixes (01216c0)

Miscellaneous chores

🤖 Improve look and feel of tokens (93a6322)

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

🧨 All of the mixins have now been renamed
🧨 Teasers are no more. It has been replaces with Lifestyle Navigational Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks
🧨 Notification is now renamed to Alert Banner
🧨 Footer is now renamed to Global Footer
🧨 Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts

Bug Fixes

🐛 Do not add generated date on generated files (2708429)
🐛 Do not generate a file header for tokens (ab5d86f)
🐛 Fix old bug where we used wrong font-family for headings (c57789c)
🐛 Remove px values from mobile tokens (bdd688c)
🐛 Update references (c08f107)
🐛 Use correct unit for line height in basekick (4790ec1)

Documentation Updates

✏️ Rearrange documentation structure (47ea594)

Code Refactoring

💡 Remove Teasers, added Text and Lifestyle cards (1247479) , closes #336508
💡 Rename and consolidate mixins (67cf470) , closes #268081
💡 Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508
💡 Rename Footer to Global Footer (7cb7239) , closes #336508
💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508

Miscellaneous chores

🤖 Add style-dictionary config and preliminary tokens (6800642)
🤖 Convert typography tokens from theo to SD (e48f255)
🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
🤖 Finalize breakpoint token conversion (f50ea0d)
🤖 Rebuild after fix (a0d6e16)
🤖 Rebuild after fix (9e0c919)
🤖 Rebuild after fix (501a947)
🤖 regenerate typography variables (b0678f4)
🤖 Regeneration of variable files without dates (5182c6e)
🤖 Reinstall (2c763ea)
🤖 Reinstall (69e1a5b)
🤖 Update all design token references (c640d15)
🤖 Update references to util variables (b79ec36)
🤖 Updating links (70f166e)
Adjust npm scripts and regenerate (b731d5c)

rebuild (7edb430)

🤖 Rename Change Log to Changelog (d412e63)
🤖 Remove all references to sketch (35fc554) , closes #339203
🤖 Update package fields (200c0af)

10.0.0 (2021-02-15)

⚠ BREAKING CHANGES

🧨 form-group is now renamed to input-wrapper, a more logical name

Code Refactoring

💡 Rename form-group to input-wrapper (7ee3bae)
reinstall packages (fcfacf4)
🤖 Use a more distint class name for doc crosslink links (2694867)

7.1.0 (2020-11-16)

Features

🎸 Add support for auto generation of components index (9444600) , closes #309650

6.43.3 (2020-11-03)

Miscellaneous chores

🤖 Manually set version (e4d9ca6)
🤖 Remove references to ligatures (4894639) , closes #307377

6.43.0 (2020-10-27)

Documentation Updates

✏️ Updated typography docs (1d772aa)
🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.36.0 (2020-10-12)

Miscellaneous chores

🤖 Add what-input to demo and dev files (56801b7)

6.31.0 (2020-09-25)

Features

🎸 Add textMetaBold mixin to typography (22fffde)

changes (13c3c5e)

6.29.4 (2020-09-09)

Documentation Updates

✏️ Use correct strong element with if class (6b484df)

6.29.3 (2020-09-07)

Documentation Updates

✏️ Merge atoms/molecules/organisms into components (90ed590)

6.26.12 (2020-08-03)

Documentation Updates

✏️ Update documentation for the new registry (3e7ba20)

Miscellaneous chores

🤖 lerna bootstrap (d835ec9)
🤖 Temporarily remove package-lock.json-files (87b3f7f)
🤖 Update references to new scope (b5575dd)

6.26.10 (2020-07-14)

Miscellaneous chores

🤖 Manually update some links (ecc0133)
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)

6.25.2 (2020-07-08)

Documentation Updates

✏️ Update documentation for typography (0754e6e)

Miscellaneous chores

🤖 Update demo for typography and add dev (a32bd96)

6.25.1 (2020-07-07)

Bug Fixes

🐛 Forgot to add correct font-weight (2afbf4f)

6.25.0 (2020-07-07)

Code Refactoring

💡 Adjust typography, mostly regarding mobile (4917812) , closes #260584

Documentation Updates

✏️ Use domain links for assets (59ace1c)

6.23.0 (2020-07-01)

Miscellaneous chores

reinstall (1ab1527)

6.22.0 (2020-07-01)

Documentation Updates

✏️ Update documentation layout (816053b)

Miscellaneous chores

🤖 Search and replace old color usage (3e5abb0)

6.21.6 (2020-06-11)

Miscellaneous chores

🤖 Remove .zip files from .npmignore (b3bc7dc)

6.21.0 (2020-06-04)

Documentation Updates

✏️ Improvements for documentation site (83680e4)

6.19.0 (2020-06-02)

Documentation Updates

✏️ Add documentation regarding token files and classes (130ebaa)

Miscellaneous chores

🤖 Give notice that files are not ment to be edited (a6cebb9)

reinstall (3416c65)

6.18.0 (2020-05-26)

Documentation Updates

✏️ Update documentation for component typography (ad5052b)

6.17.4 (2020-05-25)

Miscellaneous chores

🤖 Some documentation cleanup (22e125c)

6.16.0 (2020-05-19)

Features

🎸 Add text disclaimer text helper (41432b9)

Documentation Updates

✏️ Add componentname to frontmatter for typo index (cc2e635)

6.15.5 (2020-05-15)

Miscellaneous chores

prepped and ready to separate documentation site from code (d3e1fd9)
pruning and reinstalling (5cda0bc)

reinstall (939dae6)

reinstall (cae55fb)

Remove livingcss data and add frontmatter data (b384946)

6.15.4 (2020-05-14)

Miscellaneous chores

lerna bootstrap (0c4f599)

6.15.2 (2020-05-11)

Miscellaneous chores

reinstall and build (aedc097)

6.15.0 (2020-05-07)

Miscellaneous chores

🤖 reinstall (80dc63c)
update deps (3fbea80)

6.11.0 (2020-04-22)

Bug Fixes

🐛 Add correct margins for headings and add mixins for type (8939f6b)
🐛 Add sr only text for footer logo link (2971dd9)

6.10.9 (2020-04-22)

Miscellaneous chores

🤖 Add *.zip-files to .npmignore-files (062b8b0)
🤖 Remove references to verb in package.json files (cfdaaec)

6.10.6 (2020-04-17)

Miscellaneous chores

🤖 lerna bootstrap (d8faf26)

6.9.1 (2020-04-16)

Documentation Updates

✏️ Use correct badge color in README.md (03b563e)

6.9.0 (2020-04-15)

Features

🎸 Add token documentation generation (172f997)

6.6.0 (2020-04-09)

Documentation Updates

✏️ Change edit this document to edit this section (791b646)
✏️ Remove remaining tryme badges (ebaf0c7)

6.5.4 (2020-04-08)

Bug Fixes

🐛 Adjust weight principles example (c469ae7) , closes #240228
🐛 Fix ligature examples (b4d6ea0) , closes #240229
🐛 Make examples go full width (a173152) , closes #240230
🐛 Make type scale tables scrollable in responsive view (0806724) , closes #240227
🐛 Use auto-fit instead of auto-fill on weight grid (fb30102) , closes #240228

6.5.3 (2020-04-06)

Documentation Updates

✏️ Some more sg updates and tweaks (d1d6802)

6.3.4 (2020-04-01)

Miscellaneous chores

🤖 Use more of if styling on documentation site (2eaf386)

6.3.2 (2020-03-31)

Documentation Updates

✏️ Replace sg.message with if.notification (5d1aa99)

5.0.4 (2020-03-14)

Miscellaneous chores

🤖 Delete really old install files, update README files (c5d4893)
🤖 Remove .npmrc fles (4e26249)

5.0.1-alpha.160 (2020-03-12)

Miscellaneous chores

lerna bootstrap (0128bdb)
lerna bootstrap (1019833)

5.0.1-alpha.151 (2020-03-05)

Features

🎸 Add new typography rule for captions. Refactor weights (a033f4e) . and updated documentation

Bug Fixes

🐛 Use correct naming for italic font faces (f5ac5f2)

Documentation Updates

✏️ Fix typo in heading large documentation (865fcee)
✏️ Update typography documentation (5fd7150)

Miscellaneous chores

🤖 Build typography variables after font-face fix (8a42118)

5.0.1-alpha.149 (2020-03-05)

Miscellaneous chores

🤖 Adjust line-heights (2d3e66e)
🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables
Align typography to baseline. First attempt (f4447e9)

5.0.1-alpha.147 (2020-03-02)

Features

🎸 Make the documentation a bit more responsive (2d4278e)

Miscellaneous chores

lerna bootstrap (218a647)
lerna bootstrap (672c766)
lerna bootstrap (4d64d70)

5.0.1-alpha.143 (2020-02-26)

Documentation Updates

✏️ Some tweaks (4db6b23)

5.0.1-alpha.133 (2020-02-24)

Features

🎸 Add font-display: swap on variable font-faces (5f05122)

5.0.1-alpha.128 (2020-02-19)

Features

🎸 Add fallback font family for regular (e0e567c)
🎸 Add typography less files, and preprocessor tests (a575382)

5.0.1-alpha.127 (2020-02-18)

Documentation Updates

✏️ Add some icon to footer in all demo and doc files (f2bdaae)

5.0.1-alpha.120 (2020-02-17)

Miscellaneous chores

🤖 Continue to work on baseline grid (164a5ff)
🤖 Started to adhere to new baseline grid (7f5a270)

5.0.1-alpha.117 (2020-02-06)

Documentation Updates

✏️ Add edit links to documentation files (7c6e770)

5.0.1-alpha.115 (2020-02-05)

Documentation Updates

✏️ Update documentation examples to include if classname (80cf4ac)

5.0.1-alpha.110 (2020-01-21)

Documentation Updates

✏️ Use correct header names (0fa61d2)

Miscellaneous chores

🤖 Attempting to add sketch for typo (2b26d62)
testing sketch (003a233)

5.0.1-alpha.106 (2020-01-14)

Features

🎸 Add support for less for hero, core, typo and breakpoin (237b71c)

5.0.1-alpha.94 (2019-12-12)

Miscellaneous chores

🤖 Rename mooboard to hero (f7f2fae)

5.0.1-alpha.87 (2019-12-04)

Features

🎸 Add new font-weight (08538fd)

Bug Fixes

🐛 Several fixes (3cb042e)

5.0.1-alpha.81 (2019-12-03)

Code Refactoring

💡 Refactor typography, move extra styles into main (ec6e2e1)

5.0.1-alpha.79 (2019-12-03)

Documentation Updates

✏️ Scope all examples to .if (26bd7cd)

5.0.1-alpha.70 (2019-11-28)

Miscellaneous chores

🤖 Remove polymer, updated styling accordingly (04e1941)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

🐛 Use package-based imports (6822233)

5.0.1-alpha.64 (2019-11-26)

Bug Fixes

🐛 Remove text-align from mixin, update mixins (ec24677)

5.0.1-alpha.58 (2019-11-22)

Features

🎸 Remove normalize.css (2c23c2b)

Miscellaneous chores

🤖 lerna bootstrap (76e7c07)

5.0.1-alpha.56 (2019-11-22)

Bug Fixes

🐛 Increase specificity on center class (90c10c2)

5.0.1-alpha.53 (2019-11-13)

Features

🎸 Add IE11 support for typography (42e98eb)

5.0.1-alpha.45 (2019-11-08)

Features

🎸 Add icon and util scss files (129bdb4)
🎸 Add scss support for typography (5d20f10)

Miscellaneous chores

🤖 Start separating scss files from stylus (f38367c)

5.0.1-alpha.44 (2019-11-08)

Features

🎸 Add strong attribute styling (d9a0f7d)
🎸 Update and add center classes for layout (85f0d3f)

Documentation Updates

✏️ Add reference to body text demo (73848d9)

Miscellaneous chores

🤖 Add body text demo and update typo demo (ea06bc5)

5.0.1-alpha.43 (2019-11-07)

Miscellaneous chores

🤖 Finished adding desktop styles for crosslinks (62f11f4)

5.0.1-alpha.42 (2019-11-05)

Documentation Updates

✏️ Update documentation for teasers (896ed00)

Miscellaneous chores

🤖 lerna bootstrap (c8fb43e)

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.35 (2019-11-01)

Features

🎸 Add first iteration of moodboards (f73703d)
🎸 Add moodboard (c373c52)

Code Refactoring

💡 Refactor (a7ca18d)

5.0.1-alpha.34 (2019-10-31)

Features

🎸 Add support for demos (3a07cbe) . Also added demo for typography and set default alignment to left for headings

5.0.1-alpha.32 (2019-10-31)

Miscellaneous chores

🤖 Update components and documentation from sketches (1b8b6f6)

5.0.1-alpha.30 (2019-10-30)

Miscellaneous chores

🤖 lerna bootstrap (98f0aee)

5.0.1-alpha.29 (2019-10-29)

Miscellaneous chores

🤖 Use data-attributes instead of classes for sandbox (deea335)

5.0.1-alpha.24 (2019-10-25)

Features

🎸 Add styling for links (be974e5)

5.0.1-alpha.23 (2019-10-23)

Bug Fixes

🐛 Fix zip files (47350d1)

5.0.1-alpha.22 (2019-10-23)

Documentation Updates

✏️ Update VID documentation (3b1fdd7) . Updated from pdf file. Added .ase file downloads, logotype downloads

5.0.1-alpha.21 (2019-10-22)

Bug Fixes

🐛 Fix basekick (00075b2)

5.0.1-alpha.20 (2019-10-22)

Miscellaneous chores

🤖 Rename links (82e3a8a)

5.0.1-alpha.19 (2019-10-19)

Features

🎸 Add basekick (2d623c9)
🎸 Add variables for pixel values (8a6823e)

Bug Fixes

🐛 Remove px string from px variables (edffad8)

Code Refactoring

💡 Refactor (7e327b3)
💡 Use variables for font weights (27227ba)

Documentation Updates

✏️ Add a learn more section (c5baa10)
✏️ Rearrange html examples for usage (e366ec6)
✏️ Update documentation (70976d7)
✏️ Update documentation for typography (21ca4af)

Miscellaneous chores

🤖 Add missing files (b27765a)
🤖 Finalize text flwo for now (73980c7)

5.0.1-alpha.18 (2019-10-16)

Documentation Updates

✏️ Update spec documentation for text (7446db6)

Miscellaneous chores

🤖 Add mobile .ai asset for typo (ed429d5)

5.0.1-alpha.17 (2019-10-16)

Documentation Updates

✏️ Make figure containing typescale transparent (b082e99)

5.0.1-alpha.13 (2019-10-16)

Features

🎸 Finalize the latest update to typography (98be68d)
🎸 First round updating typography (87c5f04)

Miscellaneous chores

🤖 Adjust documentation for headings (d04dbff)
🤖 npm i && lerna bootstrap (0542f00)

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

🤖 More updates to layout and documentation PT 4 (4ccd4a0)
🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.8 (2019-10-09)

Miscellaneous chores

🤖 lerna bootstrap (85438b1)

5.0.1-alpha.6 (2019-10-08)

Features

🎸 Add design tokens to typography (384829e)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

🤖 lerna bootstrap (2aba4f1)
🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

🎸 Documentation update and add some icons (df1cc97)

Documentation Updates

✏️ Update documentation styling (29baea4)

Miscellaneous chores

🤖 lerna bootstrap (50ad9ae)
🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied
🤖 Remove old verb files (7e23286)
🤖 Replace .gb prefix with .if (c5e7edb)
🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font files (4bf2ed7)
🎸 Add new font styles (1c3e3b7)

Documentation Updates

✏️ Add more documentation, add otf files (6b64073)
✏️ Update documentation (d06d70e)

Miscellaneous chores

🤖 Update docs for typo, update tempate (ed99ff5)

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

🤖 More updates to layout and documentation PT 4 (4ccd4a0)
🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.8 (2019-10-09)

Miscellaneous chores

🤖 lerna bootstrap (85438b1)

5.0.1-alpha.6 (2019-10-08)

Features

🎸 Add design tokens to typography (384829e)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

🤖 lerna bootstrap (2aba4f1)
🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

🎸 Documentation update and add some icons (df1cc97)

Documentation Updates

✏️ Update documentation styling (29baea4)

Miscellaneous chores

🤖 lerna bootstrap (50ad9ae)
🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied
🤖 Remove old verb files (7e23286)
🤖 Replace .gb prefix with .if (c5e7edb)
🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font files (4bf2ed7)
🎸 Add new font styles (1c3e3b7)

Documentation Updates

✏️ Add more documentation, add otf files (6b64073)
✏️ Update documentation (d06d70e)

Miscellaneous chores

🤖 Update docs for typo, update tempate (ed99ff5)

5.0.1-alpha.8 (2019-10-09)

Miscellaneous chores

🤖 lerna bootstrap (85438b1)

5.0.1-alpha.6 (2019-10-08)

Features

🎸 Add design tokens to typography (384829e)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

🤖 lerna bootstrap (2aba4f1)
🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

🎸 Documentation update and add some icons (df1cc97)

Documentation Updates

✏️ Update documentation styling (29baea4)

Miscellaneous chores

🤖 lerna bootstrap (50ad9ae)
🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied
🤖 Remove old verb files (7e23286)
🤖 Replace .gb prefix with .if (c5e7edb)
🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font files (4bf2ed7)
🎸 Add new font styles (1c3e3b7)

Documentation Updates

✏️ Add more documentation, add otf files (6b64073)
✏️ Update documentation (d06d70e)

Miscellaneous chores

🤖 Update docs for typo, update tempate (ed99ff5)

5.0.0 (2019-09-11)

Miscellaneous chores

🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

🎸 Add new font files (4bf2ed7)
🎸 Add new font styles (1c3e3b7)

Documentation Updates

✏️ Add more documentation, add otf files (6b64073)
✏️ Update documentation (d06d70e)

Miscellaneous chores

🤖 Update docs for typo, update tempate (ed99ff5)

4.2.0 (2019-07-08)

Features

🎸 Add new font files (4bf2ed7)
🎸 Add new font styles (1c3e3b7)

Documentation Updates

✏️ Add more documentation, add otf files (6b64073)
✏️ Update documentation (d06d70e)

Miscellaneous chores

🤖 Update deps (2e84691)
🤖 Update docs for typo, update tempate (ed99ff5)

3.1.6 (2019-04-12)

Documentation Updates

✏️ Clarify usage of npm token, and change name to gb (224fe32)

3.0.0 (2019-01-15)

⚠ BREAKING CHANGES

Class syntax has completely changed.

Features

🎸 Scoping down guybrush (33e0d71)

2.7.2 (2018-11-21)

Bug Fixes

🐛 Remove all references to verb (2397d6b)

2.6.2 (2018-11-19)

Miscellaneous chores

🤖 Remove references to guybrush in documentation, for nw (002e662)

2.6.1 (2018-11-19)

Documentation Updates

✏️ Remove @guybrush-prefix from instal notes (c8d373e)

2.4.6 (2018-10-26)

Documentation Updates

✏️ Update documentation to reflect sandboxed examples (c16884f)

1.18.2 (2018-09-19)

Miscellaneous chores

🤖 Make gulp run more silent (56e050e)

1.18.1 (2018-09-17)

Miscellaneous chores

🤖 Add a .npmrc into each module (eed608f)
release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

release: :bookmark: publish v1.18.0 (aa3271d)

1.17.1 (2018-09-18)

Miscellaneous chores

release: :bookmark: publish v1.17.1 (2d8219c)

1.18.1 (2018-09-17)

Miscellaneous chores

🤖 Add a .npmrc into each module (eed608f)
release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

release: :bookmark: publish v1.18.0 (aa3271d)

1.17.0 (2018-09-10)

Miscellaneous chores

release: :bookmark: publish v1.17.0 (01db781)

1.15.0 (2018-09-07)

Miscellaneous chores

release: :bookmark: publish v1.15.0 (31be150)

1.14.0 (2018-09-06)

Miscellaneous chores

release: :bookmark: publish v1.14.0 (7b15e64)

1.13.0 (2018-09-04)

Features

🎸 Add helper class for light italic 100 (2d45b4d)

Code Refactoring

💡 Ease footprint of modules (70fe5c9)

Miscellaneous chores

release: :bookmark: publish v1.13.0 (b99e16d)

1.12.1 (2018-08-23)

Miscellaneous chores

🤖 Some refactoring, added version to bundle, package def (e4ee4a8) . to stylus files, updated prism and templates
release: :bookmark: publish v1.12.1 (189057f)

1.12.0 (2018-08-22)

Bug Fixes

🐛 Adjust local font for some families and use double quot (2e96322)

Miscellaneous chores

release: :bookmark: publish v1.12.0 (7c44ddc)

1.11.0 (2018-08-21)

Miscellaneous chores

packages: don'tuse dist in filename (c65ce81)
release: :bookmark: publish v1.11.0 (cbd5359)

1.10.35 (2018-08-20)

Miscellaneous chores

release: :bookmark: publish v1.10.35 (719ac06)

1.10.34 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.34 (3af5229)

1.10.33 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.33 (adec027)

1.10.32 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.32 (994e8a8)

1.10.31 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.31 (7a31e83)

1.10.30 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.30 (2fbaba0)

1.10.29 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.29 (d9cdb30)

1.10.28 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.28 (70864a5)

1.10.27 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.27 (4ff395c)

1.10.26 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.26 (30d9bbc)

1.10.25 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.25 (a77f3e4)

1.10.24 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.24 (ff3fe91)

1.10.23 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.23 (a1df933)

1.10.22 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.22 (04a1fbc)

1.10.21 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.21 (94e201d)

1.10.20 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.20 (25c40aa)

1.10.19 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.19 (607b524)

1.10.18 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.18 (ef6b333)

1.10.17 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.17 (5e54e21)

1.10.16 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.16 (479e563)

1.10.15 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.15 (508bffb)

1.10.14 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.14 (585912a)

1.10.13 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.13 (9fc1d4b)

1.10.12 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.12 (e638d67)

1.10.11 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.11 (e329aea)

1.10.10 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.10 (b594d1e)

1.10.9 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.9 (6f68c59)

1.10.8 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.8 (1b7ef57)

1.10.7 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.7 (95bc695)

1.10.6 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.6 (ad7cbab)

1.10.5 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.5 (a7efeed)

1.10.4 (2018-08-17)

Miscellaneous chores

release: :bookmark: publish v1.10.4 (4f08bfa)

1.10.3 (2018-08-17)

Documentation Updates

✏️ Update onboarding documentation (505ae9b)

Miscellaneous chores

release: :bookmark: publish v1.10.3 (7ca1bcf)

1.10.2 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.10.2 (781968c)

1.10.1 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.10.1 (aee140f)

1.10.0 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.10.0 (7dac7da)
table: scaffolding (1d06368)

1.9.1 (2018-08-16)

Miscellaneous chores

release: :bookmark: publish v1.9.1 (0516f24)

1.9.0 (2018-08-15)

Miscellaneous chores

release: :bookmark: publish v1.9.0 (9718b47)

1.8.0 (2018-08-14)

Miscellaneous chores

release: :bookmark: publish v1.8.0 (35ff480)

1.7.0 (2018-08-13)

Features

typography: Add another helperclass for lightweight hand writing (7cfbaa3)

Miscellaneous chores

release: :bookmark: publish v1.7.0 (6e2690f)

1.6.2 (2018-08-13)

Bug Fixes

typography: use correct naming for base open sans (688057b)

Code Refactoring

💡 only run clean when explicitly calling build (7bf3d25) . because the components are also building js files that got cleaned.

Miscellaneous chores

release: :bookmark: publish v1.6.2 (574ab8c)

1.6.1 (2018-08-09)

Miscellaneous chores

packages: bootstrap (4809d81)
packages: remove dist files (676d49f)
packages: scaffolding (dc5289a)
packages: use correct task for fonts (0159794)
release: :bookmark: publish v1.6.1 (2e820ce)
styleguide: first version of generated styleguide (d92d8b3)

0.1.6 (2018-06-19)

Edit this section

Preprocessor	CSS Variable	Value
$ids-heading-smallest-margin-bottom	`var(--ids-heading-smallest-margin-bottom)`	`1.5rem`
$ids-heading-smallest-font-family	`var(--ids-heading-smallest-font-family)`	`If Sans`
$ids-heading-smallest-font-size	`var(--ids-heading-smallest-font-size)`	`1.125rem`
$ids-heading-smallest-line-height	`var(--ids-heading-smallest-line-height)`	`1.75rem`
Aa$ids-heading-smallest-font-weight	`var(--ids-heading-smallest-font-weight)`	`126`
$ids-heading-small-margin-bottom	`var(--ids-heading-small-margin-bottom)`	`1.5rem`
$ids-heading-small-font-family	`var(--ids-heading-small-font-family)`	`If Sans`
$ids-heading-small-font-size-media-query-base	`var(--ids-heading-small-font-size-media-query-base)`	`1.125rem`
$ids-heading-small-font-size-media-query-md	`var(--ids-heading-small-font-size-media-query-md)`	`1.5rem`
$ids-heading-small-line-height-media-query-base	`var(--ids-heading-small-line-height-media-query-base)`	`1.75rem`
$ids-heading-small-line-height-media-query-md	`var(--ids-heading-small-line-height-media-query-md)`	`2rem`
Aa$ids-heading-small-font-weight-media-query-base	`var(--ids-heading-small-font-weight-media-query-base)`	`126`
Aa$ids-heading-small-font-weight-media-query-md	`var(--ids-heading-small-font-weight-media-query-md)`	`64`
$ids-heading-medium-margin-bottom-media-query-base	`var(--ids-heading-medium-margin-bottom-media-query-base)`	`1.5rem`
$ids-heading-medium-margin-bottom-media-query-xxs	`var(--ids-heading-medium-margin-bottom-media-query-xxs)`	`1.5rem`
$ids-heading-medium-margin-bottom-media-query-xs	`var(--ids-heading-medium-margin-bottom-media-query-xs)`	`1.5rem`
$ids-heading-medium-margin-bottom-media-query-md	`var(--ids-heading-medium-margin-bottom-media-query-md)`	`2rem`
$ids-heading-medium-font-family	`var(--ids-heading-medium-font-family)`	`If Sans Light`
$ids-heading-medium-font-size-media-query-base	`var(--ids-heading-medium-font-size-media-query-base)`	`1.25rem`
$ids-heading-medium-font-size-media-query-xxs	`var(--ids-heading-medium-font-size-media-query-xxs)`	`1.375rem`
$ids-heading-medium-font-size-media-query-xs	`var(--ids-heading-medium-font-size-media-query-xs)`	`1.5rem`
$ids-heading-medium-font-size-media-query-md	`var(--ids-heading-medium-font-size-media-query-md)`	`2rem`
$ids-heading-medium-line-height-media-query-base	`var(--ids-heading-medium-line-height-media-query-base)`	`2rem`
$ids-heading-medium-line-height-media-query-md	`var(--ids-heading-medium-line-height-media-query-md)`	`2.625rem`
Aa$ids-heading-medium-font-weight-media-query-base	`var(--ids-heading-medium-font-weight-media-query-base)`	`64`
Aa$ids-heading-medium-font-weight-media-query-md	`var(--ids-heading-medium-font-weight-media-query-md)`	`50`
$ids-heading-large-margin-bottom-media-query-base	`var(--ids-heading-large-margin-bottom-media-query-base)`	`1.5rem`
$ids-heading-large-margin-bottom-media-query-xxs	`var(--ids-heading-large-margin-bottom-media-query-xxs)`	`2rem`
$ids-heading-large-margin-bottom-media-query-xs	`var(--ids-heading-large-margin-bottom-media-query-xs)`	`2rem`
$ids-heading-large-margin-bottom-media-query-md	`var(--ids-heading-large-margin-bottom-media-query-md)`	`3rem`
$ids-heading-large-font-family	`var(--ids-heading-large-font-family)`	`If Sans Light`
$ids-heading-large-font-size-media-query-base	`var(--ids-heading-large-font-size-media-query-base)`	`1.5rem`
$ids-heading-large-font-size-media-query-xxs	`var(--ids-heading-large-font-size-media-query-xxs)`	`1.625rem`
$ids-heading-large-font-size-media-query-xs	`var(--ids-heading-large-font-size-media-query-xs)`	`1.75rem`
$ids-heading-large-font-size-media-query-md	`var(--ids-heading-large-font-size-media-query-md)`	`2.625rem`
$ids-heading-large-line-height-media-query-base	`var(--ids-heading-large-line-height-media-query-base)`	`3.25rem`
$ids-heading-large-line-height-media-query-md	`var(--ids-heading-large-line-height-media-query-md)`	`4rem`
Aa$ids-heading-large-font-weight-media-query-base	`var(--ids-heading-large-font-weight-media-query-base)`	`48`
Aa$ids-heading-large-font-weight-media-query-md	`var(--ids-heading-large-font-weight-media-query-md)`	`40`
$ids-heading-larger-margin-bottom-media-query-base	`var(--ids-heading-larger-margin-bottom-media-query-base)`	`2rem`
$ids-heading-larger-margin-bottom-media-query-xxs	`var(--ids-heading-larger-margin-bottom-media-query-xxs)`	`2rem`
$ids-heading-larger-margin-bottom-media-query-xs	`var(--ids-heading-larger-margin-bottom-media-query-xs)`	`2.5rem`
$ids-heading-larger-margin-bottom-media-query-md	`var(--ids-heading-larger-margin-bottom-media-query-md)`	`3.5rem`
$ids-heading-larger-font-family	`var(--ids-heading-larger-font-family)`	`If Sans Thin`
$ids-heading-larger-letter-spacing	`var(--ids-heading-larger-letter-spacing)`	`-0.25px`
$ids-heading-larger-font-size-media-query-base	`var(--ids-heading-larger-font-size-media-query-base)`	`1.75rem`
$ids-heading-larger-font-size-media-query-xxs	`var(--ids-heading-larger-font-size-media-query-xxs)`	`1.875rem`
$ids-heading-larger-font-size-media-query-xs	`var(--ids-heading-larger-font-size-media-query-xs)`	`2.0625rem`
$ids-heading-larger-font-size-media-query-md	`var(--ids-heading-larger-font-size-media-query-md)`	`3.5rem`
$ids-heading-larger-line-height-media-query-base	`var(--ids-heading-larger-line-height-media-query-base)`	`3.25rem`
$ids-heading-larger-line-height-media-query-md	`var(--ids-heading-larger-line-height-media-query-md)`	`4rem`
Aa$ids-heading-larger-font-weight-media-query-base	`var(--ids-heading-larger-font-weight-media-query-base)`	`48`
Aa$ids-heading-larger-font-weight-media-query-md	`var(--ids-heading-larger-font-weight-media-query-md)`	`40`
$ids-heading-largest-margin-bottom-media-query-base	`var(--ids-heading-largest-margin-bottom-media-query-base)`	`2.5rem`
$ids-heading-largest-margin-bottom-media-query-xxs	`var(--ids-heading-largest-margin-bottom-media-query-xxs)`	`2.5rem`
$ids-heading-largest-margin-bottom-media-query-xs	`var(--ids-heading-largest-margin-bottom-media-query-xs)`	`3rem`
$ids-heading-largest-margin-bottom-media-query-md	`var(--ids-heading-largest-margin-bottom-media-query-md)`	`3.5rem`
$ids-heading-largest-font-family	`var(--ids-heading-largest-font-family)`	`If Sans Thin`
$ids-heading-largest-letter-spacing	`var(--ids-heading-largest-letter-spacing)`	`-0.5px`
$ids-heading-largest-font-size-media-query-base	`var(--ids-heading-largest-font-size-media-query-base)`	`2.25rem`
$ids-heading-largest-font-size-media-query-xxs	`var(--ids-heading-largest-font-size-media-query-xxs)`	`2.375rem`
$ids-heading-largest-font-size-media-query-xs	`var(--ids-heading-largest-font-size-media-query-xs)`	`2.625rem`
$ids-heading-largest-font-size-media-query-md	`var(--ids-heading-largest-font-size-media-query-md)`	`3.5rem`
$ids-heading-largest-line-height-media-query-base	`var(--ids-heading-largest-line-height-media-query-base)`	`3.5rem`
$ids-heading-largest-line-height-media-query-md	`var(--ids-heading-largest-line-height-media-query-md)`	`4rem`
Aa$ids-heading-largest-font-weight	`var(--ids-heading-largest-font-weight)`	`40`

CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window

New Style Typography (used in Figma)

Typography

Table of Contents

Usage

Hero title

The quick brown fox jumps over the lazy dog

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Heading largest

The quick brown fox jumps over the lazy dog

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Heading larger

The quick brown fox jumps over the lazy dog

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Heading large

The quick brown fox jumps over the lazy dog

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Heading medium

The quick brown fox jumps over the lazy dog

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Heading small

The quick brown fox jumps over the lazy dog

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Heading smallest

The quick brown fox jumps over the lazy dog

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Lead text

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Body text

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Meta text

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Caption text

Usage with class

Usage with mixins

Stylus

Sass/Scss

Less

Disclaimer text

Usage with class