> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Configure fonts, sizes, and text styles in the Horizon theme

## Overview

Horizon provides extensive typography customization through four font roles and six heading levels. Each text element can be individually configured for size, line height, letter spacing, and text transformation.

## Font Roles

The theme uses four distinct font families that can be applied throughout:

<ParamField path="type_body_font" type="font_picker" default="work_sans_n4">
  **Body Font** - Used for paragraphs and general body text

  * Default: Work Sans (Regular)
  * Applied to all body copy
</ParamField>

<ParamField path="type_subheading_font" type="font_picker" default="work_sans_n5">
  **Subheading Font** - Used for secondary headings and labels

  * Default: Work Sans (Medium)
  * Used for H4-H6 by default
</ParamField>

<ParamField path="type_heading_font" type="font_picker" default="anonymous_pro_n4">
  **Heading Font** - Used for primary headings

  * Default: Anonymous Pro
  * Applied to H1-H3 by default
</ParamField>

<ParamField path="type_accent_font" type="font_picker" default="anonymous_pro_n4">
  **Accent Font** - Used for special emphasis

  * Default: Anonymous Pro
  * Can be applied to any heading level
</ParamField>

## Paragraph Styles

Base text styling for body content:

<ParamField path="type_size_paragraph" type="select" default="14">
  Base font size for paragraphs

  * **Options:** 10px, 12px, 14px, 16px, 18px
  * **Default:** 14px
</ParamField>

<ParamField path="type_line_height_paragraph" type="select" default="body-normal">
  Line height for paragraphs

  * `body-tight` - Compact spacing
  * `body-normal` - Standard spacing
  * `body-loose` - Generous spacing
</ParamField>

```css Paragraph CSS Output theme={null}
:root {
  --font-paragraph-family: var(--font-body-family);
  --font-paragraph-size: 14px;
  --font-paragraph-line-height: var(--line-height-body-normal);
}
```

## Heading Levels

Each heading level (H1-H6) can be individually customized.

### H1 - Main Page Headings

<ParamField path="type_font_h1" type="select" default="heading">
  Font family

  * `heading` - Use heading font
  * `accent` - Use accent font
</ParamField>

<ParamField path="type_size_h1" type="select" default="72">
  Font size

  * **Options:** 10px to 184px
  * **Default:** 72px
</ParamField>

<ParamField path="type_line_height_h1" type="select" default="display-normal">
  Line height

  * `display-tight` - Tight spacing (0.9)
  * `display-normal` - Normal spacing (1.1)
  * `display-loose` - Loose spacing (1.3)
</ParamField>

<ParamField path="type_letter_spacing_h1" type="select" default="heading-normal">
  Letter spacing

  * `heading-tight` - Tight (-0.02em)
  * `heading-normal` - Normal (0)
  * `heading-loose` - Loose (0.05em)
</ParamField>

<ParamField path="type_case_h1" type="select" default="none">
  Text transformation

  * `none` - Default case
  * `uppercase` - ALL CAPS
</ParamField>

### H2 - Section Headings

<ParamField path="type_font_h2" type="select" default="heading">
  Font family: `heading` or `accent`
</ParamField>

<ParamField path="type_size_h2" type="select" default="48">
  Font size: 10px-184px (Default: 48px)
</ParamField>

<ParamField path="type_line_height_h2" type="select" default="display-normal">
  Line height: `display-tight`, `display-normal`, or `display-loose`
</ParamField>

<ParamField path="type_letter_spacing_h2" type="select" default="heading-normal">
  Letter spacing: `heading-tight`, `heading-normal`, or `heading-loose`
</ParamField>

<ParamField path="type_case_h2" type="select" default="none">
  Text case: `none` or `uppercase`
</ParamField>

### H3 - Subsection Headings

<ParamField path="type_font_h3" type="select" default="heading">
  Font family

  * `heading` - Heading font
  * `accent` - Accent font
  * `subheading` - Subheading font
  * `body` - Body font
</ParamField>

<ParamField path="type_size_h3" type="select" default="32">
  Font size: 10px-184px (Default: 32px)
</ParamField>

<ParamField path="type_line_height_h3" type="select" default="display-normal">
  Line height: `display-tight`, `display-normal`, or `display-loose`
</ParamField>

<ParamField path="type_letter_spacing_h3" type="select" default="heading-normal">
  Letter spacing: `heading-tight`, `heading-normal`, or `heading-loose`
</ParamField>

<ParamField path="type_case_h3" type="select" default="none">
  Text case: `none` or `uppercase`
