# Typography ## Scale [In-content pages and the browser chrome](https://acorn.firefox.com/latest/resources/browser-anatomy/desktop-ZaxCgqkt) 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, |
```html story
The quick brown fox jumps over the lazy dog``` |
1.6rem (24px )
|
600
|
Heading Large | h2, |
```html story
The quick brown fox jumps over the lazy dog``` |
1.467rem (22px )
|
600
|
Heading Medium | h3, |
```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
|
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
|
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
|
Base token | In-content value | Chrome value |
---|---|---|
--font-weight-default
|
normal
|
normal
|
--font-weight-bold
|
600
|
600
|