Font scales

General fonts sizes and their usage :

IdValueMobile usageDesktop usageToken
0111px (0.6815mu)Legal contents / captionsLegal contents / captionssize.font.01
0212px (0.75mu)Legal contents / captionsLegal contents / captionssize.font.02
0313px (0.8125mu)----size.font.03
0414px (0.875mu)Body smallBody smallsize.font.04
0516px (1mu)Body mediumBody mediumsize.font.05
0618px (1.125mu)Body largeBody largesize.font.06
0723px (1.4375mu)Heading small--size.font.07
0828px (1.75mu)Heading mediumHeading smallsize.font.08
0934px (2.125mu)Heading large / HeroHeading mediumsize.font.09
1041px (2.4625mu)--Heading large / Herosize.font.10
1149px (3.0625mu)--Herosize.font.11
1259px (3.6875mu)--Herosize.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.

Use line-height S and M for larger fonts sizes or very short line length

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.

idfont-size valueline-height XSline-height Sline-height Mline-height Ltokens
0111px (0.6815mu)12px (0.75mu)12px (0.75mu)14px (0.875mu)16px (1mu)size.line.01.(xs,s,m,l)
0212px (0.75mu )12px (0.75mu)14px (0.875mu)16px (1mu)18px (1.125mu)size.line.02.(xs,s,m,l)
0313px (0.8125mu)14px (0.875mu)16px (1mu)18px (1.125mu)20px (1.25mu)size.line.03.(xs,s,m,l)
0414px (0.875mu )14px (0.875mu)16px (1mu)18px (1.125mu)22px (1.375mu)size.line.04.(xs,s,m,l)
0516px (1mu )16px (1mu)18px (1.125mu)22px (1.375mu)24px (1.5mu)size.line.05.(xs,s,m,l)
0618px (1.125mu )18px (1.125mu)20px (1.25mu)24px (1.5mu)28px (1.75mu)size.line.06.(xs,s,m,l)
0723px (1.4375mu)24px (1.5mu)28px (1.75mu)32px (2mu)36px (2.25mu)size.line.07.(xs,s,m,l)
0828px (1.75mu )28px (1.75mu)32px (2mu)36px (2.25mu)44px (2.75mu)size.line.08.(xs,s,m,l)
0934px (2.125mu )36px (2.25mu)40px (2.5mu)44px (2.75mu)52px (3.25mu)size.line.09.(xs,s,m,l)
1041px (2.5625mu)40px (2.5mu)48px (3mu)56px (3.5mu)60px (3.75mu)size.line.10.(xs,s,m,l)
1149px (3.0625mu)48px (3mu)56px (3.5mu)68px (4.25mu)72px (4.5mu)size.line.11.(xs,s,m,l)
1259px (3.6875mu)60px (3.75mu)68px (4.25mu)80px (5mu)(5.5mu) 88pxsize.line.12.(xs,s,m,l)

*mu : magic unit