Advantages of CSS Logical Units vi and vb

CSS logical viewport units, specifically vi (viewport inline) and vb (viewport block), provide a responsive sizing mechanism that adapts automatically to different writing modes and text directions. While traditional units like vw and vh are tied strictly to physical screen axes—horizontal width and vertical height—logical units respond to the reading flow of the document. This article explores how adopting vi and vb streamlines internationalization, reduces redundant code, and creates truly resilient layouts in multi-directional web development.

Automatic Adaptation to Writing Modes

Traditional viewport units assume a standard horizontal writing mode, such as left-to-right (LTR) in English or right-to-left (RTL) in Arabic. In these contexts, the inline axis aligns with horizontal width, and the block axis aligns with vertical height.

However, when working with vertical scripts (such as traditional Japanese, Chinese, or Mongolian using writing-mode: vertical-rl or vertical-lr), physical dimensions become counterintuitive:

• 1vi represents 1% of the viewport's inline dimension. In horizontal modes, this equates to 1% of the viewport width. In vertical modes, it automatically switches to 1% of the viewport height.
• 1vb represents 1% of the viewport's block dimension. In horizontal modes, this equates to 1% of the viewport height. In vertical modes, it automatically switches to 1% of the viewport width.

Because vi and vb dynamically remap based on the active writing-mode, elements size themselves predictably relative to content flow rather than physical screen borders.

Streamlined Codebases Without Redundant Overrides

Prior to logical viewport units, supporting both horizontal and vertical writing systems required writing duplicate utility classes or relying on context-specific overrides:

/* Legacy approach */
.hero-title {
  font-size: 5vw;
}

[writing-mode^="vertical"] .hero-title {
  font-size: 5vh;
}

Using logical units eliminates the need for orientation-specific rules entirely:

/* Logical approach */
.hero-title {
  font-size: 5vi;
}

The single declaration scales typography proportionally to the length of the line of text, whether that line runs horizontally across the screen or vertically from top to bottom.

Natural Harmony with Modern CSS Layouts

CSS has systematically moved toward logical abstractions with properties like inline-size (replacing width), block-size (replacing height), and logical margin and padding equivalents (margin-inline, padding-block).

Using physical units like vw or vh alongside logical properties introduces an architectural mismatch. Pairing logical dimensions with logical units ensures conceptual consistency across your entire design system:

.card {
  inline-size: 80vi;
  max-block-size: 50vb;
  padding-inline: 2vi;
  padding-block: 2vb;
}

This ensures that component constraints behave consistently regardless of whether the component is rendered in an LTR, RTL, or vertical container.

Fluid Typography Across Global Scripts

Viewport-based typography using functions like clamp() often pairs font sizing with screen dimensions. By using vi instead of vw, fluid text sizes scale relative to the line length available to the reader:

h1 {
  font-size: clamp(1.5rem, 4vi + 1rem, 3.5rem);
}

In horizontal layouts, this prevents text from expanding uncontrollably based on height. In vertical layouts, it ensures text scales with viewport height—which represents the primary reading dimension—preserving legibility across diverse device orientations and script types.