Skip to content

Typography in Beyond

Edit theme → Theme settings → Typography

Beyond Typography in Theme settings

Heading, navigation, and body fonts, plus a type size ladder for each role.

Theme settings → Typography

Fonts

  • Heading font
  • Navigation font
  • Paragraph font

Fleur-style listings often use a distinctive heading face with a simple paragraph font. Keep navigation with one of the two. Three competing families make story pages appear cluttered.

A custom font

See Add a custom font for a file or Google Font outside the picker.

Type roles

Banner, featured, section, and block headings include Mobile size.

  • Banner heading: slideshow and hero titles
  • Featured heading: large titles, useful on Brand statement
  • Section heading: section titles
  • Block heading: card titles and About us block titles
  • Navigation / Sub navigation: header and dropdowns
  • Buttons: button labels
  • Overline: small labels (“Our brand”, “The studio”)
  • Paragraphs: body copy
  • Featured paragraph: copy on media

Overlines are how Beyond story sections label a thought without another huge heading. Keep overline size small and, if you use uppercase, keep it there, not on paragraphs.

Check mobile

Brand statement headings are often long. Set Mobile size so a manifesto line does not fill the screen before the products appear.

Letter spacing and uppercase

A little heading tracking fits editorial Beyond/Fleur layouts. Wide tracking on paragraphs hurts reading length on About pages.

Text on images

Image darkness, Text shadows, and Translucent box around text protect overlay type on banners. About us blocks can mix media and copy; darkness still applies when text sits on the image.

Ask Sidekick

Open Sidekick from the theme editor toolbar (top right, next to the device preview icon), or press ⌘. (Ctrl+. on Windows). Ask it for a font pairing that fits your brand.

"Suggest a Heading font and Paragraph font pairing for an editorial, story-led brand, and whether Navigation should match the heading or the paragraph font."

It previews the pairing before you apply anything to Theme settings → Typography, faster than comparing font libraries by hand. If you're deciding whether a custom font is worth adding at all, it's also a reasonable place to ask.

Opening Sidekick from the theme editor toolbar

Troubleshooting

  • Brand statement looks huge: lower Featured heading or Section heading, not the section’s padding. See Brand and story sections.
  • About us block titles are huge: those use Block heading.
  • A manifesto fills the phone: lower Mobile size on Featured or Section heading.
  • A header label is the wrong words: default theme content.