View on GitHub

Typography

Documentation and examples for OUDS Web typography, including global settings, headings, body text, and more.

On this page

Global settings

OUDS Web sets basic global display, typography. When more control is needed, check out the textual utility classes.

  • Use a native font stack that selects the best font-family for each OS and device.
  • For a more inclusive and accessible type scale, we use the browser’s default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
  • Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the :root children.
  • Use max-width on all font references for readability reasons. If you want to get rid of the max-width, please make sure to use our .mw-none width utility.
  • Use --bs-color-bg-primary to set a background-color on the :root children (#fff by default).

These styles can be found within _reboot.scss, and the global variables are defined in _variables.scss. Make sure to set $font-size-base in rem.

If you need need to include a font reference inside a custom component, please refer to our font mixin section.

Headings

All HTML headings, <h1> through <h6>, are available. Each class sets font-size but also line-height, letter-spacing, font-weight: bold, and max-width. Here are the associated font-sizes depending on the breakpoints. If you want to get rid of the max-width, please make sure to use our .mw-none width utility.

Heading reference Values from 2xs to sm Values from md to lg Values for xl and upper
Heading xlarge (<h1></h1>) 1.75rem (28px) 2.25rem (36px) 2.5rem (40px)
Heading large (<h2></h2>) 1.5rem (24px) 1.75rem (28px) 2rem (32px)
Heading medium (<h3></h3>) 1.25rem (20px) 1.5rem (24px) 1.75rem (28px)
Heading small (<h4></h4>) 1.125rem (18px) 1.25rem (20px) 1.5rem (24px)
Body large (<h5></h5>) 1rem (16px) 1.125rem (18px) 1.25rem (20px)
Body medium (<h6></h6>) 1rem (16px) 1rem (16px) 1.125rem (18px)
See more details about the heading classes
Heading reference Values from 2xs to sm Values from md to lg Values for xl and upper
Heading xlarge (<h1></h1>)
  • font-size: 1.75rem
  • line-height: 1.2857
  • letter-spacing: -0.0175rem
  • max-width: 55rem
  • font-size: 2.25rem
  • line-height: 1.2222
  • letter-spacing: -.0225rem
  • max-width: 55rem
  • font-size: 2.5rem
  • line-height: 1.2
  • letter-spacing: -0.025rem
  • max-width: 65rem
Heading large (<h2></h2>)
  • font-size: 1.5rem
  • line-height: 1.3333
  • letter-spacing: -0.0075rem
  • max-width: 55rem
  • font-size: 1.75rem
  • line-height: 1.2857
  • letter-spacing: -0.0175rem
  • max-width: 55rem
  • font-size: 2rem
  • line-height: 1.25
  • letter-spacing: -0.02rem
  • max-width: 65rem
Heading medium (<h3></h3>)
  • font-size: 1.25rem
  • line-height: 1.4
  • letter-spacing: 0
  • max-width: 55rem
  • font-size: 1.5rem
  • line-height: 1.3333
  • letter-spacing: -0.0075rem
  • max-width: 55rem
  • font-size: 1.75rem
  • line-height: 1.2857
  • letter-spacing: -0.0175rem
  • max-width: 65rem
Heading small (<h4></h4>)
  • font-size: 1.125rem
  • line-height: 1.3333
  • letter-spacing: 0.01125rem
  • max-width: 40rem
  • font-size: 1.25rem
  • line-height: 1.4
  • letter-spacing: 0
  • max-width: 40rem
  • font-size: 1.5rem
  • line-height: 1.3333
  • letter-spacing: -0.0075rem
  • max-width: 45rem
Body large (<h5></h5>)
  • font-size: 1rem
  • line-height: 1.5
  • letter-spacing: 0.0125rem
  • max-width: 40rem
  • font-size: 1.125rem
  • line-height: 1.3333
  • letter-spacing: 0.01125rem
  • max-width: 40rem
  • font-size: 1.25rem
  • line-height: 1.4
  • letter-spacing: 0
  • max-width: 45rem
Body medium (<h6></h6>)
  • font-size: 1rem
  • line-height: 1.5
  • letter-spacing: 0.0125rem
  • max-width: 40rem
  • font-size: 1rem
  • line-height: 1.5
  • letter-spacing: 0.0125rem
  • max-width: 40rem
  • font-size: 1.125rem
  • line-height: 1.3333
  • letter-spacing: 0.01125rem
  • max-width: 45rem

h1. OUDS Web heading

h2. OUDS Web heading

h3. OUDS Web heading

h4. OUDS Web heading

h5. OUDS Web heading
h6. OUDS Web heading
<h1>h1. OUDS Web heading</h1>
<h2>h2. OUDS Web heading</h2>
<h3>h3. OUDS Web heading</h3>
<h4>h4. OUDS Web heading</h4>
<h5>h5. OUDS Web heading</h5>
<h6>h6. OUDS Web heading</h6>
html

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. OUDS Web heading

h2. OUDS Web heading

h3. OUDS Web heading

h4. OUDS Web heading

h5. OUDS Web heading

h6. OUDS Web heading

<p class="h1">h1. OUDS Web heading</p>
<p class="h2">h2. OUDS Web heading</p>
<p class="h3">h3. OUDS Web heading</p>
<p class="h4">h4. OUDS Web heading</p>
<p class="h5">h5. OUDS Web heading</p>
<p class="h6">h6. OUDS Web heading</p>
html

You can easily add an icon with your font reference using our icon helper.

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

We provide .display-* from 1 through 3. Each class sets font-size but also line-height, letter-spacing, font-weight: bold, and max-width. If you want to get rid of the max-width, please make sure to use our .mw-none width utility. Here are the associated font-sizes depending on the breakpoints.

Display reference Values from 2xs to sm Values from md to lg Values for xl and upper
Display large (.display-large) 2.5rem (40px) 4rem (64px) 4.5rem (72px)
Display medium (.display-medium) 2.25rem (36px) 3rem (48px) 3.5rem (56px)
Display small (.display-small) 2rem (32px) 2.5rem (40px) 3rem (48px)
See more details about the `.display` classes
Display reference Values from 2xs to sm Values from md to lg Values for xl and upper
Display large (.display-large)
  • font-size: 2.5rem
  • line-height: 1.2
  • letter-spacing: -0.025rem
  • max-width: 55rem
  • font-size: 4rem
  • line-height: 1.125
  • letter-spacing: -0.06rem
  • max-width: 55rem
  • font-size: 4.5rem
  • line-height: 1.1111
  • letter-spacing: -0.0675rem
  • max-width: 65rem
Display medium (.display-medium)
  • font-size: 2.25rem
  • line-height: 1.2222
  • letter-spacing: -0.0225rem
  • max-width: 55rem
  • font-size: 3rem
  • line-height: 1.1667
  • letter-spacing: -0.0375rem
  • max-width: 55rem
  • font-size: 3.5rem
  • line-height: 1.1429
  • letter-spacing: -0.04375rem
  • max-width: 65rem
Display small (.display-small)
  • font-size: 2rem
  • line-height: 1.25
  • letter-spacing: -0.02rem
  • max-width: 55rem
  • font-size: 2.5rem
  • line-height: 1.2
  • letter-spacing: -0.025rem
  • max-width: 55rem
  • font-size: 3rem
  • line-height: 1.1667
  • letter-spacing: -0.0375rem
  • max-width: 65rem
Display large
Display medium
Display small
<h1 class="display-large">Display large</h1>
<h1 class="display-medium">Display medium</h1>
<h1 class="display-small">Display small</h1>

Display headings are configured via the $display-font-sizes Sass map and the variable $display-font-weight.

Display headings are customizable via three variables, $display-font-family, $display-font-style and $display-line-height.

Bootstrap $enable-bootstrap-compatibility: true

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height.

Display headings are customizable via two variables, $display-font-family and $display-font-style.

scss/_variables.scss 
$display-font-sizes: (
  large: "display-large",
  medium: "display-medium",
  small: "display-small"
);

@if $enable-bootstrap-compatibility {
  $display-font-sizes: map-merge(
    $display-font-sizes,
    (
      1: "display-large",
      2: "display-medium",
      3: "display-small",
      4: "heading-xlarge",
      5: "heading-large",
      6: "heading-medium",
    )
  );
}

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: $ouds-font-weight-display;
$display-line-height: $headings-line-height;

Regular texts

Since only headings, display headings and strong text are meant to use Bold in main content, other contents should use normal font-weight. Each class sets font-size but also line-height, letter-spacing, and max-width. If you want to get rid of the max-width, please make sure to use our .mw-none width utility. Here are the associated font-sizes depending on the breakpoints. See our Font utilities.

Body medium is set by default on :root children but we don’t set the max-width property for usability reasons.
Regular text reference Values from 2xs to sm Values from md to lg Values for xl and upper
Body large (.lead) 1rem (16px) 1rem (16px) 1.125rem (18px)
Body medium (default <p>) .875rem (14px) .875rem (14px) 1rem (16px)
Body small (.small) .75rem (12px) .75rem (12px) .875rem (14px)
See more details about the regular text classes
Regular text reference Values from 2xs to sm Values from md to lg Values for xl and upper
Body large (.lead)
  • font-size: 1rem
  • line-height: 1.5
  • letter-spacing: 0.0125rem
  • max-width: 40rem
  • font-size: 1rem
  • line-height: 1.5
  • letter-spacing: 0.0125rem
  • max-width: 40rem
  • font-size: 1.125rem
  • line-height: 1.3333
  • letter-spacing: 0.01125rem
  • max-width: 45rem
Body medium (default)
  • font-size: .875rem
  • line-height: 1.4286
  • letter-spacing: 0.010625rem
  • max-width: 40rem
  • font-size: .875rem
  • line-height: 1.4286
  • letter-spacing: 0.010625rem
  • max-width: 40rem
  • font-size: 1rem
  • line-height: 1.5
  • letter-spacing: 0.0125rem
  • max-width: 45rem
Body small (.small)
  • font-size: .75rem
  • line-height: 1.3333
  • letter-spacing: 0.01125rem
  • max-width: 40rem
  • font-size: .75rem
  • line-height: 1.3333
  • letter-spacing: 0.01125rem
  • max-width: 40rem
  • font-size: .875rem
  • line-height: 1.4286
  • letter-spacing: 0.010625rem
  • max-width: 45rem

You can easily add an icon with your font reference using our icon helper.

Lead

Make a paragraph stand out by adding .lead. It uses Regular text body large.

This is a lead paragraph. It stands out from regular paragraphs. 

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>
html

Small

Render a paragraph with a small font-size by adding .small or use <small>. It uses Regular text body small.

This is a small paragraph.

This is a small paragraph. 

<p>
  <small>This is a small paragraph.</small>
</p>
<p class="small">
  This is a small paragraph.
</p>
html

Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as bold text too, but would natively be italicized.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as bold text too,</em> but would natively be italicized.</p>
html

Beware that those tags should be used for semantic purpose:

  • <mark> represents text which is marked or highlighted for reference or notation purposes.
  • <small> represents side-comments and small print, like copyright and legal text. It uses Regular text body small.
  • <s> represents element that are no longer relevant or no longer accurate.
  • <u> represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.

If you want to style your text, you should use the following classes instead:

  • .mark will apply the same styles as <mark>.
  • .small will apply the same styles as <small>.
  • .text-decoration-underline will apply the same styles as <u>.
  • .text-decoration-line-through will apply the same styles as <s>.

While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.

Text utilities

Change text alignment, transform, style, weight, line-height, decoration and color with our text utilities and color utilities.

Abbreviations

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

attr

<p><abbr title="attribute">attr</abbr></p>
html

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote. It uses Regular text body large.

A well-known quote, contained in a blockquote element.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
html

Naming a source

The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well. It uses Regular text body small.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title 
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
html

Alignment

Use text utilities as needed to change the alignment of your blockquote.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title 
<figure class="text-center">
  <blockquote class="blockquote">
    <p class="mx-auto">A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer mx-auto">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
html

A well-known quote, contained in a blockquote element.

Someone famous in Source Title 
<figure class="text-end">
  <blockquote class="blockquote">
    <p class="ms-auto">A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer ms-auto">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
html

CSS

Variables

scss/_root.scss 
--#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-mobile)};
--#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-mobile)};
--#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-mobile)};
--#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-mobile)};
--#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-mobile)};
--#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-mobile)};
--#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-mobile)};
--#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-mobile)};
--#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-mobile)};
--#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-mobile)};
--#{$prefix}font-size-label-xlarge: #{px-to-rem($ouds-font-size-label-xlarge)};
--#{$prefix}font-size-label-large: #{px-to-rem($ouds-font-size-label-large)};
--#{$prefix}font-size-label-medium: #{px-to-rem($ouds-font-size-label-medium)};
--#{$prefix}font-size-label-small: #{px-to-rem($ouds-font-size-label-small)};
--#{$prefix}font-size-code-medium: #{px-to-rem($ouds-font-size-code-medium)};
--#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-mobile, $ouds-font-size-display-large-mobile)};
--#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-mobile, $ouds-font-size-display-medium-mobile)};
--#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-mobile, $ouds-font-size-display-small-mobile)};
--#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-mobile, $ouds-font-size-heading-xlarge-mobile)};
--#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-mobile, $ouds-font-size-heading-large-mobile)};
--#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-mobile, $ouds-font-size-heading-medium-mobile)};
--#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-mobile, $ouds-font-size-heading-small-mobile)};
--#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-mobile, $ouds-font-size-body-large-mobile)};
--#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-mobile, $ouds-font-size-body-medium-mobile)};
--#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-mobile, $ouds-font-size-body-small-mobile)};
--#{$prefix}font-line-height-label-xlarge: #{divide($ouds-font-line-height-label-xlarge, $ouds-font-size-label-xlarge)};
--#{$prefix}font-line-height-label-large: #{divide($ouds-font-line-height-label-large, $ouds-font-size-label-large)};
--#{$prefix}font-line-height-label-medium: #{divide($ouds-font-line-height-label-medium, $ouds-font-size-label-medium)};
--#{$prefix}font-line-height-label-small: #{divide($ouds-font-line-height-label-small, $ouds-font-size-label-small)};
--#{$prefix}font-line-height-code-medium: #{divide($ouds-font-line-height-label-small, $ouds-font-size-code-medium)};
--#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-mobile)};
--#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-mobile)};
--#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-mobile)};
--#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-mobile)};
--#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-mobile)};
--#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-mobile)};
--#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-mobile)};
--#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-mobile)};
--#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-mobile)};
--#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-mobile)};
--#{$prefix}font-letter-spacing-label-xlarge: #{px-to-rem($ouds-font-letter-spacing-label-xlarge)};
--#{$prefix}font-letter-spacing-label-large: #{px-to-rem($ouds-font-letter-spacing-label-large)};
--#{$prefix}font-letter-spacing-label-medium: #{px-to-rem($ouds-font-letter-spacing-label-medium)};
--#{$prefix}font-letter-spacing-label-small: #{px-to-rem($ouds-font-letter-spacing-label-small)};
--#{$prefix}font-letter-spacing-code-medium: #{px-to-rem($ouds-font-letter-spacing-code-medium)};
--#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-mobile)};
--#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-mobile)};
--#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-mobile)};
--#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-mobile)};
--#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-mobile)};
--#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-mobile)};
--#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-mobile)};
--#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-mobile)};
--#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-mobile)};
--#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-mobile)};

@include media-breakpoint-up(md) {
  --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-tablet)};
  --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-tablet)};
  --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-tablet)};
  --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-tablet)};
  --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-tablet)};
  --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-tablet)};
  --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-tablet)};
  --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-tablet)};
  --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-tablet)};
  --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-tablet)};
  --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-tablet, $ouds-font-size-display-large-tablet)};
  --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-tablet, $ouds-font-size-display-medium-tablet)};
  --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-tablet, $ouds-font-size-display-small-tablet)};
  --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-tablet, $ouds-font-size-heading-xlarge-tablet)};
  --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-tablet, $ouds-font-size-heading-large-tablet)};
  --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-tablet, $ouds-font-size-heading-medium-tablet)};
  --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-tablet, $ouds-font-size-heading-small-tablet)};
  --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-tablet, $ouds-font-size-body-large-tablet)};
  --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-tablet, $ouds-font-size-body-medium-tablet)};
  --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-tablet, $ouds-font-size-body-small-tablet)};
  --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-tablet)};
  --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-tablet)};
  --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-tablet)};
  --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-tablet)};
  --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-tablet)};
  --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-tablet)};
  --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-tablet)};
  --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-tablet)};
  --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-tablet)};
  --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-tablet)};
  --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-tablet)};
  --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-tablet)};
  --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-tablet)};
  --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-tablet)};
  --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-tablet)};
  --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-tablet)};
  --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-tablet)};
  --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-tablet)};
  --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-tablet)};
  --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-tablet)};
}

