Font System
A type system is a comprehensive set of guidelines and specifications governing the usage of typography.
- Overview
- Specs
- Guidelines
Overview
A font system is a comprehensive set of guidelines and specifications governing the usage of typography within a design framework. It encompasses various elements, such as font families, weights, sizes, line heights, and spacing, providing consistency and coherence across different components and layouts within a digital or printed project.
A well-defined font system ensures visual harmony, readability, and hierarchy, enhancing the overall user experience and brand identity. It serves as a foundational element in design, guiding decisions on typography selection, formatting, and application to achieve optimal legibility, accessibility, and aesthetic appeal.
Last Update
- Added Polygon Framework variables;
Text-Styles
Heading
| Name | Font Family | Size | Rem | Font Weight | Line Height |
|---|---|---|---|---|---|
| H1 | Poppins | 48px | 3rem | Regular | 64px |
| H2 | Poppins | 38px | 2.375rem | Regular | 54px |
| H3 | Poppins | 32px | 2rem | Regular | 44px |
| H4 | Poppins | 24px | 1.5rem | Regular | 34px |
| H5 | Poppins | 20px | 1.25rem | Regular | 28px |
| H6 | Poppins | 20px | 1.25rem | SemiBold | 28px |
Subtitles
| Name | Font Family | Size | Rem | Font Weight | Line Height |
|---|---|---|---|---|---|
| Subtitle 1 | Roboto | 16px | 1rem | Regular | 21px |
| Subtitle 2 | Roboto | 14px | 0.875rem | Medium | 22px |
Body
| Name | Font Family | Size | Rem | Font Weight | Line Height |
|---|---|---|---|---|---|
| Body 1 | Roboto | 16px | 1rem | Regular | 28px |
| Body 2 | Roboto | 14px | 0.875rem | Regular | 20px |
Labels
| Name | Font Family | Size | Rem | Font Weight | Line Height |
|---|---|---|---|---|---|
| Label Large | Roboto | 16px | 1rem | Regular | 24px |
| Label Regular | Roboto | 14px | 0.875rem | Regular | 20px |
| Label Small | Roboto | 12px | 0.75rem | Regular | 20px |
Buttons
| Name | Font Family | Size | Rem | Font Weight | Line Height |
|---|---|---|---|---|---|
| Large | Poppins | 16px | 1rem | Semi-bold | 24px |
| Regular | Poppins | 14px | 0.875rem | Semi-bold | 20px |
| Small | Poppins | 12px | 0.75rem | Semi-bold | 20px |
Links
| Name | Font Family | Size | Rem | Font Weight | Line Height |
|---|---|---|---|---|---|
| Large | Roboto | 16px | 1rem | Regular-underline | 21px |
| Regular | Roboto | 14px | 0.875rem | Regular-underline | 20px |
| Small | Roboto | 12px | 0.75rem | Regular-underline | 18px |
Others
| Name | Font Family | Size | Rem | Font Weight | Line Height |
|---|---|---|---|---|---|
| Caption | Roboto | 12px | 0.75rem | Regular | 16px |
| Overline | Poppins | 11px | 0.688rem | Semi-bold | 16px |
Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Rem Usage
The use of the REM unit of measurement is mandatory. This allows us greater elasticity between devices and a system with scale between components and elements. Its root size is 16px.
REM units are more accessible because they respect the user’s preferred font size settings in their browser or device. Users with visual impairments or specific accessibility needs may adjust their browser settings to increase font sizes for better readability. REM-based layouts automatically adapt to these changes, ensuring consistent readability and usability across different users and devices.
Weight
Different weights are applied to increase or decrease the relevance of the information. A font of the same size but with a higher weight will have more prominence than one with a lower weight.
The value should be given through a number (700 e.g.) and not through a name (bold e.g.). By using font-weight with the correct syntax, we can have greater adaptability between typefaces, and the weights change between fonts.
Polygon FW
The following variables are from Polygon Framework. They are optimised to work from pixels to rem values and ordered from the larger to smaller sizes.
| Polygon Variable | Font Size (px) |
|---|---|
| $type-1 | 30 |
| $type-2 | 24 |
| $type-3 | 20 |
| $type-4 | 18 |
| $type-5 | 16 |
| $type-6 | 14 |
| $type-7 | 12 |
| $type-8 | 10 |
| $font-small | 0.8rem |
| $font-large | 1.2rem |
Discover all Polygon SCSS styles here.
Case Studies
Release v1.3
Release v1.2
