HTML headings provide visual and semantic hierarchy for website content. The table below shows the current visual sizing differences between heading levels:
| Heading level | Forty Acres | Bootstrap framework |
|---|---|---|
Heading 1 (unstyled)
| font-size: 3.0625rem; line-height: 1.143; | font-size: 2.5rem; line-height: 1.2; |
Heading 2 (unstyled)
| font-size: 2.4375rem; line-height: 1.154; | font-size: 2rem; line-height: 1.2; |
Heading 3 (unstyled)
| font-size: 1.5625rem; line-height: 1.25; | font-size: 1.75rem; line-height: 1.2; |
Heading 4 (unstyled)
| font-size: 1.25rem; line-height: 1.25; | font-size: 1.5rem; line-height: 1.2; |
Heading 5 (unstyled)
| font-size: 1rem; line-height: 1.5625; | font-size: 1.25rem; line-height: 1.2; |
Heading 6 (unstyled)
| font-size: 0.8125rem; line-height: 1.385; | font-size: 1rem; line-height: 1.2; |
Paragraph text
| font-size: 1.125rem; margin-bottom: 1.5em; | font-size: 1rem; margin-bottom: 1rem; |
ut-headline utility class
| font-size: 1.25rem; line-height: 1.6875; | |
ut-headline--underline utility class
| font-size: 1.25rem; line-height: 1.6875; | |