Lumos
  • Consistency at Scale
  • Docs
    • Breakpointless
    • Class Naming
    • Page Structure
    • Typography
    • Color
    • Grid
    • Flexbox
    • Sizes & Spacing
    • Fluid Responsiveness
    • Components
    • FAQs
  • Resources
    • Cloneable
    • Figma File
    • Component Library
    • Chrome Extension
    • Changelog
    • Showcase
Powered by GitBook
On this page
  • 1. Upload fonts to Webflow
  • 2. Typography variable collection
  • Set the family, trim top, trim bottom, and weights for each family
  • Set letter-spacing & line-height variables
  • Set each fluid font size by using the Fluid Builder App
  • 3. Text Style variable collection
  • Line Height Trim
  • Display: flow-root
  • Figma Text Trim

Was this helpful?

  1. Docs

Typography

PreviousPage StructureNextColor

Last updated 12 days ago

Was this helpful?

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

Set letter-spacing & line-height variables

Variable names should exactly match their values

Set each fluid font size by using the Fluid Builder App

3. Text Style variable collection

Apply a family, weight, line height, text trim, letter spacing, text transform, and margin to each text style.

Line Height Trim

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"

Not sure how much to trim off the top & bottom for your font family? to find your values.

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 page_code_base embed automatically applies our line height trim to every u-text-style- class and to every text element. 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? to find your values.

Some fonts may appear different between Windows and Mac devices. To ensure consistency, first run the font through Font Squirrel's Webfont Generator.

Try this tool
Line height trim
Try this tool
https://www.fontsquirrel.com/tools/webfont-generator