The Lumos typography system relies heavily on variables to keep type styles consistent across all pages of the site. The Typography variable collection will hold the raw values used for your type system (fonts, font weights, sizes, line heights etc). And the Text Style collection will hold your individual typography styles.

How to setup your typography

1. Upload the fonts to Webflow

Note the font weights for each one

image.avif

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.

image.avif

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.

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

https://www.fontsquirrel.com/tools/webfont-generator

</aside>