Typography
Font families, type scale, and case standards
Brand Headings
Typeface
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0 ~ ` ! @ # $ % ^ & * ( ) – = _ + [ ] { } \ | ; : ‘ ” , . / < > ?
Available Weight(s)
Normal (400)
Normal Italic
Normal Bolded
Specimen
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Brand Text
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0 ~ ` ! @ # $ % ^ & * ( ) – = _ + [ ] { } \ | ; : ‘ ” , . / < > ?
Available Weight(s)
Light (300)
Light Italic
Light Bolded
Regular (400)
Regular Italic
Regular Bolded
Medium (500)
Medium Italic
Medium Bolded
Bold (700)
Bold Italic
Bold Bolded
Specimen
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ideal Stack
Eyebrow Heading
Lends context to a primary heading
eyebrow heading
H1
The highest-level heading on a page. There should only be one H1 per page.
Sample of a primary heading or title
H2
Sample of a secondary-level heading
P
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in. Adipiscing commodo elit at imperdiet. Ipsum dolor sit amet consectetur adipiscing elit. Justo donec enim diam vulputate ut pharetra sit. Et odio pellentesque diam volutpat. Molestie a iaculis at erat. Nam libero justo laoreet sit amet cursus sit.
H3
Sample of a third-level heading
P
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in. Adipiscing commodo elit at imperdiet. Ipsum dolor sit amet consectetur adipiscing elit. Justo donec enim diam vulputate ut pharetra sit. Et odio pellentesque diam volutpat. Molestie a iaculis at erat. Nam libero justo laoreet sit amet cursus sit.
H4
Sample of a fourth-level heading
P
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in. Adipiscing commodo elit at imperdiet. Ipsum dolor sit amet consectetur adipiscing elit. Justo donec enim diam vulputate ut pharetra sit. Et odio pellentesque diam volutpat. Molestie a iaculis at erat. Nam libero justo laoreet sit amet cursus sit.
Tempor id eu nisl nunc. Nibh ipsum consequat nisl vel pretium lectus. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Sociis natoque penatibus et magnis. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Consequat interdum varius sit amet mattis vulputate enim nulla.
Type Scale
The ‘type scale’ is the relative sizing of type options across the site. Restricting typography to specific size options helps maintain visual consistency across pages, layouts, and content elements.
Type size: 5X Large
Type size: 4X Large
Type size: 3X Large
Type size: 2X Large
Type size: Extra Large
Type size: Large
Type size: Medium
Type size: Base
Type size: Small
Type size: Extra Small
Headings Type Scale
The ‘type scale’ is the relative sizing of type options across the site. Restricting typography to specific size options helps maintain visual consistency across pages, layouts, and content elements. This type scale shows the default sizing of the heading tags (h1 – h6) in relation to one-another and to the default paragraph text size.
Heading 1 Size Text Sample
Heading 2 Size Text Sample
Heading 3 Size Text Sample
Heading 4 Size Text Sample
Heading 5 Size Text Sample
Heading 6 Size Text Sample
Paragraph text size sample
See also:
- The Style Guide includes specifications for type-related content such as case standards.