Typography
Set the font, size, and color for the title, subheading, digits, and labels.
The Typography card on the Design tab styles four separate text elements, each with its own desktop size, mobile size, and color.
Choose a font
Open the timer and go to the Design tab.
In Typography, open the Font dropdown.
Pick a font, or choose the option that inherits your theme's typography.
Click Save.
The four text elements
| Setting | Styles |
|---|---|
| Title size and color | Your headline |
| Subheading size and color | The supporting line |
| Timer size and color | The countdown digits |
| Legend size and color | The Days / Hours / Minutes / Seconds labels |
Each has a matching mobile size: Title size (mobile), Subheading size (mobile), Timer size (mobile), and Legend size (mobile).
Style each element
Set Size and Color for the element.
Set its mobile size so the timer fits on a phone.
Repeat for the title, subheading, timer, and legend.
Click Save.
Recommended sizes
| Element | Desktop | Mobile |
|---|---|---|
| Title | 18–24px | 14–16px |
| Subheading | 14–18px | 12–14px |
| Timer digits | 28–40px | 20–28px |
| Legend labels | 11–13px | 9–11px |
Build a hierarchy
The digits should be the largest and highest-contrast thing in the timer — they're what the whole component exists for. Then the title, then the subheading, and the legend labels quietest of all.
A common mistake is styling the legend labels at the same weight as the digits. It makes the timer look cluttered and slows down reading the numbers.
Always set the mobile sizes
Most storefront traffic is mobile. 36px digits that look striking on desktop will overflow a narrow bar on a phone and wrap into a mess.
Tip
Check the digits at their widest. A timer showing 00:00:00 is narrower than one showing 28:14:59:33 — set your sizes against the widest state, not the preview's current value.