foundations
Fonts ()
Type system available in regular, medium and bold.
| EXAMPLE | VERSION |
|---|---|
The quick brown fox jumps over the lazy dogNamePrimaryValue'Roboto Slab', 'Roboto Slab Fallback', serif | v2.0.0 |
The quick brown fox jumps over the lazy dogNameSecondaryValue'Roboto', 'Roboto Fallback', sans-serif | v2.0.0 |
The quick brown fox jumps over the lazy dogNameSystemValue-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif | v2.0.0 |
| SIZE | FONT-SIZE | LINE-HEIGHTS |
|---|---|---|
Heading1Responsive | 32px / 40px | 1.375/ 1.3 |
Heading2Responsive | 28px / 32px | 1.2857/ 1.25 |
Heading3Responsive | 24px / 28px | 1.3333/ 1.2857 |
Heading4Responsive | 22px / 22px | 1.2727/ 1.2727 |
Heading5Responsive | 18px / 18px | 1.3333/ 1.3333 |
Heading6Responsive | 16px / 16px | 1.25/ 1.25 |
ParagraphResponsive | 16px / 18px | 1.5/ 1.5556 |
Caption1 | 14px | 1.1429 |
Caption2 | 12px | 1.3333 |
Using fonts in an application
Loading fonts through the cdn is **deprecated**.Please import @mediahuis/chameleon-theme-*/lib/web/fonts.cssinstead of using this component.CDN (Deprecated)Active: https://shared.mediahuis.be/fonts/hub/v2.0.0/fonts.cssLatest: https://shared.mediahuis.be/fonts/hub/latest/fonts.cssTo prevent an update to a font breaking existing layouts, fonts are versioned. If a font were to change substantially a new version is to be released.Versioning is present in the url (e.g. `/fonts/v1.0.0/fonts.css`). The fonts on this page will always be the latest version.However, next to a versioned url, there's also a `/fonts/latest/fonts.css` version, that will always contain the latest version. Be aware that using this URL directly might break your layout, and thus should always be used with great caution.