Course

Generator Onboarding

10 of 16 lessons completed 63%

Introduction 1 lesson
1. Welcome 5 min
Setup 2 lessons
1. Installing Generator 5 min
2. Create a Child Theme 2 min
HubSpot Settings 3 lessons
Global Theme Styles 9 lessons
Headers & Footer 4 lessons
1. Standard Header 5 min
2. Mega Menu Header 5 min
3. Landing Page Header 5 min
4. Page Scroll Header 5 min
Building Website & Landing Pages 4 lessons
1. Drag and Drop 5 min
2. Sections 5 min
3. Columns 5 min
4. Modules 5 min
Building your Blog 3 lessons
1. Blog Settings 5 min
2. Blog Listing Template 5 min
3. Blog Post Template 5 min
Conclusion 1 lesson
1. Wrapping Up 5 min

Global Text Styles for Generator Theme

Access Text Styles in Global Theme Settings

From any HubSpot page, click Edit, navigate to Body > Theme, then click More Settings and select Text. This opens the text styles panel where you can configure every text element: H1 through H6, Body Text, Links, Block Quotes, and more.

Configure Heading Styles (H1–H6)

Click into each heading level to set its styles individually.

Font Family and Font Weight inherit from the font settings configured in the previous lesson. You can override them here, but it's best practice to keep all headings on the same font family for consistency.

For each heading level, set:

Desktop Font Size — Generator includes best-practice defaults, but adjust to match your brand kit
Mobile Font Size — Generator allows separate mobile sizing, which is a key advantage
Line Height
Text Transform — capitalize, uppercase, etc.
Font Color — inherits from the font section, but can be overridden per heading level

Changes here apply globally — every H1 (or H2, H3, etc.) across all pages will reflect the update.

Configure Body Text Styles

Select Body Text in the panel. Font Family will already inherit from the font section. Set:

Font Size — 16–18px is recommended for paragraph text
Link Font Styles and Hover Font Styles

Publish the Theme After Making Changes

After setting any global styles, always click Publish Theme. This propagates your text styles to all templates using the global theme settings.

Avoid Setting Font Styles Inline on the Page

Do not use the page editor toolbar to set font sizes or font families for headings. Doing so creates an inline style hard-coded directly into the HTML, which:

Creates inconsistency — other headings of the same level will still inherit from global settings
Breaks mobile responsiveness — Generator can no longer override the size on mobile, leaving an oversized heading (e.g., 72px) locked in place

If you accidentally set inline font styles, hover over the text and click the TX button in the toolbar. This clears all inline font styles and resets the text back to global theme defaults.

This lesson covered configuring granular text styles — font sizes, line heights, text transforms, and colors — for each heading level and body text within the Generator theme's global settings. The key action was setting desktop and mobile font sizes per heading level and understanding why inline styles should be avoided. The next lesson will cover button styling.