SW Global Theme Typography (Responsive) — AI / user reference
==============================================================
Theme: smithworks-2025 (Sprocket Rocket + SW). Source of truth for SW AI Documentation sync.

Purpose
-------
Explain Theme Settings → Typography when **Responsive typography** is ON so users and AI agents do not misread the UI (duplicate-looking sizes, min vs max, why “changing 24px” did nothing on mobile, etc.).

Where in HubSpot
----------------
Settings → Tools → Content → Themes & Modules → Themes tab → select the theme → **Typography**.

Applies to (among others): Base font, H1–H6, Display 1–4, **Lead Paragraph** (used when module Content style = Large), Small, Blockquote — each is a separate expandable group in Typography.

What each group shows
---------------------
- **Font / weight** — Family and style (e.g. Lato Regular).
- **Main font size field** — Label varies (e.g. “Lead Paragraph Font Size”, “H1 Font Size”). Often shown in **px**.
- **Advanced settings** (optional) — Line height, letter spacing, etc.
- **Responsive typography** (checkbox) — When **ON**, extra fields appear, typically:
  - **Minimum Font Size** (e.g. “Paragraph Minimum Font Size” for Lead Paragraph) — smallest size at **narrow** viewports.
  - **Maximum Font Size** (e.g. “Paragraph Maximum Font Size”) — largest size at **wide** viewports.

When Responsive typography is OFF
---------------------------------
The theme uses the **single fixed** size from the main font size field (plus advanced settings). There is no min/max range from Typography for that element.

When Responsive typography is ON (critical)
-------------------------------------------
1. **The live font size is a range, not one number.** Between small and large screens the browser interpolates (fluid type). Narrow → near **Minimum**; wide → near **Maximum**.
2. **The main size and the Maximum often match on purpose.** Example: Lead Paragraph Font Size = 24px and Paragraph Maximum Font Size = 24px. That is **not a bug**: it usually means “on large screens, cap at 24px,” while **Minimum** (e.g. 18px) controls how small it goes on phones. Changing only the top field without checking Min/Max can confuse people.
3. **To make type smaller everywhere:** Lower **Maximum** (and adjust **Minimum** if you need a proportional floor). To make mobile-only smaller but keep desktop: lower **Minimum** first.
4. **To use one fixed size again:** Turn **Responsive typography** OFF for that element; then only the main Font Size field drives size (verify in preview at multiple widths).

Sync / refresh icons (UI)
-------------------------
HubSpot may show circular refresh/sync icons next to some fields. Treat these as “linked to theme defaults or global typography tokens.” If values look wrong after a theme update, re-open Typography, confirm Min/Max and main size, then **publish the theme**.

Publish
-------
After changing Typography, **publish the theme** so the live site and editor preview match. Unpublished changes can make it look like “settings do nothing.”

Troubleshooting (short)
------------------------
- **Text huge on desktop** — Responsive ON with very high **Maximum** → lower Maximum or turn Responsive OFF.
- **“I set 20px but it still looks big”** — Check **Maximum** and whether Responsive is ON; check the correct Typography group (Lead vs H1 vs Display).
- **Lead / Large content style** — Modules using Content style “Large” use **Lead Paragraph** typography in Theme Settings.

Related (SW AI Documentation)
------------------------------
First-Time Setup → Theme Settings → Typography bullet; Troubleshooting → lead/heading too large entries.

Document version
----------------
2026.03.19 — Initial global typography responsive explainer for smithworks-2025 AI docs.