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 pull quote.
You miss 99% of the shots you don’t take.

-Michael Scott

This is a block quote.
You miss 99% of the shots you don’t take.

-Wayne Gretzky

Lists

• Bullet 1
• Bullet 2
• Bullet 3

1. Number 1
2. Number 2
3. Number 3

Color Scheme

Buttons

Forms