If you build a website or write content, you often ask “What is the size of H1, H2 and H3?” This article will explain it simply. You will learn typical sizes, how to set them in CSS, and good practices for headings. All in simple English.
We also include a table with size suggestions, tips, and common mistakes to avoid. Let’s begin. For more insights on startup tech and digital growth, explore the Rteetech homepage.
What are H1, H2 and H3 tags
H1, H2 and H3 are heading tags in HTML. They help you organize content. H1 is the top title, H2 are main section titles, H3 are sub-sections under H2. (MDN Web Docs)
These headings are more than style,they carry meaning. Search engines and screen readers use them to understand your content structure.
You do not assign size by the tag itself; sizes come from CSS (style rules). The tag gives semantic meaning, while CSS defines how big it looks.
Why Heading Size Matters
Heading size matters because it creates structure, clarity, and flow in your website or content. When users visit your page, they do not always read everything they scan.
A clear difference between your H1, H2, and H3 helps them instantly understand what is most important and what’s a subtopic. If all headings look the same size, visitors can feel lost or confused about where to focus.
A properly sized H1 gives a strong first impression it is your main title, so it should stand out and grab attention. H2 headings divide your content into sections, guiding readers smoothly through different topics. H3 headings break down those sections into smaller, easy-to-read parts. Together, they make your page look clean, organized, and professional.
From an SEO perspective, correct heading sizes also play an indirect but powerful role. Search engines like google use heading tags to understand your page’s structure and content hierarchy.
When your headings are clear and sized properly, they improve user experience, and that can boost your ranking. For mobile users, heading size is even more important. Text that is too large can make a page hard to scroll, while text that is too small can be difficult to read.
A balanced and responsive heading size ensures everyone on any device can enjoy your content easily. In short, heading size is not just about design, it is about communication. It helps readers understand, search engines index better, and your website looks visually appealing.
Typical size suggestions for H1, H2 and H3
Below is a table with common size ranges for headings. These are suggestions. You may adjust for your design, but keep the hierarchy (H1 > H2 > H3).
| Heading tag | Suggested font size (desktop) | Suggested mobile size | Notes |
| H1 | 28px – 36px (or 2.0rem) | 24px to 30px | Main title of page |
| H2 | 22px – 30px (or 1.5rem) | 20px to 26px | Section headings |
| H3 | 18px – 24px (or 1.2rem) | 16px to 20px | Subsection headings |
These ranges align with many guides and blog best practices. (Linkilo).You can also use relative units like rem or em so sizes adjust more cleanly across devices.
How to set sizes in CSS
Here is how you write CSS to define the size of H1, H2 and H3:
h1 {
font-size: 2.0rem; /* e.g. ~32px */
font-weight: bold;
}
h2 {
font-size: 1.5rem; /* e.g. ~24px */
font-weight: bold;
}
h3 {
font-size: 1.2rem; /* e.g. ~19.2px */
}
You may also add adjustments for mobile using media queries:
@media (max-width: 768px) {
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
}This ensures H1, H2 and H3 remain readable on smaller screens.
Best practices: What to avoid and what to follow
- Use only one H1 per page. The H1 should reflect your page’s main topic. (Momentic Marketing)
- Do not skip levels. Do not go from H1 to H3 without H2.
- Do not use heading tags just to increase font size. Use CSS for size. Heading tags should reflect structure, not style.
- Be consistent across your site. Make sure H2 on one page has a similar size to H2 elsewhere.
- Use relative sizes (rem/em) rather than absolute pixels, so text scales well on devices.
- Avoid making H2 bigger than H1 that breaks the visual hierarchy. (Webmasters Stack Exchange)
How heading size affects SEO and accessibility
Search engines care more about heading structure than the visual size. They want to see H1, then H2, H3 hierarchies. (Conductor). Screen readers use headings to let users navigate. If you misuse heading tags or sizes, accessibility suffers. (Accessibility at Penn State). A user who scans your page should instantly see which texts are main and which are details. Good heading sizes support that.
Examples of heading size use
Here are some simple examples:
- On a blog post, the title is <h1>, done in 34px. Subsections are <h2> with 24px, and for smaller sub-parts <h3> with 20px.
- On a landing page, the hero heading might be large (36px), then features listed with <h2> at 26px, and details under each feature with <h3> at 20px.
In both cases, H1 > H2 > H3 in size, and the structure is logical.
Common mistakes and how to fix them
Mistake 1: H2 is nearly same size as H1
Fix: Reduce H2 size or increase H1 so the difference is clear.
Mistake 2: Using font tags or inline sizes instead of CSS
Fix: Move all size styling to CSS (external style sheet), keep HTML semantic.
Mistake 3: Skipping heading levels (H1 → H3)
Fix: Always use H2 before H3 to keep hierarchy clear.
Mistake 4: Multiple H1 tags on one page
Fix: Use only one H1 that describes the page’s main topic.
Mistake 5: Too small heading sizes on mobile
Fix: Add media queries to reduce or adapt sizes for mobile.
Table summary of size rules
| Rule | Description |
| One H1 per page | Only one main title |
| Hierarchical order | H1 → H2 → H3 (do not skip) |
| CSS for size | Use style, not tag, to set size |
| Clear size gap | H1 > H2 > H3 visually |
| Responsive design | Adjust sizes for mobile |
| Consistency | Same heading sizes across pages |
| Semantic use | Heading tags must match structure |
| Accessibility | Helps screen readers and SEO |
Final Thoughts
Knowing what is the size of H1, H2 and H3 is key for building good websites. The tags give structure, CSS gives size. Use one H1, followed by H2 and H3. Always set sizes in style rules, not by misusing tags. Make sure sizes are clear, responsive, and consistent.
If you follow the suggestions in this guide, your pages will be clean, readable, and optimized. And you will better control both design and SEO. If you like, I can also send you ready CSS templates for headings or show how to test heading sizes. learn more about our SEO for business growth strategies instead of just “Rteetech LCC”.
FAQs
What is the size of the H1 tag by default?
Default size depends on the browser, but often 2rem (32px) unless overridden in CSS.
What size should H2 be in relation to H1?
H2 should be noticeably smaller than H1, e.g. H1 at 32px and H2 at 24px.
Can I use H3 without H2?
No, it is better to maintain order, do not skip H2, use H3 under H2 only.
Are heading sizes important for SEO?
Sizes have little direct SEO effect, but proper structure (H1, H2, H3) helps SEO.
Should heading sizes be fixed in pixels?
Better to use relative units (rem or em) so headings scale across devices.
How many H2 and H3 should I use?
You can use multiple H2s for sections and use H3s as needed under those sections.
Does changing visual size change the heading tag role?
No. You must use the correct <h1>, <h2>, <h3> tags for structure; style doesn’t replace semantics.
Can headings confuse screen readers if sizes are wrong?
Yes. Wrong structure or misuse of tags hurts accessibility more than size alone.
