Type and margin settings Defaults for h1-h6 elements

The HTML spec provides information about the default styles for the heading elements. Find below, a visual reference of the default font-sizes and margins for each heading element. The default type-scale starts at 2em and steps down to .67em. The background color on each heading is to help visualize the margins between elements.

font-size: 2em Default h1 size

font-size: 1.5em Default h2 size

font-size: 1.17em Default h3 size

font-size: 1em Default h4 size

font-size: .83em Default h5 size

font-size: .67em Default h6 size

Defaults for nested <h1> elements

If an h1 has a parent element of aside, article, aside, or section, it will change the default font-size and margin as shown below. Just like the default heading type-scale, these sizes start at 2em and step down to .67em with the margins starting at .67em and step up to 2.3em.

font-size: 2em Default h1 font-size: 1.5em Default h1 style nested once font-size: 1.17em Default h1 style nested twice font-size: 1em Default h1 style nested thrice font-size: .83em Default h1 style nested four times font-size: .67em Default h1 style nested five times Shared Styles

Note that the below styles are shared by headings h1-h6. Since they default to display: block, that also means they will default to have a width that is 100% of their parent element.

h1, h2, h3, h4, h5, h6 { display: block; margin-start: 0; margin-end: 0; font-weight: bold; } All Styles

Note that these are the typical defaults for heading elements recommended for browsers by the html spec.

h1 { display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-before: 0.83em; margin-after: 0.83em; margin-start: 0; margin-end: 0; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; font-weight: bold; } h4 { display: block; margin-before: 1.33em; margin-after: 1.33em; margin-start: 0; margin-end: 0; font-weight: bold; } h5 { display: block; font-size: .83em; margin-before: 1.67em; margin-after: 1.67em; margin-start: 0; margin-end: 0; font-weight: bold; } h6 { display: block; font-size: .67em; margin-before: 2.33em; margin-after: 2.33em; margin-start: 0; margin-end: 0; font-weight: bold; } Reference

Find additional references about html heading elements within the spec.

• HTML Spec h1
• HTML Spec h2
• HTML Spec h3
• HTML Spec h4
• HTML Spec h5
• HTML Spec h6