EN IT
Home About Learn Blog

Style a Webflow Hero: HTML Tags & Fluid Typography

Beginner 27:16 webflowtypographyclamphtml-tagscombo-classes

Style a Webflow hero the smart way using HTML tags for site-wide defaults, combo classes, and fluid font sizing with clamp() so type scales with the viewport.

Watch on YouTube

Key takeaways

  • HTML tags (Body, All H1 Headings, All Paragraphs…) let you set defaults once and apply them to every element of that type across the whole site — the biggest speed-up in your workflow.
  • The clamp() function gives you fluid type: a minimum, a maximum, and a preferred value that smoothly scales between two viewport widths, so you design once instead of per breakpoint.
  • There should be exactly one H1 per page — it's the main title that tells users and search engines what the page is about.
  • A combo class layers a variation on top of a base class instead of copying it, so shared styles stay linked and you only maintain them in one place.
  • Relative units carry the fluid idea into spacing: ch caps line length for readability, and em scales gaps and padding with the element's font size.

Video chapters

  1. 00:00 The Body (All Pages) tag: intro to HTML tags
  2. 03:32 How to upload a Google Font
  3. 05:40 Fluid font sizing with clamp()
  4. 10:38 Heading hierarchy and the All H1 Headings tag
  5. 14:19 The All Paragraphs tag and ch units
  6. 16:32 Combo classes and more on inheritance
  7. 23:24 Flex gap and em units
  8. 25:03 Styling the image wrapper + preview mode
  9. 26:24 Styling the social proof wrapper
  10. 26:59 Outro

By the end of this lesson your hero section goes from a bare skeleton to a polished, fully styled block — and you’ll do it the professional way, setting styles that ripple across the entire site instead of element by element. The stars of the show are HTML tags, fluid typography with clamp(), and combo classes.

The theme running through all of it is doing work once. Set the body font once and every element inherits it. Define a heading’s size once on its tag and every heading of that level follows. Build a button style once and reuse it with small variations. That discipline is the difference between a site you can maintain and one you dread touching.

We also lean hard into fluid design — type and spacing that scale continuously with the screen rather than snapping between fixed sizes. It looks like an advanced topic, but once you see the pattern, you’ll reach for it everywhere.

How it works

HTML tags are the foundation. Select the body element and you can open its “Body (All Pages)” tag; set the background color, font family, font color, and base font size there, and every page inherits them because every element is a child of the body. The same idea applies to “All H1 Headings”, “All Paragraphs”, and so on — style the tag once and every element of that type updates. That’s the single biggest accelerator in a Webflow workflow.

For type that feels alive, we use clamp(). It takes three values — a minimum, a preferred value, and a maximum — and the preferred value scales smoothly as the viewport moves between two widths (here, 375px up to 1920px). The reusable preferred value looks like 14px + 4px * ((100vw - 375px) / (1920px - 375px)): it’s 0 at the small width and 1 at the large one, so the size glides between your min and max. To reuse it for another element, you only swap the min, the max, and the difference between them. One formula, fluid everywhere.

Combo classes solve the “same but slightly different” problem. Our two buttons share a border radius, padding, and font — only the colors differ. Instead of duplicating the button class (which creates an independent copy you’d have to keep in sync), we add a combo class like cc-dark on top. It inherits everything from button and overrides just the colors, so a later change to the base still flows through. This is also where that orange label finally makes sense: click it and Webflow tells you exactly where a value is inherited from — a base class or an HTML tag.

The fluid mindset carries into spacing too. The ch unit caps a paragraph at a readable line length (max-width: 56ch), and the em unit scales gaps and padding with the element’s font size (a 1.2em gap grows and shrinks along with the text). Because the font sizes are already fluid, the spacing stays proportional automatically.

How to use it

  1. Set body defaults. Select the body, open the Body (All Pages) tag, and set the background color, font color (white here), your Google font (upload it from Site Settings → Fonts, only the weights you need), a base font-size using the clamp() formula above, and line-height: 1.5.
  2. Style the label and heading. Give the label its own class and color. On the All H1 Headings tag, set font-weight: 500, line-height: 1, a clamp() font size (min 32px, max 72px, difference 40), and zero top/bottom margins.
  3. Style paragraphs once. On the All Paragraphs tag, set the font color and remove the bottom margin. Give the hero subheading a max-width: 56ch so the line length stays readable.
  4. Build the reusable button. Give the primary button the generic class button with padding (12px / 16px), border-radius: 14px, a background color, and a 1px border in the same color (so both buttons end up identical in size).
  5. Vary it with a combo class. Select the second button, add the combo class cc-dark, and override just the background and border colors. Everything else stays linked to button.
  6. Space with em. Set the heading wrapper’s flex gap to 1.2em so spacing scales with the fluid font size. Do the same for the social-proof wrapper.
  7. Finish the image and check it. Cap the image wrapper’s max-width (around 1200px) and set its left/right margins to auto to center it. Open Preview mode (the play icon) to confirm the result behaves like the live site.

Your hero is now styled and fluid. Next up, we reuse everything we’ve built to create the features section — and meet Webflow components.

Resources

Frequently asked questions

What are HTML tags in Webflow and when should I use them?
HTML tags let you set default styles for a whole type of element — the body, every H1, every paragraph — in one place. Use them for anything that should look consistent site-wide, like your base font, colors, and heading sizes.
How does the clamp() function create fluid typography?
clamp() takes a minimum, a preferred value, and a maximum. The preferred value scales smoothly with the viewport, while the min and max stop the text from ever getting too small or too large — so type adapts continuously instead of jumping at breakpoints.
What's the difference between duplicating a class and adding a combo class?
Duplicating creates a brand-new, independent class, so later edits to the original won't carry over. A combo class stacks a variation on top of the base class and keeps inheriting from it, so shared styles stay in sync and you only maintain them once.
What does the ch unit do in Webflow?
One ch is roughly the width of the character 0 in the element's font. Setting a max-width like 56ch caps a paragraph at a comfortable line length for reading, regardless of screen size.

← Back to the course