Dev References

Colors

This section has its own page, here.

HTML Heading Sizes

Default HTML heading sizes based on standard browser user-agent stylesheets (assuming a base font size of 16px):

The <h4> heading is the exact equivalent of the normal body font size (1rem or 16px) by default.

Heading

Default Size (em)

Approx. Pixels (px)

Equivalent (rem)

Percentage (%)

<h1> 2em 32px 2rem 200% <h2> 1.5em 24px 1.5rem 150% <h3> 1.17em ~18.7px 1.17rem 117% <h4> 1em 16px 1rem 100% <h5> 0.83em ~13.3px 0.83rem 83% <h6> 0.67em ~10.7px 0.67rem 67%

Default browser styles (User Agent Stylesheets)

Default browser styles (User Agent Stylesheets) vary slightly between Chrome, Firefox, and Safari, but they generally follow the HTML5 specification's suggested defaults.

Here are the standard defaults for June 2026:

1. Headings (<h1> – <h6>)

Headings have bold font-weight and varying margins that increase as the heading level gets smaller (visually creating more space around smaller headings).

Element

Default Font Size

Default Margin (Top/Bottom)

<h1> 2em (32px) 0.67em <h2> 1.5em (24px) 0.83em <h3> 1.17em (18.7px) 1em <h4> 1em (16px) 1.33em <h5> 0.83em (13.3px) 1.67em <h6> 0.67em (10.7px) 2.33em

Padding: 0 for all.
Important Change: As of 2025/2026, browsers (Firefox, Chrome, Safari) are removing the legacy rule that automatically reduced the font size of <h1> when nested inside <section> or <article>. An <h1> is now consistently 2em regardless of nesting.

2. Paragraphs (<p>)

Margin: 1em top and bottom (approx. 16px if font-size is 16px).
Padding: 0.
Display: block.
Note: The margin is relative to the element's own font-size.

3. Other Common Elements

<body>: Default margin is 8px in most browsers (Chrome/Safari/Edge). Firefox often defaults to 0 but applies margins to children.
<ul> / <ol>:
- Margin: 1rem top/bottom
- Padding: 40px (or 2em) on the start (left in LTR) for indentation.
<blockquote>:
- Margin: 1em top/bottom.
- Margin: 40px left/right (indentation).
<figure>:
- Margin: 1em top/bottom.
- Margin: 40px left/right.
<hr>:
- Margin: 0.5em top/bottom.
- border: 1px inset.
<button> / <input>:
- Do not inherit font styles by default (they use system UI fonts). You must explicitly set font: inherit to match your site's typography.

Modern CSS Reset Technique

The current modern CSS reset technique has shifted from broad, aggressive normalization to minimal, intentional adjustments that correct specific browser inconsistencies while preserving useful defaults. With major browsers converging on standards via the Interop initiative, developers now prefer small, targeted resets (often around 10–20 lines) that address genuine "papercuts" like box-sizing and margins, rather than stripping all user-agent styles.

Key components of the modern approach include:

Box Sizing: Setting box-sizing: border-box globally to simplify layout calculations.
Margin Removal: Resetting default margins on common elements (*, body, headings) for a clean baseline.
Form Inheritance: Ensuring input, button, and textarea inherit font styles from their parent.
Media Defaults: Setting img and video to display: block and max-width: 100% to prevent layout gaps.
Text Improvements: Adjusting line-height, enabling text-wrap: balance, and smoothing font rendering.

Popular modern implementations include Josh W. Comeau’s Custom CSS Reset and Andy Bell’s (A More) Modern CSS Reset, which leverage modern CSS features like @layer for cascade management and logical properties. The era of heavy libraries like Eric Meyer’s Reset or the original Normalize.css is largely over for modern projects, replaced by lightweight, self-authored baselines.