Typography

Benefits

• 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 adaptive sizes

Setup

Upload fonts to Webflow

Set the font families and weights (both primary and secondary styles)

font folder in variable panel

Set letter-spacing & line-height variables

Variable names should exactly match their values

Adjust individual font styles from the variable panel

Adjust responsive font size from embed if heading needs more control than the pre-defined adaptive sizes

Mainly used for display headings or special font size units like cqw

For fluid font sizes, try the fluid builder.

Unstyled Heading Tags

Heading tags are not styled by default. This ensures every heading gets a custom class and utility class which is important for being able to rename that utility class later and have it affect everywhere that combo was used throughout the site. It also prevents any unexpected changes when switching the tag type on a heading keeping the heading's style and function separate. Lastly, it takes advantage of inheritance on all font properties so that we can apply a class to a parent if needed instead of always having to apply it directly to the heading. Example: applying the custom class and utility class to the rich text block instead of the heading inside that rich text.

u-rich-text

If we need to quickly add all default heading styles for blog posts, privacy policies, or any other long form content, we can add the u-rich-text class. This works when applied to a rich text element or even a div with regular headings inside. All headings inside will get their default styles again and some bottom margin.

Overriding a text transform variable

To override a text transform variable, click on the variable and then click "Reset value".

Overriding font weight

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.