Typography

For typography, the WPP DS uses Inter, an open-source typeface.

We selected Inter because it fully aligns with the WPP goals in multinational communication, advertising, public relations, technology, and commerce. Typography is an important part of the WPP DS, as it brings consistency across the different digital products and experiences developed under the WPP Open Platform.

View in Storybook

Size	Token	Properties	Usage
5XL	wpp-typography-5xl-display	Size: 48 px / 3 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 62 px	Landing page: Page Heading, Hero Section Heading
4XL	wpp-typography-4xl-display	Size: 36 px / 2.25 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 48 px	Landing page: Page Heading, Section Heading
3XL	wpp-typography-3xl-display	Size: 28 px / 1.75 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 40 px	Heading H1
2XL	wpp-typography-2xl-display	Size: 24 px / 1.5 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 32 px	Section Heading, Side Panel Title
XL	wpp-typography-xl-display	Size: 20 px / 1.25 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 48 px	Sub-section Heading, Modal Window Title
L	wpp-typography-l-strong	Size: 18 px / 1.125 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 28 px	Card Heading
L	wpp-typography-l-midi	Size: 18 px / 1.125 rem Weight: 500 / Medium Letter Spacing: 0 px Line Height: 28 px	Highlighting paragraphs on landing pages
L	wpp-typography-l-body	Size: 18 px / 1.125 rem Weight: 400 / Regular Letter Spacing: 0 px Line Height: 28 px	Paragraph body on landing pages
M	wpp-typography-m-body	Size: 16 px / 1 rem Weight: 400 / Regular Letter Spacing: 0 px Line Height: 24 px	Paragraph body
		Size: 20 px / 1.25 rem Weight: 500 / Medium Letter Spacing: 0 px Line Height: 24 px Case: Underlined	Contextual links in paragraphs of size M
M	wpp-typography-m-midi	Size: 16 px / 1 rem Weight: 500 / Medium Letter Spacing: 0 px Line Height: 24 px	Highlighting important text in a body of size M
M	wpp-typography-m-strong	Size: 16 px / 1 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 24 px	Highlighting important text in a body of size M
S	wpp-typography-s-body	Size: 14 px / 0.875 rem Weight: 400 / Regular Letter Spacing: 0 px Line Height: 22 px	Compact paragraph body Input, Select, Checkbox, Toggle, Radio Button, Context Menu Item, Side bar: Menu sub-item, Dropdown List Item, Tag, Chip, Segmented Control: Counter
		Size: 14 px / 0.875 rem Weight: 500 / Medium Letter Spacing: 0 px Line Height: 22 px Case: Underlined	Primary links, contextual links in paragraphs of size S
S	wpp-typography-s-midi	Size: 14 px / 0.875 rem Weight: 500 / Medium Letter Spacing: 0 px Line Height: 22 px	Segmented control: Text, Sidebar, Top bar: Menu item, Tooltip Value: Text, Banner: Text
S	wpp-typography-s-strong	Size: 14 px / 0.875 rem Weight: 600 / Semibold Letter Spacing: 0 px Line Height: 22 px	Button text, Labels (Inputs, Select), List Item (Selected), Tab (Selected, Unselected), Chip (Selected), Highlight important info in body of size S, Avatar (Size M): First and last name abbreviations
XS	wpp-typography-xs-body	Size: 12 px / 0.75 rem Weight: 400 / Regular Letter Spacing: 0 px Line Height: 20 px	Supplementary text, Dropdown Menu Item: Subitem
XS	wpp-typography-xs-midi	Size: 12 px / 0.75 rem Weight: 400 / Regular Letter Spacing: 0 px Line Height: 20 px	Highlighting paragraph text
XS	wpp-typography-xs-strong	Size: 12 px / 0.75 rem Weight: 500 / Medium Letter Spacing: 0 px Line Height: 20 px	Validation messages, Highlighting important text in a body of size XS
2XS	wpp-typography-xs-strong	Size: 10 px / 0.0625 rem Weight: 700 / Bold Letter Spacing: 5% Line Height: 20 px Case: Uppercase	Avatar (Size XS), Size S: First and last name abbreviations