Typography

Found under Theme settings → Typography, organized into Fonts, Font size, Line height, Letter spacing, and Case. Fonts come from the Shopify font library and are served from your own store, so nothing here reaches out to another company’s font service.

Lapels has no separate mobile type settings. Every size you set here is the size at a wide desktop. Each level scales itself down as the screen narrows and stops at a floor, so a headline that reads well at 1440px still holds a 375px measure.

The four font roles

Lapels runs on four type voices rather than the usual two. Each one has a job, and the theme assigns them for you. You pick the faces, not where they land.

Role	What it sets	Default
Heading	Every heading level, the oversized display type in heroes, and prices.	Fraunces
Subheading	The intro paragraph under a heading, and pull quotes in rich text. Sections set their own intro in it. On the Text and Description blocks you pick it with Style → Intro.	Alegreya
Body	Body copy, paragraphs, and everything inside rich text.	Alegreya
Mono	The label voice. See below.	Jost Medium

The Mono role is Lapels’ label voice, and it is the theme’s design signature. It sets the small uppercase, wide-tracked text that runs through the whole storefront. That means section eyebrows, the numbered index tags, size tags, captions under images, meta rows, filter and form labels, the unit price beside a price, and by default the text inside both button styles. It is deliberately one voice, set once, so those elements share a rhythm and line up with each other across sections that otherwise have nothing in common.

Prices are the exception worth knowing about. They are set in the Heading face, one step above label size, because a price is a figure being read and compared down a column rather than another caption hanging off a picture.

Note

Pick a face for Mono that stays readable in small uppercase with wide tracking. A grotesque or a squarish text face works. A script or a heavy display face does not.

Despite the name, the picker offers the whole Shopify font library, not only monospaced faces, and the shipped default is not a monospaced font.

Do not repurpose this role for body copy. Everything the label voice sets is small, capitalized and tracked out, and prose set that way is unreadable.

Lapels ships three presets, chosen when you add the theme: Lapels, Kaolin, and Damascene. Each pairs the four roles differently.

Theme preset	Heading	Subheading and body	Mono
Lapels	Fraunces	Alegreya	Jost Medium
Kaolin	Alegreya Medium	Kreon	Kreon
Damascene	Andada Pro Medium	Jost	Kreon

Kaolin points three roles at one face on purpose. Where Subheading or Mono lands on the same face as Body or Heading, the store loads that face once rather than twice, so consolidating roles is a small free speed win if you want a quieter type system.

Font size

Each heading level takes a size in pixels from 10 to 184, in steps of 2. Paragraph runs from 10 to 24 in steps of 1.

Setting	What it does	Default
Heading 1	The largest heading level, and the anchor for the oversized display type.	56px
Heading 2	Section titles.	48px
Heading 3	Sub-section titles and the largest card headings.	32px
Heading 4	Card and panel headings.	24px
Heading 5	Small headings inside dense layouts.	22px
Heading 6	The smallest heading level.	20px
Paragraph	Body copy. The intro, label and price sizes are all measured off it, and every heading level is floored against it.	16px

Two things ride along without controls of their own.

The display and oversized headline tiers used by heroes are derived from Heading 1, so moving that one number moves the whole big-type voice with it.

The label size, meaning the mono voice described above, is derived from Paragraph, with a 12px floor. It stays the same at every screen width, so the eyebrows, prices and size tags in a row keep sharing one baseline.

Each heading level is also floored against Paragraph, so a heading can never render at the size of the sentence underneath it, however far you drag the sliders apart.

Line height

Three named steps per level. On headings, Tight is 0.95, Normal is 1.08, and Loose is 1.25. On Paragraph the scale is looser to suit running text: Tight is 1.4, Normal is 1.6, Loose is 1.8.

Setting	What it does	Default
Heading 1	Line spacing for the largest headings. Tight is what makes a two-line hero read as one block.	Tight
Heading 2	Line spacing for section titles.	Tight
Heading 3	Line spacing for sub-section titles.	Normal
Heading 4	Line spacing for card and panel headings.	Normal
Heading 5	Line spacing for small headings.	Loose
Heading 6	Line spacing for the smallest heading level.	Loose
Paragraph	Line spacing for body copy. It also sets the height of buttons and single-line form fields, so the two stay the same height in a row.	Loose

The defaults tighten as headings grow and loosen as they shrink, which is what keeps a large display line from looking gappy and a small heading from looking cramped. If you switch the heading face to something with a tall x-height, loosen Heading 1 and Heading 2 by one step before changing anything else.

Letter spacing

Three named steps again. On headings, Tight is −0.045em, Normal is −0.025em, and Loose is 0. The Label control runs the other way, because the label voice is small capitals that need air: Tight is 0.02em, Normal is 0.05em, Loose is 0.08em.

Setting	What it does	Default
Heading 1	Tracking on the largest headings and the display type derived from them.	Normal
Heading 2	Tracking on section titles.	Normal
Heading 3	Tracking on sub-section titles.	Normal
Heading 4	Tracking on card and panel headings.	Normal
Heading 5	Tracking on small headings.	Normal
Heading 6	Tracking on the smallest heading level.	Normal
Label	Tracking on everything in the mono label voice, covering section eyebrows, small detail lines, size tags, and buttons set in that font. One control, so they cannot drift apart.	Normal

Heading tracking is negative by design: Lapels’ default heading face is a serif that sets loosely, and pulling it in is what gives the display type its weight. On a condensed or already-tight face, move headings to Loose rather than leaving them at −0.025em.

Case

Each of Heading 1 through Heading 6 takes Default or Uppercase, and all six ship on Default.

Uppercase headings are worth thinking about twice in this theme, because the label voice is already uppercase everywhere. Capitalizing headings on top of it removes the contrast between the two voices, and a page where the eyebrow, the heading, and the button are all capitals reads as one flat register rather than a hierarchy. If you want an uppercase heading, take one level rather than all six.

Related: Colors · Buttons and corners · Lapels support replies within 12 hours.