14 px equals 0.875 rem.
The conversion from pixels (px) to rem units depends on the root font size, which is commonly 16 pixels by default in browsers. Dividing the pixel value by 16 gives the equivalent rem size, making 14 px equal to 14 divided by 16, or 0.875 rem.
Conversion Tool
Result in rem:
Conversion Formula
The formula for converting px to rem is:
rem = pixels ÷ root font size
Browsers set the root font size at 16px by default, so for most cases:
rem = pixels ÷ 16
This formula works, because rem units are relative to the root font size, meaning 1 rem equals the root font size in pixels. So, dividing the px value by 16 converts the absolute pixel value into a scalable rem unit.
For example, converting 14 px:
- Start with 14 pixels
- Divide 14 by 16 (the root font size): 14 ÷ 16 = 0.875
- So, 14 px = 0.875 rem
Conversion Example
- Convert 24 px to rem:
- Divide 24 by 16
- 24 ÷ 16 = 1.5
- Result: 1.5 rem
- Convert 8 px to rem:
- Divide 8 by 16
- 8 ÷ 16 = 0.5
- Result: 0.5 rem
- Convert 32 px to rem:
- Divide 32 by 16
- 32 ÷ 16 = 2
- Result: 2 rem
- Convert 10 px to rem:
- Divide 10 by 16
- 10 ÷ 16 = 0.625
- Result: 0.625 rem
- Convert 18 px to rem:
- Divide 18 by 16
- 18 ÷ 16 = 1.125
- Result: 1.125 rem
Conversion Chart
The chart below shows pixel values from -11.0 to 39.0 and their corresponding rem values by dividing each px value by 16. Negative values can be useful for relative positioning or adjustments in CSS.
Pixels (px) | Rem | Pixels (px) | Rem | Pixels (px) | Rem |
---|---|---|---|---|---|
-11.0 | -0.6875 | 6.0 | 0.3750 | 23.0 | 1.4375 |
-10.0 | -0.6250 | 7.0 | 0.4375 | 24.0 | 1.5000 |
-9.0 | -0.5625 | 8.0 | 0.5000 | 25.0 | 1.5625 |
-8.0 | -0.5000 | 9.0 | 0.5625 | 26.0 | 1.6250 |
-7.0 | -0.4375 | 10.0 | 0.6250 | 27.0 | 1.6875 |
-6.0 | -0.3750 | 11.0 | 0.6875 | 28.0 | 1.7500 |
-5.0 | -0.3125 | 12.0 | 0.7500 | 29.0 | 1.8125 |
-4.0 | -0.2500 | 13.0 | 0.8125 | 30.0 | 1.8750 |
-3.0 | -0.1875 | 14.0 | 0.8750 | 31.0 | 1.9375 |
-2.0 | -0.1250 | 15.0 | 0.9375 | 32.0 | 2.0000 |
-1.0 | -0.0625 | 16.0 | 1.0000 | 33.0 | 2.0625 |
0.0 | 0.0000 | 17.0 | 1.0625 | 34.0 | 2.1250 |
1.0 | 0.0625 | 18.0 | 1.1250 | 35.0 | 2.1875 |
2.0 | 0.1250 | 19.0 | 1.1875 | 36.0 | 2.2500 |
3.0 | 0.1875 | 20.0 | 1.2500 | 37.0 | 2.3125 |
4.0 | 0.2500 | 21.0 | 1.3125 | 38.0 | 2.3750 |
5.0 | 0.3125 | 22.0 | 1.3750 | 39.0 | 2.4375 |
Related Conversion Questions
- How do I convert 14 px to rem if my root font size is not 16px?
- What does 14 px equal in rem for responsive web design?
- Is 14 px the same as 0.875 rem in all browsers?
- How to calculate rem from 14 pixels in CSS?
- Why does 14 px convert to 0.875 rem using the default root font size?
- How does changing the base font size affect converting 14 px to rem?
- Can I use 14 px directly instead of rem in modern web pages?
Conversion Definitions
px (Pixel): A pixel is the smallest unit of digital image or display output. It represents a single point on a screen, used to measure length or size in digital graphics and web design. Pixels are absolute units that depend on screen resolution, making designs fixed in size.
rem (Root Em): Rem is a CSS unit equal to the font size of the root element (usually <html>). Unlike pixels, rem scales relative to the root font size, allowing flexible and responsive designs. It helps maintain proportions across different devices or user settings.
Conversion FAQs
What happens if the root font size changes from 16px to 20px?
If the root font size changes, the rem unit scales accordingly. For example, 14 px divided by 20 px root font size equals 0.7 rem instead of 0.875. This means rem sizes adjust dynamically based on the root font size, affecting layout and typography.
Can I rely on rem units for consistent sizing across browsers?
Rem units are widely supported and provide consistent relative sizing across browsers. However, if users change default browser font size or if CSS resets override root font size, results may vary. Testing across browsers and devices is recommended.
Why use rem instead of px in CSS?
Rem units allow designs to scale based on user preferences or device settings, improving accessibility and responsiveness. Pixels are fixed and don’t scale, making rem better for flexible layouts. Using rem also eases maintenance by controlling sizes from one root value.
Is 14 px always equal to 0.875 rem?
Only when the root font size is 16 px. If the root font size is different, the conversion changes. Always confirm the root font size before assuming 14 px equals 0.875 rem.
How to convert rem back to px?
To convert rem to px, multiply the rem value by the root font size. For example, 0.875 rem × 16 px = 14 px. This reverses the px to rem conversion and helps when specifying dimensions in pixels again.