Typography
1. Upload fonts to Webflow
Note the font weights for each one
2. Typography variable collection
Set the family, trim top, trim bottom, and weights for each family
Not sure how much to trim off the top & bottom for your font family? Try this tool to find your values.
Set letter-spacing & line-height variables
Variable names should exactly match their values
Update each font size using the Fluid Builder App
3. Text Style variable collection
Apply a font size, line height, letter spacing, text transform, margin, family, weight, trim, and text wrap to each heading size and paragraph size.
Line Height Trim
Line height trim removes the unwanted space from the top and bottom of the text box allowing us to better align text with other elements and create more consistent spacing between text elements regardless of the line height applied to the text element. This code in our Global Styles component automatically applies our line height trim to every u-text-style- class and to every text element tag. Each font family needs a unique trim amount set in the variables panel. Not sure how much to trim off the top & bottom for your font family? Try this tool to find your values.
Display: flow-root
Each u-text-style- class is set to display: flow-root. This helps ensure that the text box hugs the characters when using line height trim.
Figma Text Trim
We can replicate the text trim effect in Figma under "Type settings" > "Vertical trim"
Last updated
Was this helpful?