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.

HEADINGS

A Quick Reference on Default stylings for h1-h6 elements