Typography
Font family
The default font stack is designed to be simple and highly available on as many devices as possible.
The Metso branded font family is GT-Eesti.
--mo-font-sans uses the light version of our font, and should be the default font.
--font-mono is used on this documentation site for code blocks, etc.
| Token | Value | Example |
|---|---|---|
--mo-font-sans |
‘GT-Eesti’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’; | The quick brown fox jumped over the lazy dog. |
--font-mono |
‘Reddit Mono’, SFMono-Regular, Consolas, ‘Liberation Mono’, Menlo, monospace; | The quick brown fox jumped over the lazy dog. |
Font size
Font sizes use rem units so they scale with the base font size. The pixel values displayed are
based on a 16px font size.
| Token | Value | Example |
|---|---|---|
--mo-font-size-x-small |
0.75rem (12px) | Aa |
--mo-font-size-small |
0.875rem (14px) | Aa |
--mo-font-size-medium |
1rem (16px) | Aa |
--mo-font-size-large |
1.125rem (18px) | Aa |
--mo-font-size-x-large |
1.25rem (20px) | Aa |
--mo-font-size-2x-large |
1.5rem (24px) | Aa |
--mo-font-size-3x-large |
2.25rem (36px) | Aa |
--mo-font-size-4x-large |
3rem (48px) | Aa |
--mo-font-size-5x-large |
4.5rem (72px) | Aa |
Font weight
Metso’s usage of GT-Eesti only includes two font weights. The GT-Eesti variant for body text,
which is font-weight: normal/400. And the GT-Eesti-Regular variant for headers, which can be
enabled by setting the font-weight to bold/700.
| Token | Value | Example |
|---|---|---|
--mo-font-weight-normal |
400 | The quick brown fox jumped over the lazy dog. |
--mo-font-weight-bold |
700 | The quick brown fox jumped over the lazy dog. |
Letter spacing
| Token | Value | Example |
|---|---|---|
--mo-letter-spacing-denser |
-0.03em | The quick brown fox jumped over the lazy dog. |
--mo-letter-spacing-dense |
-0.015em | The quick brown fox jumped over the lazy dog. |
--mo-letter-spacing-normal |
0.3px | The quick brown fox jumped over the lazy dog. |
--mo-letter-spacing-loose |
0.075em | The quick brown fox jumped over the lazy dog. |
--mo-letter-spacing-looser |
0.15em | The quick brown fox jumped over the lazy dog. |
Line height
| Token | Value | Example |
|---|---|---|
--mo-line-height-denser |
1 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--mo-line-height-dense |
1.25 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--mo-line-height-normal |
1.5 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--mo-line-height-loose |
1.75 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--mo-line-height-looser |
2 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |