Heading structure

H1 sizing

Designers should use the following sizes as a base to start off from

Large screen: Heading/Heading 8XL

Medium screen: Heading/Heading 8XL

Small screen: Heading/Heading 4XL

 

After this, designers are free to use the heading styles as they see fit to create the right visual hierarchy for the the page they are working on.

Space between sections

Should we commit to a space between sections or leave to designer to decide what suits the context best?

 

Content width

Based on best practice being a line of copy should be no longer than 90 characters, we have used a Font Size conversion website to determine body copy sections should span a width of 720px on large and medium screens.

For small screens, use the full width minus 16px padding from left and right sides (343px).