Typography
Typography is used to create clear hierarchies, useful organizations, and purposeful alignments
Noto Sans
The official Michelin font is Noto Sans, it's used for Michelin Commercial, Michelin Group and also the Michelin Guide.
To get the font, follow the link: Download Noto Sans font
Integration rules
Use the Google repository to load google fonts.
Integrate typefaces using relative units such as rem to ensure proper adjustment of proportions to the responsive breakpoint. Avoid absolute units wherever possible.
Typography sizes should be hierarchically consistent.
H1 > H2 > H3 > H4, H5, H6 > text
Line heights must also be consistent.
Weights are free, but must be consistent with the text hierarchy.
Spacing and font sizes must comply with WCAG AA rules.
When applying italics, use italic typography rather than the CSS effect "italic".
Different styles of headings and paragraphs are available in the Figma components.
To go further, consult the Digital chart in the Brand Center website.
Titles
A title or a subtitle is using to enhance some contents by resuming its with a few words. Use it to organize your information and explain in a short text.
Information like text or images must be preceded by a subtitle or a title. A subtitle must be preceded by a title. There is only one title by page. The size of the title must be the double of the size of the subtitle and the size of the subtitle must be the double of the text. Be careful the text can’t be smaller than 11px.
Font-size : 36px
Mobile : 32px
Font-weight : Bold
Line-height : 54px
Mobile : 48px
H2.
Font-size : 32px
Mobile : 30px
Font-weight : Bold
Line-height : 48px
H3.
Font-size : 28px
Font-weight : Bold
Line-height : 42px
H4.
Font-size : 24px
Font-weight : Regular
Line-height : 36px
H5.
Font-size : 22px
Font-weight : Regular
Line-height : 33px
H6.
Font-size : 20px
Font-weight : Bold
Line-height : 30px
Best practices
Don’t place more than one main title on a page.
Avoid using numbers and symbols.
Paragraph
Body large (> 980px)
Font-size : 18px
Font-weight : Regular
Line-height : 27px
Body medium (between 640px and 979px)
Font-size : 16px
Font-weight : Regular
Line-height : 24px
Body small (< 639px)
Font-size : 14px
Font-weight : Regular
Line-height : 24px
Best practices
Keep to 50–60 letters per line for ease of reading.
Keep type color neutral in running text.
The use of the colored type is reserved for warnings, alerts, etc.
Text should be left aligned.
Don’t put the text paragraph in full uppercase or lowercase.
Don’t use a font size smaller than 12px.
List
Font-size : 16px
Font-weight : Regular
Line-height : 24px
Bulleted list
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Numbered list
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lists are vertical groupings of related content. List items begin with either a number or a bullet. Use a list when you have to display a group of items together and organized vertically. Use it to display simple pieces of data in a consistent format. Items in the list are display vertically and are aligned. Subitems have a margin before them to stand out from the parent item.
Best practices
Use list to display simple information, for complex data use a table or a graph for example.
Order list in a logical way (alphabetic order, most frequent, …).
List item are grammatically parallel, use the same type of syntax for every item.