Typography

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:

font_picker

default:"work_sans_n4"

Body Font - Used for paragraphs and general body text

Default: Work Sans (Regular)
Applied to all body copy

font_picker

default:"work_sans_n5"

Subheading Font - Used for secondary headings and labels

Default: Work Sans (Medium)
Used for H4-H6 by default

font_picker

default:"anonymous_pro_n4"

Heading Font - Used for primary headings

Default: Anonymous Pro
Applied to H1-H3 by default

font_picker

default:"anonymous_pro_n4"

Accent Font - Used for special emphasis

Default: Anonymous Pro
Can be applied to any heading level

Paragraph Styles

Base text styling for body content:

select

default:"14"

Base font size for paragraphs

Options: 10px, 12px, 14px, 16px, 18px
Default: 14px

select

default:"body-normal"

Line height for paragraphs

body-tight - Compact spacing
body-normal - Standard spacing
body-loose - Generous spacing

Paragraph CSS Output

: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

select

default:"heading"

Font family

heading - Use heading font
accent - Use accent font

select

default:"72"

Font size

Options: 10px to 184px
Default: 72px

select

default:"display-normal"

Line height

display-tight - Tight spacing (0.9)
display-normal - Normal spacing (1.1)
display-loose - Loose spacing (1.3)

select

default:"heading-normal"

Letter spacing

heading-tight - Tight (-0.02em)
heading-normal - Normal (0)
heading-loose - Loose (0.05em)

select

default:"none"

Text transformation

none - Default case
uppercase - ALL CAPS

H2 - Section Headings

select

default:"heading"

Font family: heading or accent

select

default:"48"

Font size: 10px-184px (Default: 48px)

select

default:"display-normal"

Line height: display-tight, display-normal, or display-loose

select

default:"heading-normal"

Letter spacing: heading-tight, heading-normal, or heading-loose

select

default:"none"

Text case: none or uppercase

H3 - Subsection Headings

select

default:"heading"

Font family

heading - Heading font
accent - Accent font
subheading - Subheading font
body - Body font

select

default:"32"

Font size: 10px-184px (Default: 32px)

select

default:"display-normal"

Line height: display-tight, display-normal, or display-loose

select

default:"heading-normal"

Letter spacing: heading-tight, heading-normal, or heading-loose

select

default:"none"

Text case: none or uppercase

H4 - Component Headings

select

default:"subheading"

Font family: heading, accent, subheading, or body

select

default:"24"

Font size: 10px-184px (Default: 24px)

select

default:"display-normal"

Line height: display-tight, display-normal, or display-loose

select

default:"heading-normal"

Letter spacing: heading-tight, heading-normal, or heading-loose

select

default:"none"

Text case: none or uppercase

H5 - Small Headings

select

default:"subheading"

Font family: heading, accent, subheading, or body

select

default:"18"

Font size: 10px-184px (Default: 18px)

select

default:"display-normal"

Line height: display-tight, display-normal, or display-loose

select

default:"heading-normal"

Letter spacing: heading-tight, heading-normal, or heading-loose

select

default:"none"

Text case: none or uppercase

H6 - Smallest Headings

select

default:"subheading"

Font family: heading, accent, subheading, or body

select

default:"16"

Font size: 10px-184px (Default: 16px)

select

default:"display-normal"

Line height: display-tight, display-normal, or display-loose

select

default:"heading-normal"

Letter spacing: heading-tight, heading-normal, or heading-loose

select

default:"none"

Text case: none or uppercase

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

Display Line Heights

Used for headings:

Tight: 0.9
Normal: 1.1
Loose: 1.3

Body Line Heights

Used for paragraphs:

Tight: 1.4
Normal: 1.6
Loose: 1.8

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:

Typography Variables

: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:

Typography Snippet

{% render 'typography-style',
  element: 'h1',
  size: section.settings.heading_size,
  line_height: section.settings.heading_line_height
%}

HTML Classes

Use predefined typography classes:

Typography Classes

<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:

Default Typography Settings

{
  "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:

select

default:"body"

Primary button font family

body - Body font
accent - Accent font

select

default:"default"

Primary button text transformation

default - No transformation
uppercase - ALL CAPS

select

default:"body"

Secondary button font family

body - Body font
accent - Accent font

select

default:"default"

Secondary button text transformation

default - No transformation
uppercase - ALL CAPS

Best Practices

Establish Hierarchy

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

Readable Line Length

Optimal line length for readability:

Ideal: 50-75 characters per line
Maximum: 90 characters per line
Adjust container width or font size accordingly

Consistent Line Height

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

Limit Font Families

Keep typography simple and cohesive:

Use 2-3 font families maximum
Pair contrasting styles (serif + sans-serif)
Consider font loading performance

Test Readability

Ensure text is readable across devices:

Test on mobile and desktop
Check contrast ratios
Verify font rendering on different browsers

Custom Typography Snippet

Create reusable typography components:

snippets/text.liquid

{% liquid
  assign tag = tag | default: 'p'
  assign preset = preset | default: 'paragraph'
  assign class = class | default: ''
%}

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

Usage:

Using Text Snippet

{% render 'text',
  tag: 'h2',
  preset: 'h2',
  content: section.settings.heading
%}

Color Schemes

Define text colors for each color scheme

Theme Settings

Configure global theme options

Layouts

Understand how typography affects layout

Overview

Core Concepts

Development

Customization

Features

Overview

Font Roles

Paragraph Styles

Heading Levels

H1 - Main Page Headings

H2 - Section Headings

H3 - Subsection Headings

H4 - Component Headings

H5 - Small Headings

H6 - Smallest Headings

Typography Scale

Line Height Values

Display Line Heights

Body Line Heights

Letter Spacing Values

Using Typography in Code

CSS Variables

Liquid Snippets

HTML Classes

Default Configuration

Button Typography

Best Practices

Custom Typography Snippet

Color Schemes

Theme Settings

Layouts

​Overview

​Font Roles

​Paragraph Styles

​Heading Levels

​H1 - Main Page Headings

​H2 - Section Headings

​H3 - Subsection Headings

​H4 - Component Headings

​H5 - Small Headings

​H6 - Smallest Headings

​Typography Scale

​Line Height Values

Display Line Heights

Body Line Heights

​Letter Spacing Values

​Using Typography in Code

​CSS Variables

​Liquid Snippets

​HTML Classes

​Default Configuration

​Button Typography

​Best Practices

​Custom Typography Snippet

​Related Pages

Color Schemes

Theme Settings

Layouts

Overview

Font Roles

Paragraph Styles

Heading Levels

H1 - Main Page Headings

H2 - Section Headings

H3 - Subsection Headings

H4 - Component Headings

H5 - Small Headings

H6 - Smallest Headings

Typography Scale

Line Height Values

Letter Spacing Values

Using Typography in Code

CSS Variables

Liquid Snippets

HTML Classes

Default Configuration

Button Typography

Best Practices

Custom Typography Snippet

Related Pages