Issue with Style Guide: Headline Changes Affecting H2 Styles

Markus K. · 2025-06-12 12:04:08.071198+00

is there a bug in the style guide? When I change the headlines, all styles are connected to H2?

Issue with Style Guide: Headline Changes Affecting H2 Styles | Relume Community

5 comments

· Sorted by Oldest

Matt J.
·
Markus K. naw, just semantics - you should only have 1 h1 on a page. The section you are referring to specifically is just styling classes - so the actual tag doesn't matter since you can add that class to anything and it'll inherit those styles.
Matt J.
·
its the pink tags that you'll want to be looking at h1, h2, h3 etc and styling those correctly
Matt J.
·
More on that here: https://www.relume.io/resources/docs/customizing-the-relume-style-guide-for-webflow#headings
Markus K.
·
I am still confused why the style headings are not changed when I add the new font
Matt J.
·
Markus K. yeah so there are two ways to style a heading. You can target the TAG (h1, h2, h3, h4 etc) or you can target a class. When you target a class, you would need to go to each class to make style changes just like any other class. If you are wanting all headings to be the same font, or all h1's to be a specific font, then you would want to style the tag - target the tag - h1, h2, h3. Styling "tags" in Webflow requires extra steps. You'll want to ensure that you are selecting a PINK tag. Classes in Webflow are blue, and tags are pink. When you select a tag like h1, h2, h3, and go to the style selector top right, you'll notice a pink "All H1 Headings" tag. Click on that, and then begin styling. Ensure that you are always selecting this pink tag when selecting an h1, h2, h3 tag. You'll know that you did this wrong when you start to see generic classes applied to your h1, h2, h3 tags. Why do we have these distinctions? Web design is catering to two audiences - humans, and search engines. Search engines are looking at tags, while humans are looking at visual styles (sometimes search engines look at visuals too). So if we want an h1 tag to be smaller text (SEO), and the h2 tag to LOOK like an h1, then we'd use the heading-style-h1 class on an h2 tag. So now our page is SEO optimized, but human friendly. I mostly wrote this all out like this versus a quick loom for our AI bot here in Slack but happy to do a quick loom if this is still not tracking. I know it took me several attempts to fully understand it.

Matt J.
·
Markus K. naw, just semantics - you should only have 1 h1 on a page. The section you are referring to specifically is just styling classes - so the actual tag doesn't matter since you can add that class to anything and it'll inherit those styles.
Matt J.
·
its the pink tags that you'll want to be looking at h1, h2, h3 etc and styling those correctly
Matt J.
·
More on that here: https://www.relume.io/resources/docs/customizing-the-relume-style-guide-for-webflow#headings
Markus K.
·
I am still confused why the style headings are not changed when I add the new font
Matt J.
·
Markus K. yeah so there are two ways to style a heading. You can target the TAG (h1, h2, h3, h4 etc) or you can target a class. When you target a class, you would need to go to each class to make style changes just like any other class. If you are wanting all headings to be the same font, or all h1's to be a specific font, then you would want to style the tag - target the tag - h1, h2, h3. Styling "tags" in Webflow requires extra steps. You'll want to ensure that you are selecting a PINK tag. Classes in Webflow are blue, and tags are pink. When you select a tag like h1, h2, h3, and go to the style selector top right, you'll notice a pink "All H1 Headings" tag. Click on that, and then begin styling. Ensure that you are always selecting this pink tag when selecting an h1, h2, h3 tag. You'll know that you did this wrong when you start to see generic classes applied to your h1, h2, h3 tags. Why do we have these distinctions? Web design is catering to two audiences - humans, and search engines. Search engines are looking at tags, while humans are looking at visual styles (sometimes search engines look at visuals too). So if we want an h1 tag to be smaller text (SEO), and the h2 tag to LOOK like an h1, then we'd use the heading-style-h1 class on an h2 tag. So now our page is SEO optimized, but human friendly. I mostly wrote this all out like this versus a quick loom for our AI bot here in Slack but happy to do a quick loom if this is still not tracking. I know it took me several attempts to fully understand it.