@include media-breakpoint-up(xl) {
  --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-desktop)};
  --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-desktop)};
  --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-desktop)};
  --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-desktop)};
  --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-desktop)};
  --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-desktop)};
  --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-desktop)};
  --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-desktop)};
  --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-desktop)};
  --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-desktop)};
  --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-desktop, $ouds-font-size-display-large-desktop)};
  --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-desktop, $ouds-font-size-display-medium-desktop)};
  --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-desktop, $ouds-font-size-display-small-desktop)};
  --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-desktop, $ouds-font-size-heading-xlarge-desktop)};
  --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-desktop, $ouds-font-size-heading-large-desktop)};
  --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-desktop, $ouds-font-size-heading-medium-desktop)};
  --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-desktop, $ouds-font-size-heading-small-desktop)};
  --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-desktop, $ouds-font-size-body-large-desktop)};
  --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-desktop, $ouds-font-size-body-medium-desktop)};
  --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-desktop, $ouds-font-size-body-small-desktop)};
  --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-desktop)};
  --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-desktop)};
  --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-desktop)};
  --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-desktop)};
  --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-desktop)};
  --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-desktop)};
  --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-desktop)};
  --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-desktop)};
  --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-desktop)};
  --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-desktop)};
  --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-desktop)};
  --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-desktop)};
  --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-desktop)};
  --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-desktop)};
  --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-desktop)};
  --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-desktop)};
  --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-desktop)};
  --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-desktop)};
  --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-desktop)};
  --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-desktop)};
}

Sass tokens

Raw tokens

Font raw tokens as Sass variables. Not to be used as-is.

scss/tokens/_raw.scss 
$ouds-font-family-brand-default: "Helvetica Neue";
// $ouds-font-family-brand-tv: "Helvetica Neue LT";
// $ouds-font-family-monospace-courier-new: "Courier New";
// $ouds-font-family-monospace-menlo: "Menlo";
// $ouds-font-family-monospace-monaco: "Monaco";
// $ouds-font-family-monospace-sf-mono: "SF Mono";
// $ouds-font-family-system-arial: "Arial";
// $ouds-font-family-system-helvetica: "Helvetica";
// $ouds-font-family-system-noto-sans: "Noto Sans";
// $ouds-font-family-system-roboto: "Roboto";
// $ouds-font-family-system-sf-pro: "SF Pro";
$ouds-font-letter-spacing-150: .18px;
// $ouds-font-letter-spacing-175: .19px;
$ouds-font-letter-spacing-200: .17px;
$ouds-font-letter-spacing-250: .2px;
$ouds-font-letter-spacing-300: .18px;
$ouds-font-letter-spacing-350: 0;
$ouds-font-letter-spacing-450: -.12px;
$ouds-font-letter-spacing-550: -.28px;
$ouds-font-letter-spacing-650: -.32px;
$ouds-font-letter-spacing-750: -.36px;
$ouds-font-letter-spacing-850: -.4px;
// $ouds-font-letter-spacing-950: -.55px;
$ouds-font-letter-spacing-1050: -.6px;
// $ouds-font-letter-spacing-1150: -.65px;
$ouds-font-letter-spacing-1250: -.7px;
$ouds-font-letter-spacing-1450: -.96px;
$ouds-font-letter-spacing-1850: -1.08px;
$ouds-font-line-height-250: 16px;
$ouds-font-line-height-350: 20px;
$ouds-font-line-height-450: 24px;
$ouds-font-line-height-550: 28px;
$ouds-font-line-height-650: 32px;
$ouds-font-line-height-750: 36px;
$ouds-font-line-height-850: 40px;
$ouds-font-line-height-950: 44px;
$ouds-font-line-height-1050: 48px;
// $ouds-font-line-height-1150: 52px;
$ouds-font-line-height-1250: 56px;
// $ouds-font-line-height-1350: 60px;
$ouds-font-line-height-1450: 64px;
$ouds-font-line-height-1850: 72px;
$ouds-font-line-height-2050: 80px;
$ouds-font-size-150: 12px;
// $ouds-font-size-175: 13px;
$ouds-font-size-200: 14px;
$ouds-font-size-250: 16px;
$ouds-font-size-300: 18px;
$ouds-font-size-350: 20px;
$ouds-font-size-450: 24px;
$ouds-font-size-550: 28px;
$ouds-font-size-650: 32px;
$ouds-font-size-750: 36px;
$ouds-font-size-850: 40px;
// $ouds-font-size-950: 44px;
$ouds-font-size-1050: 48px;
// $ouds-font-size-1150: 52px;
$ouds-font-size-1250: 56px;
$ouds-font-size-1450: 64px;
$ouds-font-size-1850: 72px;
// $ouds-font-weight-100: 100;
// $ouds-font-weight-200: 200;
// $ouds-font-weight-300: 300;
$ouds-font-weight-400: 400;
// $ouds-font-weight-500: 500;
// $ouds-font-weight-600: 600;
$ouds-font-weight-700: 700;
// $ouds-font-weight-800: 800;
// $ouds-font-weight-900: 900;
// $ouds-font-weight-950: 950;

