How to calculate font size for html heading tags

Update: This article may not be relevant anymore. See the W3C recommendation for font-sizes for HTML5.

Font sizes for heading h1 to h6 are usually defined by browsers (user agent stylesheet). For consistency purposes, it is often a good practice to reset browser specific CSS and define the values again. Are these values defined arbitrarily? Not really. Here is a simple way to calculate font size for heading tags h1 to h6.

In most cases, the heading h4 is given the base value 16px.

The font-size is a function of base and step values.

font_size = base * 2^(step/5)

For h4,

base = 16;
step = 0;
font_size = 16 * 2^(0/5); // 16px

For h3,

base = 16;
step = +1;
font_size = 16 * 2^(1/5); // 18.38px

Calculated font sizes in px

Calculated font sizes in em