Use Visual Type Scale to select what size you’re going to use. It is usually Major Third or Minor Third in 18 pixels.
Only do H1 through H4. Not much use for ones after that.
After loading all the fonts, remove the variations you won’t be using. i.e. 100, 200, etc.
The smaller the fonts get, the more line height required.
Whatever the font size is on Desktop, a good starting point 90% on tablet, then 90% of that on mobile. On mobile, the line height may be required to be bumped up by 1 point.
Whatever the mobile setting was on the heading above, that’s the starting point for the next heading on desktop.
Example:
H1 is 42 (1.1) / 38 (1.1) / 34 (1.2)
H2 is 34 (1.2) / 30 (1.2) / 27 (1.3)
H3 is 27 (1.3) / 24 (1.3) / 22 (1.3) [spacing started to get wonky increased line height on the last one]
For H4, make it the same pixel size or slightly bigger than whatever the paragraph font is.
Headings
H1 – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent
H2 – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent
H3 – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent
H4 – Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent
This is an example of normal paragraph text (using the Headline in GP). Mollis pretium lorem primis senectus habitasse lectus scelerisque donec ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque consectetur mi risus molestie curae malesuada. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes mollis taciti phasellus accumsan bibendum semper blandit faucibus.
pre-heading
pill Heading
This is an example of normal paragraph text (using the Headline in GP), however, it has a background color and border. Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla consectetur porttitor quam sollicitudin iaculis aptent ligula euismod penatibus mauris eros praesent.
This is what a Hyperlink will look like.
This is bold.
This is italic.
This is highlighted.
This is a regular underline.
This is a bold underline.
Quotes
This is a block quote.
-Wayne Gretzky
You miss 99% of the shots you don’t take.
Lists
- Bullet 1
- Bullet 2
- Bullet 3
- Number 1
- Number 2
- Number 3
Color Scheme
text
text-link
link-hover
text-light
text-light-hover
headline
headline-hover
background-body
outside-container
white
light-shade-1
light-shade-2
light-shade
light-shade-4
light-shade-5
light-accent-1
light-accent-2
light-accent
light-accent-4
light-accent-5
main-brand-1
main-brand-2
main-brand
main-brand-4
main-brand-5
dark-accent-1
dark-accent-2
dark-accent
dark-accent-4
dark-accent-5
dark-shade-1
dark-shade-2
dark-shade
dark-shade-4
dark-shade-5
Buttons
Forms