Option 1: The Modern & Bold Scale (Perfect for Startups and SaaS Websites)
This scale uses a 1.25 ratio (Major Third) to create a striking difference between your headers.
Heading 1 (<h1>): 40px (2.5rem) — Used for the main hero headline.
Heading 2 (<h2>): 32px (2.0rem) — Used for major section titles.
Heading 3 (<h3>): 24px (1.5rem) — Used for sub-sections or feature cards.
Heading 4 (<h4>): 19px (1.1875rem) — Used for sub-sections or feature cards.
Body Text (<p>): 16px (1.0rem) — Standard paragraph text.
Option 2: The Classic & Balanced Scale (Perfect for Blogs, Portfolios, and Business Sites)
This scale uses a 1.20 ratio (Minor Third) for a cleaner, highly readable, and professional look.
Heading 1 (<h1>): 33px (2.06rem) — Used for the main page title.
Heading 2 (<h2>): 27px (1.7rem) — Used for major content headings.
Heading 3 (<h3>): 23px (1.44rem) — Used for mid-level text headings.
Body Text (<p>): 16px (1.0rem) — Standard paragraph text.