> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/core-concepts/typography.md). # Typography & fonts How Analog uses four font roles and shared type presets to control typography across the theme. Pick four fonts and adjust the shared type presets. Headings, buttons, product titles, and other text update from those settings. You don't need to style each element separately. ## Fonts first, presets second The four font roles select the family and weight. Type presets select a font role, a size step, and whether the text is uppercase. Each text element follows a preset, so changing the preset updates every element that uses it. ## Four font roles Analog reserves exactly four font slots, set in Typography › Fonts. Each is a Shopify font picker, so any value resolves to a real family and weight from Shopify's font library. | Role | Default | Where it lands by default | | ------------ | ---------------- | -------------------------------------------------------------------------------------- | | "Heading" | Figtree Medium | h1–h6, and every element that follows them: section titles, buttons, accordions, tabs | | "Subheading" | Figtree SemiBold | The starting font when you switch a title, button, accordion, or tab to a custom style | | "Body" | Figtree Regular | Paragraphs and the Micro preset | | "Accent" | Figtree Bold | The Kicker, which is the smallest uppercase text | The default heading weight is lighter than the accent weight. Large text looks heavier at the same weight, while small uppercase text needs more weight to stay clear. This keeps the two closer in perceived weight. {% hint style="info" %} Start with one family in all four slots and vary the weight. Each additional family adds another font download. Add a second family when the design needs a clear contrast, such as a display face for headings and a neutral sans for body. {% endhint %} ## Presets are the unit of control The base presets are Heading 1–6, "Paragraph", "Kicker", and "Micro" under Typography › Headings and Typography › Content. Each preset is set to "Default" or "⋯". Select "⋯" to show its "Font", "Size", and "Uppercase" controls. "Font" selects one of the four roles. "Size" selects a step from 1 to 15 on the [scale](/core-concepts/scaling.md). The defaults: | Preset | Role | Size | | --------- | ------- | ------------ | | Heading 1 | heading | 10 | | Heading 2 | heading | 8 | | Heading 3 | heading | 7 | | Heading 4 | heading | 6 | | Heading 5 | heading | 5 | | Heading 6 | heading | 4 | | Paragraph | body | 4 | | Kicker | accent | 4, uppercase | | Micro | body | 2, uppercase | Heading 1 is two steps larger than Heading 2. Heading 2 through Heading 6 step down one at a time. ## Elements follow presets The remaining text elements follow another preset. "Section title" follows "Heading 2". "Button", "Accordion", and "Tab" follow "Heading 6". Point an element at another preset, or select "Custom" to give it separate settings. Changing Heading 6 updates buttons, accordions, and tabs. Changing Heading 2 updates section titles. ## Rich text follows the same presets Shopify's rich-text editor maps to Paragraph and Heading 1–6. Preset changes also update product descriptions, page content, and article bodies. There is no separate rich-text type system. ## Separate the tag from the size The HTML tag and visual size are separate. Keep an `

` for the document structure even when it should look smaller. Change the Heading 1 preset's "Size", or use the block's "Text size" control to move it along the scale. ### An h1 that renders like an h2 Use a custom size on the Heading 1 preset to shrink every h1 while the tag stays `

`: * Typography › Headings › Heading 1: "⋯" * Font: "Heading" * Size: 8 ## When a font misbehaves Use the correction settings at the end of the Typography group when a font looks too large, too small, or badly spaced. Leave them at their defaults otherwise. | Control | What it does | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | "Type sizing" | Sets the whole type scale to "Small", "Medium", or "Large". See [scaling](/core-concepts/scaling.md) | | "Font scale" (under Rebalance) | Per-role size correction, 75–125%. For families that render visibly large or small at the same size, commonly handwriting fonts | | "Caps letter spacing" | Per-role letter spacing for uppercase text, −100% to 500%. Wide square faces want wide tracking; tall narrow faces want it pulled tight | Uppercase text renders at 85% of the set size because capitals occupy more of the line than lowercase text. {% hint style="warning" %} Rebalance and caps spacing change a font role everywhere it appears. Use them to correct the family, not one element. Use a "⋯" preset for a one-off adjustment. {% endhint %} Typography uses theme settings and has no metafield contract. Open the [Styleguide](/core-concepts/settings-cascade.md#check-a-global-change-with-the-styleguide) to check every preset, element, and rich-text size with your current settings. The `text-r{n}`, `type-*`, and `font-family-*` utility classes live in the [typography utilities reference](/reference/utilities/typography.md). ## See also * [Scaling: size, space & rhythm](/core-concepts/scaling.md): the 15-step scale used by presets * [Global settings & local overrides](/core-concepts/settings-cascade.md): how blocks override presets * [Color](/core-concepts/color.md): color schemes and derived tints