</ParamField>

### H4 - Component Headings

<ParamField path="type_font_h4" type="select" default="subheading">
  Font family: `heading`, `accent`, `subheading`, or `body`
</ParamField>

<ParamField path="type_size_h4" type="select" default="24">
  Font size: 10px-184px (Default: 24px)
</ParamField>

<ParamField path="type_line_height_h4" type="select" default="display-normal">
  Line height: `display-tight`, `display-normal`, or `display-loose`
</ParamField>

<ParamField path="type_letter_spacing_h4" type="select" default="heading-normal">
  Letter spacing: `heading-tight`, `heading-normal`, or `heading-loose`
</ParamField>

<ParamField path="type_case_h4" type="select" default="none">
  Text case: `none` or `uppercase`
</ParamField>

### H5 - Small Headings

<ParamField path="type_font_h5" type="select" default="subheading">
  Font family: `heading`, `accent`, `subheading`, or `body`
</ParamField>

<ParamField path="type_size_h5" type="select" default="18">
  Font size: 10px-184px (Default: 18px)
</ParamField>

<ParamField path="type_line_height_h5" type="select" default="display-normal">
  Line height: `display-tight`, `display-normal`, or `display-loose`
</ParamField>

<ParamField path="type_letter_spacing_h5" type="select" default="heading-normal">
  Letter spacing: `heading-tight`, `heading-normal`, or `heading-loose`
</ParamField>

<ParamField path="type_case_h5" type="select" default="none">
  Text case: `none` or `uppercase`
</ParamField>

### H6 - Smallest Headings

<ParamField path="type_font_h6" type="select" default="subheading">
  Font family: `heading`, `accent`, `subheading`, or `body`
</ParamField>

<ParamField path="type_size_h6" type="select" default="16">
  Font size: 10px-184px (Default: 16px)
</ParamField>

<ParamField path="type_line_height_h6" type="select" default="display-normal">
  Line height: `display-tight`, `display-normal`, or `display-loose`
</ParamField>

<ParamField path="type_letter_spacing_h6" type="select" default="heading-normal">
  Letter spacing: `heading-tight`, `heading-normal`, or `heading-loose`
</ParamField>

<ParamField path="type_case_h6" type="select" default="none">
  Text case: `none` or `uppercase`
</ParamField>

## Typography Scale

Horizon uses a responsive typography scale that adapts to screen size:

| Size  | Desktop | Mobile |
| ----- | ------- | ------ |
| 10px  | 10px    | 10px   |
| 12px  | 12px    | 12px   |
| 14px  | 14px    | 13px   |
| 16px  | 16px    | 14px   |
| 18px  | 18px    | 16px   |
| 20px  | 20px    | 18px   |
| 24px  | 24px    | 20px   |
| 32px  | 32px    | 24px   |
| 40px  | 40px    | 28px   |
| 48px  | 48px    | 32px   |
| 56px  | 56px    | 36px   |
| 72px  | 72px    | 44px   |
| 88px  | 88px    | 52px   |
| 120px | 120px   | 64px   |
| 152px | 152px   | 76px   |
| 184px | 184px   | 88px   |

## Line Height Values

<CardGroup cols={2}>
  <Card title="Display Line Heights" icon="text-height">
    Used for headings:

    * **Tight:** 0.9
    * **Normal:** 1.1
    * **Loose:** 1.3
  </Card>

  <Card title="Body Line Heights" icon="align-left">
    Used for paragraphs:

    * **Tight:** 1.4
    * **Normal:** 1.6
    * **Loose:** 1.8
  </Card>
</CardGroup>

## Letter Spacing Values

* **Tight:** -0.02em
* **Normal:** 0em
* **Loose:** 0.05em

## Using Typography in Code

### CSS Variables

All typography settings are available as CSS custom properties:

```css Typography Variables theme={null}
:root {
  /* Font Families */
  --font-body-family: var(--type-body-font);
  --font-subheading-family: var(--type-subheading-font);
  --font-heading-family: var(--type-heading-font);
  --font-accent-family: var(--type-accent-font);
  
  /* Heading Sizes */
  --font-h1-size: 72px;
  --font-h2-size: 48px;
  --font-h3-size: 32px;
  --font-h4-size: 24px;
  --font-h5-size: 18px;
  --font-h6-size: 16px;
  
  /* Line Heights */
  --font-h1-line-height: var(--line-height-display-normal);
  --font-h2-line-height: var(--line-height-display-normal);
  
  /* Letter Spacing */
  --font-h1-letter-spacing: var(--letter-spacing-heading-normal);
}
```

