This guide will explain how the base typography system is set up, why certain choices were made, and how you can extend or modify those styles to fit your needs.
The default project includes a preconfigured typography system. These base styles have been applied using a combination of classes and global selectors, giving you a consistent, scalable starting point without requiring you to style every text element from scratch.
The Typography System
A Typography board is included in the default project. You can find it by switching from Site to Boards in the Navigator.
This board visually displays every heading style (
H1–H6) along with some paragraph styles like lead, large, small, and muted. It’s a central place to review and edit your typography to match your brand, ensuring consistency across your entire site.Fluid Type
Headings use a fluid typography system, meaning their font sizes scale automatically between breakpoints for a smoother, more responsive experience.
Paragraph styles like lead, large, small, and muted use fixed sizes and do not scale fluidly.
To adjust a heading size, select the style you want to edit and update its font-size values for desktop and mobile. The fluid scaling will interpolate between them.
Consistent Vertical Rhythm
By default, text elements have a top margin equal to one line height. This creates predictable spacing and a consistent rhythm between blocks of text.
When a typographic element is the first child of its container, this top margin is automatically removed. That prevents unwanted spacing at the top of sections while preserving consistent flow between stacked elements. It’s a subtle system that keeps layouts clean and balanced without extra work.
Fonts and Global Font Settings
You can assign fonts at any level—on an individual text element, on an auto-applied class, or globally.
To set a font globally, select the Site Layout, open the typography section in the properties panel, and choose your desired font. Google Fonts and a set of default web-safe fonts are available out of the box, and searchable directly in the font selector.
For more specific font control—like using one font for paragraphs and another for headings—you can set fonts on the auto-applied
h1, h2, or paragraph classes individually, or use your own custom classes to define these variations.Summary
The typography system in Clutch gives you a thoughtful foundation to work from. Styles are already applied to headings and paragraphs, fluid type is enabled by default, and vertical rhythm is handled automatically to keep spacing consistent.