Typography
Use these tokens to create harmonious typography.
Font-family
Raute’s web font is Montserrat. Use web font from Google fonts: https://fonts.google.com/specimen/Montserrat
Type scale
To create and design an easily readable interface, you don’t need more than 40 font-sizes. A simple ratio-based scale with 7-8 options should suffice. Note: scale is not intended only for headings. Scale large headline one step smaller on mobile devices. Future goal: develop fluid type scale
| Preview | Description | Use |
|---|---|---|
|
Extra small |
Add description | theme(fontSize.xs) .text-xs |
|
Small |
theme(fontSize.sm) .text-sm | |
|
Base |
theme(fontSize.base) .text-base | |
|
Large |
theme(fontSize.lg) .text-lg | |
|
Extra large |
theme(fontSize.xl) .text-xl | |
|
2XL |
theme(fontSize.2xl) .text-2xl | |
|
Headline |
theme(fontSize.headline) .text-headline | |
|
h1 |
theme(fontSize.h1) .text-h1 | |
|
h2 |
theme(fontSize.h2) .text-h2 | |
|
h3 |
theme(fontSize.h3) .text-h3 | |
|
h4 |
theme(fontSize.sh4m) .text-h4 | |
|
h5 |
theme(fontSize.h5) .text-h5 |
Line height
Originally a strip of soft metal used for vertical spacing between lines of type. Now meaning the vertical distance from the baseline of one line to the baseline of the next. Also called leading.
| Preview | Description | Use |
|---|---|---|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed |
Solid, 1.25Line-height for the largest font-size. |
theme(lineHeight.leading-5) .leading-5 |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed |
Heading, 1.5Line-height for headings |
theme(lineHeight.leading-6) .leading-6 |
Font weight
| Preview | Description | Use |
|---|---|---|
|
400 |
Add description | theme(fontWeight.normal) .font-normal |
|
600 |
theme(fontWeight.semibold) .font-semibold |
Guidelines
Official language: English US.
Raute has no specific font for asian countries. Default system fonts are used.
Following fonts are usually used in Windows based computers:
• Microsoft YaHei for Chinese (Simplified)
• Microsoft JhengHei for Chinese (Traditional)
• Meiryo for Japanese
• Malgun Gothic for Korean
• Gisha for Hebrew
• Leelawadee for Thai