Semantic tokens

Font semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss 
$ouds-font-family: $ouds-font-family-brand-default;
$ouds-font-letter-spacing-body-large-desktop: $ouds-font-letter-spacing-300;
$ouds-font-letter-spacing-body-large-mobile: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-body-large-tablet: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-body-medium-desktop: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-body-medium-mobile: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-body-medium-tablet: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-body-small-desktop: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-body-small-mobile: $ouds-font-letter-spacing-150;
$ouds-font-letter-spacing-body-small-tablet: $ouds-font-letter-spacing-150;
$ouds-font-letter-spacing-code-medium: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-display-large-desktop: $ouds-font-letter-spacing-1850;
$ouds-font-letter-spacing-display-large-mobile: $ouds-font-letter-spacing-850;
$ouds-font-letter-spacing-display-large-tablet: $ouds-font-letter-spacing-1450;
$ouds-font-letter-spacing-display-medium-desktop: $ouds-font-letter-spacing-1250;
$ouds-font-letter-spacing-display-medium-mobile: $ouds-font-letter-spacing-750;
$ouds-font-letter-spacing-display-medium-tablet: $ouds-font-letter-spacing-1050;
$ouds-font-letter-spacing-display-small-desktop: $ouds-font-letter-spacing-1050;
$ouds-font-letter-spacing-display-small-mobile: $ouds-font-letter-spacing-650;
$ouds-font-letter-spacing-display-small-tablet: $ouds-font-letter-spacing-850;
$ouds-font-letter-spacing-heading-large-desktop: $ouds-font-letter-spacing-650;
$ouds-font-letter-spacing-heading-large-mobile: $ouds-font-letter-spacing-450;
$ouds-font-letter-spacing-heading-large-tablet: $ouds-font-letter-spacing-550;
$ouds-font-letter-spacing-heading-medium-desktop: $ouds-font-letter-spacing-550;
$ouds-font-letter-spacing-heading-medium-mobile: $ouds-font-letter-spacing-350;
$ouds-font-letter-spacing-heading-medium-tablet: $ouds-font-letter-spacing-450;
$ouds-font-letter-spacing-heading-small-desktop: $ouds-font-letter-spacing-450;
$ouds-font-letter-spacing-heading-small-mobile: $ouds-font-letter-spacing-300;
$ouds-font-letter-spacing-heading-small-tablet: $ouds-font-letter-spacing-350;
$ouds-font-letter-spacing-heading-xlarge-desktop: $ouds-font-letter-spacing-850;
$ouds-font-letter-spacing-heading-xlarge-mobile: $ouds-font-letter-spacing-550;
$ouds-font-letter-spacing-heading-xlarge-tablet: $ouds-font-letter-spacing-750;
$ouds-font-letter-spacing-label-large: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-label-medium: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-label-small: $ouds-font-letter-spacing-150;
$ouds-font-letter-spacing-label-xlarge: $ouds-font-letter-spacing-300;
$ouds-font-line-height-body-large-desktop: $ouds-font-line-height-450;
$ouds-font-line-height-body-large-mobile: $ouds-font-line-height-450;
$ouds-font-line-height-body-large-tablet: $ouds-font-line-height-450;
$ouds-font-line-height-body-medium-desktop: $ouds-font-line-height-450;
$ouds-font-line-height-body-medium-mobile: $ouds-font-line-height-350;
$ouds-font-line-height-body-medium-tablet: $ouds-font-line-height-350;
$ouds-font-line-height-body-small-desktop: $ouds-font-line-height-350;
$ouds-font-line-height-body-small-mobile: $ouds-font-line-height-250;
$ouds-font-line-height-body-small-tablet: $ouds-font-line-height-250;
$ouds-font-line-height-code-medium: $ouds-font-line-height-350;
$ouds-font-line-height-display-large-desktop: $ouds-font-line-height-2050;
$ouds-font-line-height-display-large-mobile: $ouds-font-line-height-1050;
$ouds-font-line-height-display-large-tablet: $ouds-font-line-height-1850;
$ouds-font-line-height-display-medium-desktop: $ouds-font-line-height-1450;
$ouds-font-line-height-display-medium-mobile: $ouds-font-line-height-950;
$ouds-font-line-height-display-medium-tablet: $ouds-font-line-height-1250;
$ouds-font-line-height-display-small-desktop: $ouds-font-line-height-1250;
$ouds-font-line-height-display-small-mobile: $ouds-font-line-height-850;
$ouds-font-line-height-display-small-tablet: $ouds-font-line-height-1050;
$ouds-font-line-height-heading-large-desktop: $ouds-font-line-height-850;
$ouds-font-line-height-heading-large-mobile: $ouds-font-line-height-650;
$ouds-font-line-height-heading-large-tablet: $ouds-font-line-height-750;
$ouds-font-line-height-heading-medium-desktop: $ouds-font-line-height-750;
$ouds-font-line-height-heading-medium-mobile: $ouds-font-line-height-550;
$ouds-font-line-height-heading-medium-tablet: $ouds-font-line-height-650;
$ouds-font-line-height-heading-small-desktop: $ouds-font-line-height-650;
$ouds-font-line-height-heading-small-mobile: $ouds-font-line-height-450;
$ouds-font-line-height-heading-small-tablet: $ouds-font-line-height-550;
$ouds-font-line-height-heading-xlarge-desktop: $ouds-font-line-height-1050;
$ouds-font-line-height-heading-xlarge-mobile: $ouds-font-line-height-750;
$ouds-font-line-height-heading-xlarge-tablet: $ouds-font-line-height-950;
$ouds-font-line-height-label-large: $ouds-font-line-height-450;
$ouds-font-line-height-label-medium: $ouds-font-line-height-350;
$ouds-font-line-height-label-small: $ouds-font-line-height-250;
$ouds-font-line-height-label-xlarge: $ouds-font-line-height-450;
$ouds-font-size-body-large-desktop: $ouds-font-size-300;
$ouds-font-size-body-large-mobile: $ouds-font-size-250;
$ouds-font-size-body-large-tablet: $ouds-font-size-250;
$ouds-font-size-body-medium-desktop: $ouds-font-size-250;
$ouds-font-size-body-medium-mobile: $ouds-font-size-200;
$ouds-font-size-body-medium-tablet: $ouds-font-size-200;
$ouds-font-size-body-small-desktop: $ouds-font-size-200;
$ouds-font-size-body-small-mobile: $ouds-font-size-150;
$ouds-font-size-body-small-tablet: $ouds-font-size-150;
$ouds-font-size-code-medium: $ouds-font-size-200;
$ouds-font-size-display-large-desktop: $ouds-font-size-1850;
$ouds-font-size-display-large-mobile: $ouds-font-size-850;
$ouds-font-size-display-large-tablet: $ouds-font-size-1450;
$ouds-font-size-display-medium-desktop: $ouds-font-size-1250;
$ouds-font-size-display-medium-mobile: $ouds-font-size-750;
$ouds-font-size-display-medium-tablet: $ouds-font-size-1050;
$ouds-font-size-display-small-desktop: $ouds-font-size-1050;
$ouds-font-size-display-small-mobile: $ouds-font-size-650;
$ouds-font-size-display-small-tablet: $ouds-font-size-850;
$ouds-font-size-heading-large-desktop: $ouds-font-size-650;
$ouds-font-size-heading-large-mobile: $ouds-font-size-450;
$ouds-font-size-heading-large-tablet: $ouds-font-size-550;
$ouds-font-size-heading-medium-desktop: $ouds-font-size-550;
$ouds-font-size-heading-medium-mobile: $ouds-font-size-350;
$ouds-font-size-heading-medium-tablet: $ouds-font-size-450;
$ouds-font-size-heading-small-desktop: $ouds-font-size-450;
$ouds-font-size-heading-small-mobile: $ouds-font-size-300;
$ouds-font-size-heading-small-tablet: $ouds-font-size-350;
$ouds-font-size-heading-xlarge-desktop: $ouds-font-size-850;
$ouds-font-size-heading-xlarge-mobile: $ouds-font-size-550;
$ouds-font-size-heading-xlarge-tablet: $ouds-font-size-750;
$ouds-font-size-label-large: $ouds-font-size-250;
$ouds-font-size-label-medium: $ouds-font-size-200;
$ouds-font-size-label-small: $ouds-font-size-150;
$ouds-font-size-label-xlarge: $ouds-font-size-300;
$ouds-font-weight-code: $ouds-font-weight-400;
$ouds-font-weight-default: $ouds-font-weight-400;
$ouds-font-weight-strong: $ouds-font-weight-700;
$ouds-font-weight-body-default: $ouds-font-weight-default;
$ouds-font-weight-body-strong: $ouds-font-weight-strong;
$ouds-font-weight-display: $ouds-font-weight-strong;
$ouds-font-weight-heading: $ouds-font-weight-strong;
$ouds-font-weight-label-default: $ouds-font-weight-default;
$ouds-font-weight-label-strong: $ouds-font-weight-strong;

