Typography
Last updated
Was this helpful?
Last updated
Was this helpful?
Note the font weights for each one
Not sure how much to trim off the top & bottom for your font family? Try this tool to find your values.
Variable names should exactly match their values
Here the font size is 2.5rem on mobile and 4rem on desktop. Press the Command key and click behind each number to multi-edit or press the Command D keys to select all matching numbers.
https://youtu.be/uP6EVws6Pmo?si=Z6eRaa62P0eqwBaQ&t=213
All fonts will stop scaling up at a 90rem screen size and stop scaling down at a 20rem screen size. Adjust these numbers if needed under screen-size/max and screen-size/min
Apply a family, weight, line height, text trim, letter spacing, text transform, and margin to each text style.
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 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? Try this tool to find your values.
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.
We can replicate the text trim effect in Figma under "Type settings" > "Vertical trim"