Font
Font family
Arial is the standard typeface we use. We chose Arial because it is a system font that is suited for multilingual use.
Font style
| A | A |
| Regular This is the default font weight we use for text. |
Bold or 600 The bold font weight is used to put emphasis on important words and to add visual emphasis on headings. |
| A | A |
| Italic We use italic for quotes |
Underline We use underline to indicate text is clickable. This is not needed in buttons or in other components that are clearly clickable by nature. |
Font size
| Baseline font | |
|---|---|
| Desktop | 1.125rem |
| Mobile | 1.125rem |
| XXL | XL | L | M | S | XS | XXS |
|---|---|---|---|---|---|---|
| 2.5rem | 1.875rem | 1.375rem | 1.125rem | 1rem | 0.875rem | 0.75rem |
Font colour
Pay attention to the contrast if you give a background colour to text.
WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet WCAG standards, text and interactive elements should have a colour contrast ratio of at least WCAG 2 AA Compliant (18pt+). This ensures that viewers who cannot see the full colour spectrum are able to read the text. The options below offer colour palette combinations that fall within the range of Section 508 compliant foreground/background colour contrast ratios. To ensure that text remains accessible, use only these permitted colour combinations.
There are a number of online colour contrast checkers.
We recommend using only the following font colours:
| Black #000000 |
EC Grey #404040 |
EC Blue #004494 |
EC Purple #550745 |
White #ffffff |
|---|---|---|---|---|
| Headers H1, H2 Black + Underline Default over text links (not on inverted links) |
Headers H3, H4 Default font color |
Default text links (not on inverted links) |
Default visited text links (not on inverted links) |
On blue backgrounds Inverted links (all states) |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</p>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</strong></p>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</em></p>
<p><u>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</u></p>
/* No context defined for this component. */
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</p>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</strong></p>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</em></p>
<p><u>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate pretium.</u></p>
- Handle: @ecl/ec-style-typography-font
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-style/ec-style-typography/ec-style-typography-font/ec-style-typography-font.twig