Semantic tokens

Font semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss 
$ouds-font-family: $ouds-font-family-brand-default;
$ouds-font-letter-spacing-body-large-desktop: $ouds-font-letter-spacing-300;
$ouds-font-letter-spacing-body-large-mobile: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-body-large-tablet: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-body-medium-desktop: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-body-medium-mobile: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-body-medium-tablet: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-body-small-desktop: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-body-small-mobile: $ouds-font-letter-spacing-150;
$ouds-font-letter-spacing-body-small-tablet: $ouds-font-letter-spacing-150;
$ouds-font-letter-spacing-code-medium: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-display-large-desktop: $ouds-font-letter-spacing-1850;
$ouds-font-letter-spacing-display-large-mobile: $ouds-font-letter-spacing-850;
$ouds-font-letter-spacing-display-large-tablet: $ouds-font-letter-spacing-1450;
$ouds-font-letter-spacing-display-medium-desktop: $ouds-font-letter-spacing-1250;
$ouds-font-letter-spacing-display-medium-mobile: $ouds-font-letter-spacing-750;
$ouds-font-letter-spacing-display-medium-tablet: $ouds-font-letter-spacing-1050;
$ouds-font-letter-spacing-display-small-desktop: $ouds-font-letter-spacing-1050;
$ouds-font-letter-spacing-display-small-mobile: $ouds-font-letter-spacing-650;
$ouds-font-letter-spacing-display-small-tablet: $ouds-font-letter-spacing-850;
$ouds-font-letter-spacing-heading-large-desktop: $ouds-font-letter-spacing-650;
$ouds-font-letter-spacing-heading-large-mobile: $ouds-font-letter-spacing-450;
$ouds-font-letter-spacing-heading-large-tablet: $ouds-font-letter-spacing-550;
$ouds-font-letter-spacing-heading-medium-desktop: $ouds-font-letter-spacing-550;
$ouds-font-letter-spacing-heading-medium-mobile: $ouds-font-letter-spacing-350;
$ouds-font-letter-spacing-heading-medium-tablet: $ouds-font-letter-spacing-450;
$ouds-font-letter-spacing-heading-small-desktop: $ouds-font-letter-spacing-450;
$ouds-font-letter-spacing-heading-small-mobile: $ouds-font-letter-spacing-300;
$ouds-font-letter-spacing-heading-small-tablet: $ouds-font-letter-spacing-350;
$ouds-font-letter-spacing-heading-xlarge-desktop: $ouds-font-letter-spacing-850;
$ouds-font-letter-spacing-heading-xlarge-mobile: $ouds-font-letter-spacing-550;
$ouds-font-letter-spacing-heading-xlarge-tablet: $ouds-font-letter-spacing-750;
$ouds-font-letter-spacing-label-large: $ouds-font-letter-spacing-250;
$ouds-font-letter-spacing-label-medium: $ouds-font-letter-spacing-200;
$ouds-font-letter-spacing-label-small: $ouds-font-letter-spacing-150;
$ouds-font-letter-spacing-label-xlarge: $ouds-font-letter-spacing-300;
$ouds-font-line-height-body-large-desktop: $ouds-font-line-height-450;
$ouds-font-line-height-body-large-mobile: $ouds-font-line-height-450;
$ouds-font-line-height-body-large-tablet: $ouds-font-line-height-450;
$ouds-font-line-height-body-medium-desktop: $ouds-font-line-height-450;
$ouds-font-line-height-body-medium-mobile: $ouds-font-line-height-350;
$ouds-font-line-height-body-medium-tablet: $ouds-font-line-height-350;
$ouds-font-line-height-body-small-desktop: $ouds-font-line-height-350;
$ouds-font-line-height-body-small-mobile: $ouds-font-line-height-250;
$ouds-font-line-height-body-small-tablet: $ouds-font-line-height-250;
$ouds-font-line-height-code-medium: $ouds-font-line-height-350;
$ouds-font-line-height-display-large-desktop: $ouds-font-line-height-2050;
$ouds-font-line-height-display-large-mobile: $ouds-font-line-height-1050;
$ouds-font-line-height-display-large-tablet: $ouds-font-line-height-1850;
$ouds-font-line-height-display-medium-desktop: $ouds-font-line-height-1450;
$ouds-font-line-height-display-medium-mobile: $ouds-font-line-height-950;
$ouds-font-line-height-display-medium-tablet: $ouds-font-line-height-1250;
$ouds-font-line-height-display-small-desktop: $ouds-font-line-height-1250;
$ouds-font-line-height-display-small-mobile: $ouds-font-line-height-850;
$ouds-font-line-height-display-small-tablet: $ouds-font-line-height-1050;
$ouds-font-line-height-heading-large-desktop: $ouds-font-line-height-850;
$ouds-font-line-height-heading-large-mobile: $ouds-font-line-height-650;
$ouds-font-line-height-heading-large-tablet: $ouds-font-line-height-750;
$ouds-font-line-height-heading-medium-desktop: $ouds-font-line-height-750;
$ouds-font-line-height-heading-medium-mobile: $ouds-font-line-height-550;
$ouds-font-line-height-heading-medium-tablet: $ouds-font-line-height-650;
$ouds-font-line-height-heading-small-desktop: $ouds-font-line-height-650;
$ouds-font-line-height-heading-small-mobile: $ouds-font-line-height-450;
$ouds-font-line-height-heading-small-tablet: $ouds-font-line-height-550;
$ouds-font-line-height-heading-xlarge-desktop: $ouds-font-line-height-1050;
$ouds-font-line-height-heading-xlarge-mobile: $ouds-font-line-height-750;
$ouds-font-line-height-heading-xlarge-tablet: $ouds-font-line-height-950;
$ouds-font-line-height-label-large: $ouds-font-line-height-450;
$ouds-font-line-height-label-medium: $ouds-font-line-height-350;
$ouds-font-line-height-label-small: $ouds-font-line-height-250;
$ouds-font-line-height-label-xlarge: $ouds-font-line-height-450;
$ouds-font-size-body-large-desktop: $ouds-font-size-300;
$ouds-font-size-body-large-mobile: $ouds-font-size-250;
$ouds-font-size-body-large-tablet: $ouds-font-size-250;
$ouds-font-size-body-medium-desktop: $ouds-font-size-250;
$ouds-font-size-body-medium-mobile: $ouds-font-size-200;
$ouds-font-size-body-medium-tablet: $ouds-font-size-200;
$ouds-font-size-body-small-desktop: $ouds-font-size-200;
$ouds-font-size-body-small-mobile: $ouds-font-size-150;
$ouds-font-size-body-small-tablet: $ouds-font-size-150;
$ouds-font-size-code-medium: $ouds-font-size-200;
$ouds-font-size-display-large-desktop: $ouds-font-size-1850;
$ouds-font-size-display-large-mobile: $ouds-font-size-850;
$ouds-font-size-display-large-tablet: $ouds-font-size-1450;
$ouds-font-size-display-medium-desktop: $ouds-font-size-1250;
$ouds-font-size-display-medium-mobile: $ouds-font-size-750;
$ouds-font-size-display-medium-tablet: $ouds-font-size-1050;
$ouds-font-size-display-small-desktop: $ouds-font-size-1050;
$ouds-font-size-display-small-mobile: $ouds-font-size-650;
$ouds-font-size-display-small-tablet: $ouds-font-size-850;
$ouds-font-size-heading-large-desktop: $ouds-font-size-650;
$ouds-font-size-heading-large-mobile: $ouds-font-size-450;
$ouds-font-size-heading-large-tablet: $ouds-font-size-550;
$ouds-font-size-heading-medium-desktop: $ouds-font-size-550;
$ouds-font-size-heading-medium-mobile: $ouds-font-size-350;
$ouds-font-size-heading-medium-tablet: $ouds-font-size-450;
$ouds-font-size-heading-small-desktop: $ouds-font-size-450;
$ouds-font-size-heading-small-mobile: $ouds-font-size-300;
$ouds-font-size-heading-small-tablet: $ouds-font-size-350;
$ouds-font-size-heading-xlarge-desktop: $ouds-font-size-850;
$ouds-font-size-heading-xlarge-mobile: $ouds-font-size-550;
$ouds-font-size-heading-xlarge-tablet: $ouds-font-size-750;
$ouds-font-size-label-large: $ouds-font-size-250;
$ouds-font-size-label-medium: $ouds-font-size-200;
$ouds-font-size-label-small: $ouds-font-size-150;
$ouds-font-size-label-xlarge: $ouds-font-size-300;
$ouds-font-weight-code: $ouds-font-weight-400;
$ouds-font-weight-default: $ouds-font-weight-400;
$ouds-font-weight-strong: $ouds-font-weight-700;
$ouds-font-weight-body-default: $ouds-font-weight-default;
$ouds-font-weight-body-strong: $ouds-font-weight-strong;
$ouds-font-weight-display: $ouds-font-weight-strong;
$ouds-font-weight-heading: $ouds-font-weight-strong;
$ouds-font-weight-label-default: $ouds-font-weight-default;
$ouds-font-weight-label-strong: $ouds-font-weight-strong;

