Typography

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

Global settingsLink to this section: Global settings

OUDS Web sets basic global display, typography, and link styles. 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.

HeadingsLink to this 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 size utilities.

Display headingsLink to this section: 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>

html

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

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

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-web-display;
$display-line-height: $headings-line-height;

Regular textsLink to this section: 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 size utilities.

LeadLink to this section: 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

SmallLink to this section: Small

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

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 elementsLink to this section: 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:

 represents text which is marked or highlighted for reference or notation purposes.
 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.
 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 .
.small will apply the same styles as .
.text-decoration-underline will apply the same styles as .
.text-decoration-line-through will apply the same styles as <s>.

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

Text utilitiesLink to this section: Text utilities

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

AbbreviationsLink to this section: 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

BlockquotesLink to this section: 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 sourceLink to this section: 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., ) 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.

<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

AlignmentLink to this section: Alignment

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

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

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

<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

ListsLink to this section: Lists

Please refer to the Bullet list component for .list-unstyled and .list-inline documentation.

Description list alignmentLink to this section: Description list alignment

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

Description lists

A description list is perfect for defining terms.

Term

Definition for the term.

And some more placeholder definition text.

Another term

This definition is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested definition list: I heard you like definition lists. Let me put a definition list inside your definition list.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

html

CSSLink to this section: CSS

VariablesLink to this section: 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 tokensLink to this section: Sass tokens

Semantic tokensLink to this section: Semantic tokens

Font semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss

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

Semantic tokensLink to this section: Semantic tokens

Font semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss

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

Sass mapsLink to this section: 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-system-web-default,
  bold: $ouds-font-weight-system-web-strong
);

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

Sass mixinsLink to this section: 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)`
}

Typography

On this page On this page

Global settingsLink to this section: Global settings

HeadingsLink to this section: Headings

h1. OUDS Web heading

h2. OUDS Web heading

h3. OUDS Web heading

h4. OUDS Web heading

h5. OUDS Web heading

h6. OUDS Web heading

Display headingsLink to this section: Display headings

Display large

Display medium

Display small

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Regular textsLink to this section: Regular texts

LeadLink to this section: Lead

SmallLink to this section: Small

Inline text elementsLink to this section: Inline text elements

Text utilitiesLink to this section: Text utilities

AbbreviationsLink to this section: Abbreviations

BlockquotesLink to this section: Blockquotes

Naming a sourceLink to this section: Naming a source

AlignmentLink to this section: Alignment

ListsLink to this section: Lists

Description list alignmentLink to this section: Description list alignment

CSSLink to this section: CSS

VariablesLink to this section: Variables

Sass tokensLink to this section: Sass tokens

Semantic tokensLink to this section: Semantic tokens

Semantic tokensLink to this section: Semantic tokens

Sass mapsLink to this section: Sass maps

Sass mixinsLink to this section: Sass mixins

On this page