Font size shrink and grow

This is a paragraph and the above heading grow and shrink based on viewport width.

Responsive font size without clamp

This is a paragraph and the above heading grow and shrink based on viewport width, but without the clamp property. This keeps growing.

This is font size in em size 16px based on default body

This p is inside a div with font size as 20px and this p element size is set to 1em results in 20px

This p is inside a div with font size as 20px and this p element size is set to 1.5em results in 30px

This p is inside a div with font size as 20px and this p element size is set to 2em results in 40px

This p is font size 1rem: body font size = 16px. So this p is 16px.

This p is font size 1.5rem: body font size = 16px. So this p is 24px.

This p is font size 2rem: body font size = 16px. So this p is 32px.


This is an h1 with Padding 1em inside div with font-size: 20px


This is an h2 with Padding 1em inside div with font-size: 20px


This is an h1 with Padding 1rem inside div with font-size: 20px


This is an h2 with Padding 1rem inside div with font-size: 20px


Note : It is extremely critical that you set the font-family of form elements like buttons to inherit. By default they dont inherit these properties.