The conversion is based on the root font size of px.
The root font-size generally used is web design is usually 16px, which is the default in the calculator. You can change the root font-size from the 16px box.
Note:- The conversion works in both ways. Just input the unit in any box and you'll get the equivalent pixel to rem or rem to pixel conversion.
Standard font sizes (pixel and rem) for Headings and Body text
Type
Pixel
REM
Secondary text (tiny)
12 px
0.875 rem
Secondary text
14 px (Material Design | Android)
15 px (iOS guidelines)
0.875 rem (Material Design | Android)
0.937 rem (iOS guidelines)
Body text (Standard)
16 px (Material Design | Android)
17 px (iOS guidelines)
1 rem (Material Design | Android)
1.06 (iOS guidelines)
Body text (Medium)
18 px
1.125 rem
Body text (large)
20 px
1.25 rem
Heading (Standard)
24 px
1.5 rem
Heading
(Medium)
30 px
1.875 rem
Heading
(large)
48 px
3 rem
Heading
(Very large)
64 px
4 rem
These are just the standard sizes. If you’re creative you can pull off even larger or smaller sizes as well. Just make sure they look good on mobile devices as well. Headings larger than 3rem may be too big for mobiles. Similarly body texts smaller than 12px can be very hard to see on a small device like mobile.
Did you felt that the spacing between the heading was being reduced as you moved to the larger headings?
Spoiler – The spacing between them is same.