Typography
Last updated
Last updated
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
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 embed automatically applies our line height trim to every u-text-style- class and to every text element inside our u-rich-text. 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"
When using components, we'll often add a rich text element just for the section heading and another rich text element just for the section paragraph since rich text allows the client to bold, italicize, or add links inside the text. By using a separate rich text for each element, it allows us to style them independently. In those cases, we need to ensure the client won't add an image, video, list, or some other non-text element in places that only a single text element should go. By applying any u-text-style- class to the rich text element, it will automatically hide any direct children that are not a h1, h2, h3, h4, h5, h6, p, or blockquote. It will not hide spans, bold tags, or links inside each heading or text element since it only affects direct children.
