REM to VH Converter

What is a REM to VH Converter?

A REM to VH converter calculates the viewport height equivalent of a CSS rem value. The vh unit represents 1% of the browser viewport's height, making it ideal for creating layouts that respond to the user's screen size rather than font settings. Converting from REM to VH is useful when transitioning from font-relative sizing to viewport-relative sizing for elements like hero sections, full-screen overlays, and sticky headers. For a thorough explanation of viewport units, see the MDN Web Docs on viewport percentage lengths.

How REM to VH Conversion Works

The conversion first resolves the REM value to pixels, then calculates what percentage of the viewport height that pixel value represents. Since the result depends on the actual viewport height, this conversion is inherently device-specific. The formula is:

VH = (REM × Base Font Size ÷ Viewport Height) × 100

For example, on a 900px tall viewport with a 16px root font size: 1rem = 16px, and (16 ÷ 900) × 100 ≈ 1.778vh. The same REM value produces a different VH result on a 1080px viewport: (16 ÷ 1080) × 100 ≈ 1.481vh.

REM to VH Conversion Table

Best Practices for VH Units

• Use vh for full-screen hero sections, splash screens, and modal overlays
• Be cautious with 100vh on mobile — the address bar can cause content to overflow; consider dvh (dynamic viewport height) instead
• Combine vh with min-height or max-height to prevent extreme sizing on very tall or short viewports
• Avoid using vh for font sizes as it can produce unreadable text on extreme viewport sizes
• Use CSS clamp() with vh values to set sensible minimum and maximum bounds

FAQs

What exactly is 1vh?

One vh equals 1% of the viewport's height. On a browser window that is 900 pixels tall, 1vh = 9px. If the user resizes their browser window, the pixel value of 1vh changes accordingly, making it a truly responsive unit.

Why does 100vh sometimes cause scrolling on mobile?

Mobile browsers have dynamic toolbars (address bar, navigation bar) that appear and disappear as you scroll. The vh unit is based on the viewport size when the toolbar is hidden, so 100vh can be taller than the visible area when the toolbar is showing. Use 100dvh (dynamic viewport height) or 100svh (small viewport height) for more predictable behavior on mobile.

Can I use VH for font sizes?

Technically yes, but it's generally not recommended. Font sizes in vh become extremely small on short viewports and potentially huge on tall ones. If you want viewport-responsive typography, use CSS clamp() to set bounds: font-size: clamp(1rem, 2.5vh, 2rem).

How do I find my current viewport height?

Open your browser's developer console (F12 or Cmd+Option+I) and type window.innerHeight. This returns the current viewport height in pixels. You can also check it in the responsive design mode of your browser's DevTools, which shows viewport dimensions as you resize.