Headers size and usage recommendations

Headers size and usage recommendations in Tailwind CSS

Use headers to create a clear hierarchy and structure in your content. Stick the header level to predefined Tailwind CSS classes sizes(e.g., text-xl to text-4xl) to maintain consistency and visual appeal.

Here are the recommended font sizes:

Tag	Recommended Class	Font Size (rem)	Font Size (px)
`h1`	`text-4xl`	`2.250`	`36`
`h2`	`text-3xl`	`1.875`	`30`
`h3`	`text-2xl`	`1.500`	`24`
`h4`	`text-xl`	`1.250`	`20`
`h5`	`text-lg`	`1.125`	`18`
`h6`	`text-base` (bold)	`1.000`	`16`
`p`	`text-base`	`1.000`	`16`
`h7`*	`text-sm` (uppercase)	`0.875`	`14`

Tag	Recommended Use Case	Strategy
`h1`	The Page Title	The main topic. Use only one per page. Essential for SEO.
`h2`	Section Headings	Major chapters of your content (e.g., "Features," "Pricing").
`h3`	Sub-sections	Breaks down an `h2` into smaller parts (e.g., "Monthly" under "Pricing").
`h4`	Group Headings	Labels for UI cards, sidebar widgets, or small content blocks.
`h5`	Detail Labels	Micro-headers for specific metadata or very small card titles.
`h6`	Captions/Legals	The lowest level, often used for "Related Posts" or footer headings.

Spacing between headers

In typography, the space above a header (top margin) should always be larger than the space below it (bottom margin). This creates "proximity," visually grouping the header with the content it belongs to.

The "2:1 Rule" for Headings: make the top margin roughly double the bottom margin.

Tag	Top Margin (MT)	Bottom Margin (MB)	Tailwind Classes
H1	`mt-0`	`mb-6`	`mt-0 mb-6`
H2	`mt-12`	`mb-6`	`mt-12 mb-6`
H3	`mt-10`	`mb-4`	`mt-10 mb-4`
H4	`mt-8`	`mb-4`	`mt-8 mb-4`
P (Body)	`mt-0`	`mb-6`	`mb-6`

Website name

Recommended Font Sizes for the Website Name

If you are not using a header tag and need to style a <div> or <span> for your site name, use these Tailwind-equivalent sizes:

General Rule: The site name should be visually distinct but smaller or equal in visual weight to the page's main <h1> title so the user knows exactly where they are

Device	Recommended Tailwind Class	Equivalent Pixels
Mobile	`text-xl` to `text-2xl`	20px - 24px
Desktop	`text-2xl` to `text-3xl`	24px - 30px

For SEO

Homepage: Google sees <h1>MyBrand</h1>. This tells the crawler that "MyBrand" is the most important topic of the root domain.
Inner Pages: Google sees <span>MyBrand</span> in the nav, but finds <h1>Our Services</h1> in your main content. This prevents "keyword cannibalization" where your brand name competes with your actual page topics.

Switching tag code for Next.js 14

Code: Logo.jsx

// components/Logo.jsx
import Link from 'next/link';
import { useRouter } from 'next/router';

const Logo = () => {
    const router = useRouter();

    // Check if current path is exactly the homepage
    const isHomePage = router.pathname === '/';

    // Dynamic tag: h1 for SEO on home, span for inner pages
    const Tag = isHomePage ? 'h1' : 'span';

    return (
        <Link href="/" className="inline-block">
            <Tag className="text-xl font-bold tracking-tight text-gray-900 md:text-2xl lg:text-3xl">
                MyBrand<span className="text-indigo-600">.</span>
            </Tag>
        </Link>
    );
};

export default Logo;

Code: Header.jsx

// components/Header.jsx
import Logo from './Logo';

export default function Header() {
    return (
        <header className="flex items-center justify-between px-6 py-4 bg-white border-b border-gray-100">
            <Logo />
            <nav className="hidden md:flex space-x-8 text-sm font-medium">
                <a href="/features" className="hover:text-indigo-600">Features</a>
                <a href="/pricing" className="hover:text-indigo-600">Pricing</a>
            </nav>
        </header>
    );
}

Code: Layout.jsx

// components/Layout.jsx
import Header from './Header'; // This should contain your Logo component

export default function Layout({ children }) {
    return (
        <div className="min-h-screen bg-gray-50 text-gray-900">
            <Header />
            <main className="container mx-auto px-4 py-8">
                {children}
            </main>
            <footer className="p-4 text-center text-sm text-gray-500">
                © {new Date().getFullYear()} MyBrand. All rights reserved.
            </footer>
        </div>
    );
}

Code: _app.js

// pages/_app.js

import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}