Typography
Type hierarchy and scales
Type face
The Manifest Design System type hierarchy and scale is designed leveraging the Inter type face.
Type scale
The system provides the following type scales to create our type hierarchy.
DisplayHeadingTitleSubtitleBodyBody BodySubtextSubtext BoldCaptionCaption Bold
| Name | Size | Weight | Line Height | Letter Spacing |
|---|---|---|---|---|
| Display | 32px | 700 | 42px | -0.03em |
| Heading | 24px | 700 | 32px | -0.02em |
| Title | 20px | 700 | 30px | -0.01em |
| Subtitle | 16px | 700 | 24px | -0.01em |
| Body | 16px | 400 | 24px | -0.01em |
| Subtext | 14px | 400 | 20px | -0.01em |
| Caption | 12px | 400 | 18px | -0.01em |
CDN
Please be sure to include the font family link in the <head> of your application's HTML.
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
rel="stylesheet"
/>