Headings
Learn about headings, and how to best use them in the Base System
1.0 Headings
Headings are an essential part of structuring content on a webpage, and in Webflow, you can use heading elements (H1-H6) to define the hierarchy of your content. The way these headings are used has important SEO implications, and so it's important that they are used most effectively.
2.0 HTML Tags (All H1-H6)
Headings in general should be styled by the global HTML tag inside of webflow. Tags let you change the default styling of text elements, like headings, paragraphs, and links. Any stylistic changes you apply to a tag or a class will affect all related elements without having to update them individually. You can learn more about using tags in Webflow here.
| HTML Tag | Font Size | Line Height | Font Weight |
|---|---|---|---|
All H1 Headings | 64px | 1.2 | Bold |
All H2 Headings | 56px | 1.2 | Bold |
All H3 Headings | 48px | 1.4 | Bold |
All H4 Headings | 40px | 1.5 | Bold |
All H5 Headings | 32px | 1.5 | Bold |
All H6 Headings | 24px | 1.5 | Bold |
The Base System styles only provide a starting point, and you can adjust these to suit any styles need for your project. Clone the starter project here
3.0 Heading Classes (H1-H6)
We recommend applying your heading styles to not only the tags, but also to classes that can be used to apply these styles to non global elements. By default, these global styles are also added to the starter project as heading classes.
| Class Name | Font Size | Line Height |
|---|---|---|
H1 Heading | 64px | 1.2 |
H2 Heading | 56px | 1.2 |
H3 Heading | 48px | 1.4 |
H4 Heading | 40px | 1.5 |
H5 Heading | 32px | 1.5 |
H6 Heading | 24px | 1.5 |
4.0 General Usage
4.1 Element Type
Spacing elements use a Div Block, and are wrapped around elements that require spacing. For example, if you need to space a H1 Heading and Paragraph 16px apart, you can wrap both these elements in a single Div Block with the spacer class Column Regular
4.2 Class Naming
Class naming for spacing follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.
Sections: Default sections use descriptive names based on the top and bottom padding.
Example:
Column Large,Column Regular,Row Small
Custom Sections: Use section as a suffix to the parent category
Example:
Testmonial Column Small,Pricing Feature Row
Last updated
