Flowkit (Beta)Variables

Typography

The typography system provides consistent text styling using variables to control size, spacing, and hierarchy.

The base typography variables define the fundamental text properties used throughout the project. These variables are inherited by the default Paragraph, Text elements, and Body tag.

Base Typography VariableProperty
Base FontFont Family
Base Font SizeFont Size (1rem)
Base Font WeightFont Weight
Base Letter SpacingLetter Spacing
Base Line HeightLine Height
Base Margin BottomMargin Bottom (using em units)
Note
In the Webflow Variables panel, these variables appear exactly as shown in the Properties column above. In the Styles panel, purple color indicates that the property is linked to a variable.
Styles panel with linked variables

Font Family

Font family is applied to text element through the variable. To update the font, make changes in the Variables panel.

Font VariablesUsage
Heading FontAll H1-H6 Heading and H1-H6 Heading heading selectors
Body FontBody tag, All Paragraph tag, default text, text links
Button FontButton tag, Button class, Tag class, etc.

Headings

Headings tags and classes are sharing the same varables. It helps keep them sync and manage style through the variables panel.

Here’s how variables are applied to the H1 Heading and All H1 Heading tag:

Styles panel with linked variables

Each heading level has its own responsive variables for different breakpoints, following the same pattern.

Subheading

For consistency across the site, Flowkit uses the Subheading class to accompany headings.
It works with any text element and automatically inherits its color, applying a transparent tint:

Paragraph

Similar to headings, All Paragraphs selector, Paragraph class, and its size variations properties controlled through related text variables.

Available paragraph sizes:

  • All Paragraphs
  • Paragraph (default)
  • Paragraph SM
  • Paragraph LG
  • Paragraph XL
  • Paragraph XXL

Default Spacing

Headings and paragraphs have default bottom spacing applied via variables.
For example, the H1 Heading and All H1 Heading use the variable H1 Margin Bottom
The same pattern applies to paragraphs using Base Margin Bottom.

To override this spacing, use a margin utility class such as:
[Utility] Margin Bottom 0

See the full list of margin utilities here.

Utility classes

Also check how to use utility classes to override the default behavior of typography classes:

Best Practices

  • Use variables for consistency — Modify variables when possible instead of creating custom styles.
  • Choose appropriate sizes — Use Paragraph SM for small text, Paragraph LG / XL / XXL for emphasis.
  • Maintain readability — Ensure text remains readable at all screen sizes.
  • Preserve hierarchy — Maintain clear distinction between headings and paragraph text.
  • Semantic order — Keep the hierarchy in tag usage (e.g., h1 > h2 > h3 > p).
  • One H1 tag per page — Only one h1 tag per page. If you need multiple visually styled H1s, apply the H1 Heading class instead.