### Liquid Snippets

Access font settings in Liquid:

```liquid Typography Snippet theme={null}
{% render 'typography-style',
  element: 'h1',
  size: section.settings.heading_size,
  line_height: section.settings.heading_line_height
%}
```

### HTML Classes

Use predefined typography classes:

```html Typography Classes theme={null}
<h1 class="h1">Main Heading</h1>
<h2 class="h2">Section Heading</h2>
<p class="body-text">Paragraph text</p>
<span class="text-small">Small text</span>
```

## Default Configuration

Here's a typical Horizon typography configuration:

```json Default Typography Settings theme={null}
{
  "type_body_font": "inter_n4",
  "type_subheading_font": "inter_n5",
  "type_heading_font": "inter_n7",
  "type_accent_font": "inter_n7",
  "type_size_paragraph": "14",
  "type_line_height_paragraph": "body-loose",
  "type_size_h1": "56",
  "type_line_height_h1": "display-tight",
  "type_letter_spacing_h1": "heading-normal",
  "type_case_h1": "none",
  "type_size_h2": "48",
  "type_line_height_h2": "display-tight",
  "type_size_h3": "32",
  "type_line_height_h3": "display-normal",
  "type_size_h4": "24",
  "type_line_height_h4": "display-tight",
  "type_size_h5": "14",
  "type_line_height_h5": "display-loose",
  "type_size_h6": "12",
  "type_line_height_h6": "display-loose"
}
```

## Button Typography

Buttons can use either body or accent fonts:

<ParamField path="type_font_button_primary" type="select" default="body">
  Primary button font family

  * `body` - Body font
  * `accent` - Accent font
</ParamField>

<ParamField path="button_text_case_primary" type="select" default="default">
  Primary button text transformation

  * `default` - No transformation
  * `uppercase` - ALL CAPS
</ParamField>

<ParamField path="type_font_button_secondary" type="select" default="body">
  Secondary button font family

  * `body` - Body font
  * `accent` - Accent font
</ParamField>

<ParamField path="button_text_case_secondary" type="select" default="default">
  Secondary button text transformation

  * `default` - No transformation
  * `uppercase` - ALL CAPS
</ParamField>

## Best Practices

<AccordionGroup>
  <Accordion title="Establish Hierarchy" icon="layer-group">
    Use size and weight to create clear visual hierarchy:

    * H1 should be significantly larger than H2
    * Maintain consistent size jumps between levels
    * Use weight (bold) for emphasis within hierarchy
  </Accordion>

  <Accordion title="Readable Line Length" icon="ruler-horizontal">
    Optimal line length for readability:

    * **Ideal:** 50-75 characters per line
    * **Maximum:** 90 characters per line
    * Adjust container width or font size accordingly
  </Accordion>

  <Accordion title="Consistent Line Height" icon="arrows-up-down">
    Match line height to content type:

    * **Headlines:** Use tight line height (0.9-1.1)
    * **Body text:** Use normal to loose (1.4-1.8)
    * **Small text:** Increase line height for readability
  </Accordion>

  <Accordion title="Limit Font Families" icon="font">
    Keep typography simple and cohesive:

    * Use 2-3 font families maximum
    * Pair contrasting styles (serif + sans-serif)
    * Consider font loading performance
  </Accordion>

  <Accordion title="Test Readability" icon="eye">
    Ensure text is readable across devices:

    * Test on mobile and desktop
    * Check contrast ratios
    * Verify font rendering on different browsers
  </Accordion>
</AccordionGroup>

## Custom Typography Snippet

Create reusable typography components:

```liquid snippets/text.liquid theme={null}
{% liquid
  assign tag = tag | default: 'p'
  assign preset = preset | default: 'paragraph'
  assign class = class | default: ''
%}

<{{ tag }} class="text text--{{ preset }} {{ class }}">
  {{ content }}
</{{ tag }}>
```

Usage:

```liquid Using Text Snippet theme={null}
{% render 'text',
  tag: 'h2',
  preset: 'h2',
  content: section.settings.heading
%}
```

## Related Pages

<CardGroup cols={2}>
  <Card title="Color Schemes" icon="palette" href="/customization/color-schemes">
    Define text colors for each color scheme
  </Card>

  <Card title="Theme Settings" icon="gear" href="/customization/settings">
    Configure global theme options
  </Card>

  <Card title="Layouts" icon="table-layout" href="/customization/layouts">
    Understand how typography affects layout
  </Card>
</CardGroup>