Typography

Scale

In-content pages and the browser chrome follow different type scales due to the chrome relying on operating systems’ font sizing, while in-content pages follow the type scale set by the design system.

We set font: message-box at the root of common-shared.css and global.css stylesheets so that both in-content and the chrome can have access to operating system font families.

We also don’t specify line height units and rely on the default.

In-content

Name HTML class/tag or CSS token Preview Font size Font weight
Heading XLarge h1,
.heading-xlarge		 ```html story

The quick brown fox jumps over the lazy dog

``` 		1.6rem (24px) 600
Heading Large h2,
.heading-large		 ```html story

The quick brown fox jumps over the lazy dog

``` 		1.467rem (22px) 600
Heading Medium h3,
.heading-medium		 ```html story

The quick brown fox jumps over the lazy dog

``` 		1.133rem (17px) 600
Root (body) --font-size-root set at the :root of common-shared.css ```html story

The quick brown fox jumps over the lazy dog

``` 		15px (1rem) normal
Body Small --font-size-small ```html story

The quick brown fox jumps over the lazy dog

``` 		0.867rem (13px) normal

Chrome

The chrome solely relies on font declarations (it also relies on font: menu for panels) so that it can inherit the operating system font family and sizing in order for it to feel like it is part of the user’s operating system. Keep in mind that font sizes and families vary between macOS, Windows, and Linux. Moreover, you will only see a difference between font: message-box and font: menu font sizes on macOS.

Note that there currently isn’t a hierarchy of multiple headings on the chrome since every panel and modal that opens from it relies only on an h1 for its title; so today, we just bold the existing fonts in order to create headings.

Name Class Preview Font keyword Font weight
Menu Heading h1 ```html story

The quick brown fox jumps over the lazy dog

``` 		menu 600
Menu Applied directly to panel classes in panel.css and panelUI-shared.css ```html story

The quick brown fox jumps over the lazy dog

``` 		menu normal
Heading h1 ```html story

The quick brown fox jumps over the lazy dog

``` 		message-box 600
Root (body) message-box set at the :root of global.css ```html story

The quick brown fox jumps over the lazy dog

``` 		message-box normal

Design tokens

Type setting relies on design tokens for font size and font weight.

Font size

Base token In-content value Chrome value
--font-size-xxlarge 1.6rem unset
--font-size-xlarge 1.467rem unset
--font-size-large 1.133rem unset
--font-size-root 15px unset
--font-size-small 0.867rem unset
--font-size-xsmall 0.733rem unset

Font weight

Base token In-content value Chrome value
--font-weight normal normal
--font-weight-semibold 600 600
--font-weight-bold 700 700

Helpers

text-and-typography.css

The text and typography stylesheet found in toolkit/themes/shared/design-system/src/text-and-typography.css contains type setting declarations, and text and typography helper classes:

  • It applies the design system’s type scale by default, therefore it styles the root and headings automatically.

  • It comes with helper classes for contexts where designers may visually prefer an h1 to start at the “medium” heading size instead of “large”. It also contains text related helpers for truncating and deemphasizing text.

You should rely on typography helper classes and the defaults set by the design system.

This file is imported into common-shared.css and global-shared.css so that both in-content pages and the chrome receive their respective typography scale treatments, and have access to helper classes.

Heading

XLarge (h1)
In-content
  <h1>Firefox View</h1>
Chrome
  <h1 class="sb-preview-chrome-typescale">Close window and quit Firefox?</h1>
Chrome menus
  <h1 class="sb-preview-chrome-typescale sb-preview-chrome-menu">Edit bookmark</h1>

h1,
.heading-xlarge {
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-heading-xlarge);
}

Reminder: There’s no hierarchy of headings on the chrome. So here’s just in-content’s preview:

Large (h2)
  <h2 class="toc-ignore">Recent browsing</h2>

h2,
.heading-large {
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-heading-large);
}
Medium (h3)
  <h3>Tabs from other devices</h3>

h3,
.heading-medium {
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-heading-medium);
}

Text

De-emphasized
  <span class="text-deemphasized">Get your passwords on your other devices.</span>

.text-deemphasized {
  font-size: var(--font-size-small);
  color: var(--text-color-deemphasized);
}
Truncated ellipsis
  <div class="text-truncated-ellipsis">A really long piece of text a really long piece of text a really long piece of text a really long piece of text a really long piece of text a really long piece of text.</div>

.text-truncated-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncated-ellipsis can be applied to display: block or display: inline-block elements.

For display: flex or display: grid elements, you’ll need to wrap its contents with an element with the .text-truncated-ellipsis class instead.

Example:

<div class="my-flex-element">
  <span class="text-truncated-ellipsis">A really long string of text that needs truncation.</span>
</div>