VH to EM Converter
Use this free online vh to em converter tool to convert viewport height units to parent-relative em units. This conversion enables viewport-based sizing to be expressed as parent-relative units. The converter uses viewport height and parent font-size for calculations.
To convert vh to em, multiply the vh value by viewport height and divide by 100 to get pixels, then divide by the parent font-size. Default values are 1080px viewport height and 16px parent font-size. This creates sizing that relates viewport dimensions to parent typography.
Conversion Formula
em = (vh × viewport height ÷ 100) ÷ parent font-size
For example, to convert 10vh to em on a 1080px viewport with 16px parent font-size, calculate (10 × 1080 ÷ 100) ÷ 16 = 6.75em. This means 10vh equals 6.75em at this viewport size.
VH to EM Converter Conversion Table (Viewport Height: 1080px, Parent: 16px)
| VH | EM |
|---|---|
| 1vh | 0.675em |
| 2vh | 1.35em |
| 5vh | 3.375em |
| 10vh | 6.75em |
| 15vh | 10.13em |
| 20vh | 13.5em |
| 25vh | 16.88em |
| 30vh | 20.25em |
| 40vh | 27em |
| 50vh | 33.75em |
| 60vh | 40.5em |
| 70vh | 47.25em |
| 75vh | 50.63em |
| 80vh | 54em |
| 90vh | 60.75em |
| 100vh | 67.5em |
What is VH?
Viewport Height (vh) is a relative CSS unit where 1vh equals 1% of the browser viewport's height. Like VW, it responds dynamically to viewport changes, making it perfect for full-height sections and responsive vertical spacing. VH units are commonly used for hero sections, modals, and mobile-first designs that need to adapt to various screen heights.
What is EM?
EM is a relative CSS unit that scales based on the parent element's font size, making it highly context-dependent. By default, 1em equals the parent element's font-size value, creating a cascading effect through nested elements. While EM offers flexibility for component-level scaling, its cascading nature can make it unpredictable compared to REM in complex layouts.