Typography
SML uses a consistent typography system built around semantic HTML, Webflow variables, and responsive font sizes.
Headings
SML provides six heading styles, from H1 to H6, with their font sizes and line heights managed through Webflow variables.
Heading tags should reflect the structure of the content rather than its visual appearance.
For example, an H2 can use the visual styling of H3 without changing its semantic importance in the document.
This allows developers to maintain a logical heading hierarchy while matching the typography used in the design.
Text sizes
Regular text uses a separate scale, ranging from text-xxl to text-xs.
These styles can be applied regardless of an element's HTML tag. For example, an introductory paragraph might use text-xl, while standard body copy uses text-m.
The sizes are managed centrally through Webflow variables. To configure the typography scale, see the Variables documentation.
Accessibility and browser font-size preferences
Visitors can change their browser's default font size to make text easier to read.
SML respects this preference by increasing typography when the browser's default font size is larger than 16px.
Unlike viewport-based scaling, which affects the entire layout, this additional adjustment applies specifically to typography. Viewport-based layout scaling is covered separately in the Responsive documentation.
Detecting the browser preference
SML uses a CSS variable to calculate how much the browser's default font size exceeds 16px.
body {
--sml-font-increase: max(0px, calc(1em - 16px));
}
With the browser's default font size set to 16px, the result is 0px and no additional adjustment is applied.
If a visitor increases the default font size to 20px, the variable becomes 4px.
The calculation never produces a negative value, so smaller browser font-size preferences don't reduce SML's configured typography sizes.
Proportional font-size adjustments
SML uses different growth factors for headings and regular text to maintain a balanced hierarchy when typography increases.
For example, H1 uses a factor of 0.5, while text-m uses a factor of 1.
If the browser's default font size increases from 16px to 20px, the additional increase is:
- H1: Original size + (4px × 0.5) = original size + 2px.
- text-m: Original size + (4px × 1) = original size + 4px.
The factors are configured centrally in SML's CSS.
Calculated typography variables
The typ collection combines the design values with the accessibility adjustment.
For example, the H1 calculation follows this principle:
font-size: calc(
var(--h1-size) +
var(--sml-font-increase) *
var(--sml-h1)
);
The example uses a simplified name for the design-size variable. In Webflow, this references H1 — size.
Developers can therefore adjust the typography through Webflow variables without changing the accessibility calculation.
Minimum body text size
SML maintains a minimum font size of 16px for regular body text.
The calculated text-m variable uses the larger of the configured font size or the 16px minimum, including any additional increase from the browser preference.
Smaller styles such as text-s and text-xs remain available for supporting text where smaller typography is appropriate.
Rich text
SML applies the same typography system to Webflow Rich Text elements.
Paragraphs can use the text size assigned to the Rich Text wrapper, while headings retain their corresponding heading styles.
For example, applying text-s to a Rich Text wrapper changes the size of its paragraphs without affecting the headings.
This is useful for articles, descriptions, and CMS-driven content.
