Typography and font scale
Treble sets type in four styles: Display for the largest statements, Heading for section titles, Subheading for the small label above headings, and Body for running text. Sections pick a style for each title and scale it with Font scale, a percentage of the style's size. Change a style once in Theme settings and every title that uses it follows.
How to set it up
Step 1: Choose your fonts
- Open Theme settings > Typography.
- Pick the Heading font and Body font (1). The Highlight font is used by the Serif italic highlight; the Label font by subheadings, prices and spec labels.
Step 2: Size the styles
- Under Display, Headings, Subheadings and Body, set the size on desktop and mobile, line height, letter spacing and case.
- Under Headings, choose Highlighted words: how words in italics inside headings are styled (drawn underline, marker, serif italic and more).
Step 3: Scale a title in a section
- Select a section and find the title's Typography and Font scale settings.
- At 100% the title is exactly the style's size from Theme settings. 50% is half, 200% twice as large. Mobile has its own scale.
Settings reference
Typography
| Fonts | |
|---|---|
| Heading font | |
| Body font | |
| Highlight font | Used by the Serif italic highlight. |
| Label font | |
| Display | |
| Font | Options: Heading font, Accent font. |
| Size on desktop | Slider. |
| Size on mobile | Slider. |
| Line height | Slider. |
| Letter spacing | Slider. |
| Case | Options: Default, Uppercase. |
| Make font bolder | Turns this on or off. |
| Headings | |
| Size on desktop | Section titles at 100%. Sections scale it up or down. |
| Size on mobile | Slider. |
| Line height | Slider. |
| Letter spacing | Thousandths of an em. |
| Case | Options: Default, Uppercase. |
| Highlighted words | Style for words set in italics in headings. Sections can override it. Options: Drawn underline, Display screen, Focus frame, Serif italic, Marker, Circle, Brush stroke, Pill, Outline text, Italic only. |
| Subheadings | |
| Font | Options: Label font, Body font, Heading font. |
| Size | Slider. |
| Make font bolder | Turns this on or off. |
| Letter spacing | Thousandths of an em. |
| Case | Options: Default, Uppercase. |
| Label case | Labels, specifications and prices in spec lines. Options: Default, Uppercase. |
| Body | |
| Size on desktop | Slider. |
| Size on mobile | Slider. |
| Line height | In hundredths: 155 is 1.55. |
| Letter spacing | Thousandths of an em. |
| Large body on desktop | Slider. |
| Large body on mobile | Slider. |
| Caption size | Slider. |
| Menu and buttons | |
| Size | Slider. |
| Weight | Options: Regular, Medium, Bold. |
| Case | Options: Default, Uppercase. |
| Button font | Options: Body font, Heading font. |
| Button weight | Options: Regular, Medium, Bold. |
| Button text | Options: Default, Uppercase. |
How it works
- Font scale never fixes a size in pixels: it always follows the style. That keeps headings in proportion when you change fonts or sizes later.
- Fonts come from Shopify's font library. Some fonts have no bold weight; Make font bolder then has no visible effect.
- Display can use the heading font or the accent font, for a contrasting look in heroes and wordmarks.
Troubleshooting
A heading is too big on phones.
Lower its Font scale on mobile, or the style's Size on mobile in Theme settings to change all of them.
Italic words don't look highlighted.
Check Theme settings > Typography > Headings > Highlighted words. "Italic only" shows plain italics.