Naming

All our Webflow typography follows the same class naming method. Firstly the type of typography is declared (e.g heading, text, label etc) followed by a numerical value. The lowest number represents the smallest size in your type scale and the largest number represents your largest. 

Unlike other typography class naming approaches (h1, h2 OR small, medium, large) this method offers a few benefits:

1. The flexibility to add additional "in-between" or "after the fact" values as the project expands.
2. The flexibility to add larger sizes without compromising the logical numeric naming flow.
   

Application 

Basic Components

Apply the class to either:

1. The parent div (.Card-20 Title .Heading-50)
2. Directly to the text element. (.Heading-50)

By applying the class to the parent div it allows for custom overrides in only the one instance. This can be handy when working with responsive typography.

Advanced Components

For components that are in the header or footer style the typography attributes directly inside the advanced component. E.g (.Footer Nav Links)

3. Labels

Use labels to add better context. They are useful when positioned above abstract headings or content.

Application

Apply the class directly to the text element or on the parent component.

Overview

The video above demonstrates how to set up your project typography using the built-in style guide in our starter template. We believe it's best to have a typography scale that increases in small increments rather than big jumps. We often like to use a type scale based on a 1.250 Major Third (Type Scale).