Typography
Last updated
Last updated
Globally adjust individual styles like line-height or letter-spacing that’s used across the whole system
Easily adjust all typography styles from the variable panel
Select font sizes from a list of predefined fluid sizes
font folder in variable panel
Variable names should exactly match their values
To override a text transform variable, click on the variable and then click "Reset value" or use a text-transform utility class.
To override the default font weight on an element, we can use of the u-weight- utilities classes, or we can directly reference any weight from the font/ variable folder by using custom properties. Font weight should always be linked to a variable to allow for global updates later on if the font ever changes, or if we need to globally change the weights we're using with that font.
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.
By applying a u-text-style- class to any element, it will set any direct children that are h1, h2, h3, h4, h5, h6, p, or blockquote elements to inherit from the parent's font styles.