Sass maps

The typography utilities are declared through this map and generated using our utilities API. Please refer to our text utility page for more information.

scss/_maps.scss 
$ouds-font-sizes: (
  cm: "/code-medium",
  bs: "/body-small",
  bm: "/body-medium",
  bl: "/body-large",
  hs: "/heading-small",
  hm: "/heading-medium",
  hl: "/heading-large",
  hxl: "/heading-xlarge",
  ds: "/display-small",
  dm: "/display-medium",
  dl: "/display-large",
);

$ouds-font-weights: (
  normal: $ouds-font-weight-default,
  bold: $ouds-font-weight-strong
);

$ouds-icon-sizes: ("sm", "md", "lg");

Sass mixins

We provide a dedicated mixin for font reference. For instance, the mixin is get-font-size($font-size-ref).

scss/mixins/_fonts.scss 
// $font-size-ref can be one of: "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large"

@mixin get-font-size($font-size-ref: "display-large") {
  @if str-slice($font-size-ref, 1, 5) != "label" and str-slice($font-size-ref, 1, 4) != "code" {
    max-width: var(--#{$prefix}font-max-width-#{$font-size-ref});
  }
  font-size: var(--#{$prefix}font-size-#{$font-size-ref});
  line-height: var(--#{$prefix}font-line-height-#{$font-size-ref});

  /* rtl:remove */
  letter-spacing: var(--#{$prefix}font-letter-spacing-#{$font-size-ref});
}

Whenever you need a font reference inside a custom component or for whatever reason, please follow the same process as us, so you don’t miss any information about a font reference.

scss/_reboot.scss 
%heading {
  margin-top: 0; // 1
  margin-bottom: $headings-margin-bottom;
  font-family: $headings-font-family;
  font-style: $headings-font-style;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: var(--#{$prefix}heading-color);

  /* rtl:remove */
  -webkit-font-smoothing: antialiased;  // OUDS mod
  -moz-osx-font-smoothing: grayscale;   // OUDS mod
  text-rendering: optimizelegibility;   // OUDS mod
}

h1 {
  @extend %heading;
  @include get-font-size("heading-xlarge"); // OUDS mod: instead of `@include font-size($h1-font-size)`
}

h2 {
  @extend %heading;
  @include get-font-size("heading-large"); // OUDS mod: instead of `@include font-size($h2-font-size)`
}

h3 {
  @extend %heading;
  @include get-font-size("heading-medium"); // OUDS mod: instead of `@include font-size($h3-font-size)`
}

h4 {
  @extend %heading;
  @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size($h4-font-size)`
}

h5 {
  @extend %heading;
  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($h5-font-size)`
}

h6 {
  @extend %heading;
  @include get-font-size("body-medium"); // OUDS mod: instead of `@include font-size($h6-font-size)`
}