Typography
Typography is a cornerstone of our design system, shaping the visual language and enhancing readability across various mediums. In this section, we explore the key characteristics and applications of the Montserrat typeface, reflecting our commitment to clarity, elegance, and modernity.
Typeface
Montserrat
Class Name: u-ff-sans-serif
According to Nielsen Norman Group, Montserrat is one of the typefaces that is "designed for legibility". Plus, it gives an uncluttered feeling to a webpage.
| Aa | abcdefghijklmnopqrstuvwxyz | Light |
| abcdefghijklmnopqrstuvwxyz | ||
| 1234567890 | ||
| Aa | abcdefghijklmnopqrstuvwxyz | Regular |
| abcdefghijklmnopqrstuvwxyz | ||
| 1234567890 | ||
| Aa | abcdefghijklmnopqrstuvwxyz | Bold |
| abcdefghijklmnopqrstuvwxyz | ||
| 1234567890 |
Type Scale
Below outlines the specific uses of each font weight and size. Their font size in px is included with equivalent conversion in rem values.
| Heading 1 | |||
| Class Name: u-h1 | |||
| Weight | Px Size | Letter Spacing | |
| Extra Bold | 64 | 0.64px | |
| u-fw-extrabold | u-fs-h1 | u-letter-spacing-3 | |
| Heading 2 | |||
| Class Name: u-h2 | |||
| Weight | Px Size | Letter Spacing | |
| Semibold | 56 | 0.64px | |
| u-fw-semibold | u-fs-h2 | u-letter-spacing-3 | |
| Heading 3 | |||
| Class Name: u-h3 | |||
| Weight | Px Size | Letter Spacing | |
| Medium | 48 | 0.64px | |
| u-fw-med | u-fs-h3 | u-letter-spacing-3 | |
| Heading 4 | |||
| Class Name: u-h4 | |||
| Weight | Px Size | Letter Spacing | |
| Medium | 34 | 0.64px | |
| u-fw-med | u-fs-h4 | u-letter-spacing-3 | |
| Heading 5 | |||
| Class Name: u-h5 | |||
| Weight | Px Size | Letter Spacing | |
| Medium | 24 | 0.64px | |
| u-fw-med | u-fs-h5 | u-letter-spacing-3 | |
| Heading 6 | |||
| Class Name: u-h6 | |||
| Weight | Px Size | Letter Spacing | |
| Medium | 20 | 0.64px | |
| u-fw-med | u-fs-h6 | u-letter-spacing-3 | |
| Subheading | |||
| Class Name: u-subheading | |||
| Weight | Px Size | Letter Spacing | |
| Medium | 24 | 0.64px | |
| u-fw-med | u-fs-subheading | u-letter-spacing-3 | |
| Body | |||
| Class Name: u-body | |||
| Weight | Px Size | Letter Spacing | |
| Regular | 16 | 0.48px | |
| u-fw-reg | u-fs-body | u-letter-spacing-2 | |
| Button | |||
| Class Name: u-button | |||
| Weight | Px Size | Letter Spacing | |
| Regular | 14 | 0.48px | |
| u-fw-reg | u-fs-button | u-letter-spacing-2 | |
| Caption | |||
| Class Name: u-caption | |||
| Weight | Px Size | Letter Spacing | |
| Regular | 12 | 0.48px | |
| u-fw-reg | u-fs-caption | u-letter-spacing-2 | |
Type Weights
Font weights plays an important role in typography as it helps organise content in terms of its hierarchy and, whenever necessary, can help draw more attention to a word or phrase.
| Font Weight | Utility Class Name | ||
| Black (900) | u-fw-black | ||
| Extra Bold (800) | u-fw-extrabold | ||
| Bold (700) | u-fw-bold | ||
| Semi Bold (600) | u-fw-semibold | ||
| Medium (500) | u-fw-med | ||
| Regular (400) | u-fw-reg | ||
| Light (300) | u-fw-light | ||
Italics
Italics will be used to differentiate content especially for plant scientific names and whenever it is needed.
| Font Weight | Utility Class Name | ||
| Regular Italic (400) | u-fw-italic-reg | ||
| Medium Italic (500) | u-fw-italic-med | ||
| Semi Bold Italic (600) | u-fw-italic-semibold | ||