Magesh Ravi

Magesh Ravi

Artist | Techie | Entrepreneur

A self-taught UI/UX designer, full-stack web developer and passionate business owner. Lives in Tamil Nadu, India.

cover-image

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

Style   Step   Font size (px) 
------- ------ ---------------- 
 h1         3           24.25 
 h2         2           21.11 
 h3         1           18.38 
 h4         0           16 
 h5        -1           13.93 
 h6        -2           12.13 

 Calculated font sizes in em

  Style   Step   Font size (em)  
 ------- ------ ----------------
  h1         3             1.52  
  h2         2             1.32  
  h3         1             1.15  
  h4         0                1  
  h5        -1             0.87  
  h6        -2             0.76  

Refer: StackOverflow

Find similar articles tagged with