VH to REM Converter
Convert VH units to Root EM (REM).
About VH to REM Converter
The VH to REM converter translates CSS viewport height units (vh) into root em units (rem). While vh represents a percentage of viewport height, rem is based on the root element's font size. This conversion is useful for designers working with fluid typography and scalable layouts, though it requires knowing both the viewport height and root font size.
Formula
Examples
Reference
- • VH (Viewport Height): 1vh = 1% of viewport height
- • REM (Root EM): Relative to root element font-size
- • Default conversion assumes 16px root font size
- • Example: On 1000px viewport with 16px root, 32vh = 20rem
Frequency Asked Questions
What is the difference between vh and rem?
VH is relative to viewport height (1vh = 1% of screen height), while rem is relative to the root element's font size (typically 16px). They measure different properties.
How do I convert vh to rem?
Multiply vh by viewport height, divide by 100, then divide by the root font size. For a 1000px viewport and 16px root: 50vh = (50 × 1000) / (100 × 16) = 31.25rem.
Why would I convert vh to rem?
Converting vh to rem is useful when you need to maintain proportional relationships between viewport-based spacing and typography, or when working with design systems that use rem as the primary unit.
What is the default root font size?
Most browsers use 16px as the default root font size, but users can customize this in their browser settings for accessibility.