Foundations
Font scales
scss:Readyfigma:Ready
General fonts sizes and their usage :
Viewport: px
<div class="example"> <div class="example__item example__item--12">Lorem ipsum</div> <div class="example__item example__item--11">Lorem ipsum</div> <div class="example__item example__item--10">Lorem ipsum</div> <div class="example__item example__item--09">Lorem ipsum</div> <div class="example__item example__item--08">Lorem ipsum</div> <div class="example__item example__item--07">Lorem ipsum</div> <div class="example__item example__item--06">Lorem ipsum</div> <div class="example__item example__item--05">Lorem ipsum</div> <div class="example__item example__item--04">Lorem ipsum</div> <div class="example__item example__item--03">Lorem ipsum</div> <div class="example__item example__item--02">Lorem ipsum</div> <div class="example__item example__item--01">Lorem ipsum</div></div>
Id | Value | Mobile usage | Desktop usage | Token |
---|---|---|---|---|
01 | 11px (0.6815mu) | Legal contents / captions | Legal contents / captions | size.font.01 |
02 | 12px (0.75mu) | Legal contents / captions | Legal contents / captions | size.font.02 |
03 | 13px (0.8125mu) | -- | -- | size.font.03 |
04 | 14px (0.875mu) | Body small | Body small | size.font.04 |
05 | 16px (1mu) | Body medium | Body medium | size.font.05 |
06 | 18px (1.125mu) | Body large | Body large | size.font.06 |
07 | 23px (1.4375mu) | Heading small | -- | size.font.07 |
08 | 28px (1.75mu) | Heading medium | Heading small | size.font.08 |
09 | 34px (2.125mu) | Heading large / Hero | Heading medium | size.font.09 |
10 | 41px (2.4625mu) | -- | Heading large / Hero | size.font.10 |
11 | 49px (3.0625mu) | -- | Hero | size.font.11 |
12 | 59px (3.6875mu) | -- | Hero | size.font.12 |
Line heights :
Line-heights are calculated for each available font-size to match a magic-unit subdivision, in order to snap to the vertical grid. Line-heights for font-sizes under 18px uses 1/8 mu subdivision and lines-height for font-sizes greater than 18px use 1/4 mu* subdivisions.
###The lines heights are declined in 4 values for each font sizes :
- XS : closest MU* division to 1x font-size
- S : closest MU* division to 1.15x font-size
- M : closest MU* division to 1.35x font-size
- L : closest MU* division to 1.5x font-size
You can use any of the previous line-height depending on your needs, but consider the following advices :
Use the line-height L for multiline text or long line length texts
WCAG Accessibility guidelines states that 1.5 time the font size is the best ratio for readability.
WCAG Accessibility guidelines states that 1.5 time the font size is the best ratio for readability.
Use line-height S and M for larger fonts sizes or very short line length
Like technical informations with few lines or titles.
Like technical informations with few lines or titles.
Use line-height XS for monoline text in conjonction to margin and padding
Mostly for layout construction purpose (alignement, spacing, container sizing purpose etc..) like a block header.
Mostly for layout construction purpose (alignement, spacing, container sizing purpose etc..) like a block header.
Viewport: px
<div class="example"> <div class="example__container"> <div class="example__title-lh example__title-lh--xs"> line-height xs </div> <div class="example__paragraph-lh example__paragraph-lh--xs"> <span class="example__paragraph-lh-name"> line-height xs </span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, nobis ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo ducimus dolor qui laborum voluptate. </div> </div> <div class="example__container"> <div class="example__title-lh example__title-lh--s"> line-height s </div> <div class="example__paragraph-lh example__paragraph-lh--s"> <span class="example__paragraph-lh-name"> line-height s </span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, nobis ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo ducimus dolor qui laborum voluptate. </div> </div> <div class="example__container"> <div class="example__title-lh example__title-lh--m"> line-height m </div> <div class="example__paragraph-lh example__paragraph-lh--m"> <span class="example__paragraph-lh-name"> line-height m </span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, nobis ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo ducimus dolor qui laborum voluptate. </div> </div> <div class="example__container"> <div class="example__title-lh example__title-lh--l"> line-height l </div> <div class="example__paragraph-lh example__paragraph-lh--l"> <span class="example__paragraph-lh-name"> line-height l </span > Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, nobis ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo ducimus dolor qui laborum voluptate. </div> </div></div>
id | font-size value | line-height XS | line-height S | line-height M | line-height L | tokens |
---|---|---|---|---|---|---|
01 | 11px (0.6815mu) | 12px (0.75mu) | 12px (0.75mu) | 14px (0.875mu) | 16px (1mu) | size.line.01.(xs,s,m,l) |
02 | 12px (0.75mu ) | 12px (0.75mu) | 14px (0.875mu) | 16px (1mu) | 18px (1.125mu) | size.line.02.(xs,s,m,l) |
03 | 13px (0.8125mu) | 14px (0.875mu) | 16px (1mu) | 18px (1.125mu) | 20px (1.25mu) | size.line.03.(xs,s,m,l) |
04 | 14px (0.875mu ) | 14px (0.875mu) | 16px (1mu) | 18px (1.125mu) | 22px (1.375mu) | size.line.04.(xs,s,m,l) |
05 | 16px (1mu ) | 16px (1mu) | 18px (1.125mu) | 22px (1.375mu) | 24px (1.5mu) | size.line.05.(xs,s,m,l) |
06 | 18px (1.125mu ) | 18px (1.125mu) | 20px (1.25mu) | 24px (1.5mu) | 28px (1.75mu) | size.line.06.(xs,s,m,l) |
07 | 23px (1.4375mu) | 24px (1.5mu) | 28px (1.75mu) | 32px (2mu) | 36px (2.25mu) | size.line.07.(xs,s,m,l) |
08 | 28px (1.75mu ) | 28px (1.75mu) | 32px (2mu) | 36px (2.25mu) | 44px (2.75mu) | size.line.08.(xs,s,m,l) |
09 | 34px (2.125mu ) | 36px (2.25mu) | 40px (2.5mu) | 44px (2.75mu) | 52px (3.25mu) | size.line.09.(xs,s,m,l) |
10 | 41px (2.5625mu) | 40px (2.5mu) | 48px (3mu) | 56px (3.5mu) | 60px (3.75mu) | size.line.10.(xs,s,m,l) |
11 | 49px (3.0625mu) | 48px (3mu) | 56px (3.5mu) | 68px (4.25mu) | 72px (4.5mu) | size.line.11.(xs,s,m,l) |
12 | 59px (3.6875mu) | 60px (3.75mu) | 68px (4.25mu) | 80px (5mu) | (5.5mu) 88px | size.line.12.(xs,s,m,l) |
*mu : magic unit