Viewport units

Viewport units size elements relative to the browser viewport rather than a parent or the root font. 1vw equals 1% of the viewport width and 1vh equals 1% of its height, so an element sized in viewport units scales fluidly as the screen changes. They power full-height sections, fluid typography and layouts that adapt without a breakpoint.

The main units

The mobile viewport problem

On phones, the address bar shows and hides as you scroll, so the classic 100vh can be taller than the visible area and cause a jump. Newer units fix this: svh (small), lvh (large) and dvh (dynamic) track the real viewport, and 100dvh is now the safe way to make a section fill the mobile screen.

Common uses

• Full-height hero sections with min-height: 100dvh.
• Fluid typography, usually inside clamp() so it never gets too small or too large.
• Spacing and imagery that scale with the screen.

Viewport units versus percentages and rem

A percentage is relative to the parent element, rem is relative to the root font size, and a viewport unit is relative to the screen. Use percentages for layout inside a container, rem for accessible type and spacing, and viewport units when something should scale with the whole screen.

Pitfalls and best practices

100vw can be slightly wider than the visible area when a scrollbar is present, causing horizontal overflow, so prefer 100% for full-width blocks. Avoid sizing body text in pure vw because it can break zoom and accessibility; wrap it in clamp() with a rem floor instead.

Viewport units at BeBranded

At BeBranded we use viewport units for fluid heroes and type that scale cleanly across screens, always guarded for mobile and accessibility. It is part of the responsive craft in our design work.