Enter the default font size and the desired font size into the calculator to determine the correct REM to use for your font size.
The following formula is used to calculate the REM needed to achieve a certain font size.
REM = EF / DF
- Where REM is the root em value for the desired font size
- EF is the expected font size output you want to display (px)
- DF is the default font size (px)
To calculate REM, divide the expected font size output by the default font size.
For most browsers, the default font size is 16px.
What is REM?
R.E.M, short for root em, is a term used in website CSS programming that is used to depict the size of the font to be used to a given line or section of text.
For example, if a line is coded as 1REM, the expected font size would be 16px or the default size of the browser.
How to calculate REM?
- First, determine the default font size.
For this example, the browser uses the most common default size of 16px.
- Next, determine the font size you want to be displayed.
For this example, the web developer wants a font size of 20px to display.
- Finally, calculate the REM.
Using the formula above, the root em is calculated to be:
REM = EF / DF * DF
REM = 20px/ 16px
REM = 1.25rem