Use these tokens to create harmonious typography.
Raute’s web font is Montserrat. Use web font from Google fonts: https://fonts.google.com/specimen/Montserrat
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 |
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 |
Preview | Description | Use |
---|---|---|
400 |
Add description | theme(fontWeight.normal) .font-normal |
600 |
theme(fontWeight.semibold) .font-semibold |
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