A Technical Guide to CSS Units: Accessibility, viewports, and clamp()

✓ Last tested: May 2026 · Evaluated against WCAG 2.2 Success Criterion 1.4.4

Observations on Unit Selection and Accessibility

When reviewing accessibility and layout reports for frontend projects, we consistently observe the same recurring issues: full-page mobile layouts being clipped by the Safari address bar, and typography that fails WCAG resizing standards because it is hardcoded in pixels.

CSS unit selection is often treated as an afterthought, with developers defaulting to px because it matches the exact measurements provided in design software like Figma. However, web browsers are inherently fluid environments. Strict adherence to absolute pixel values often results in brittle layouts that break under real-world usage conditions, such as when a user adjusts their default browser zoom.

This guide documents the standardized unit patterns we use to ensure layouts are responsive, accessible, and mathematically sound.

---

1. Absolute vs. Relative Layout Scaling

Modern CSS units are generally divided into two categories:

[Absolute: Pixels (px)] ──> [Fixed size] ──> [Overrides user zoom, violates accessibility]
[Relative: rem / em]    ──> [Scales relative to base font] ──> [Respected zoom, 100% accessible]

• Absolute Units: Pixels (px) represent a fixed grid coordinate on the screen. They do not adapt to user preferences or browser configurations.
• Relative Units: Units like rem (Root em) and em scale relative to other layout settings, allowing your designs to adapt dynamically.

The Typography Accessibility Standard

According to WCAG Success Criterion 1.4.4 (Resize Text), websites must allow users to scale text up to 200% without breaking the layout.

Hardcoding font sizes in pixels (e.g., font-size: 16px) overrides browser-level base zoom settings. Visually impaired users who set their default browser base font size to 24px will still see your content rendered at 16px.

Sizing text with rem units (e.g., font-size: 1rem) ensures that your typography scales relative to the user's base font size (where 1rem equals 16px by default).

---

2. Dynamic Viewport Layouts: dvh vs vh

Standard viewport height units (100vh) have a known limitation on mobile browsers. Because mobile browsers dynamically show and hide their address bars as the user scrolls, standard viewport height units do not adjust their sizing dynamically. This frequently causes full-page layouts to extend behind the address bar, hiding crucial elements like action buttons.

[Viewport Height Units Comparison]
┌────────────────────────────────────────────────────────┐
│ 100vh: Fixed height (Often extends behind mobile bar)  │
├────────────────────────────────────────────────────────┤
│ 100svh: Smallest height (Fits within visible area)     │
├────────────────────────────────────────────────────────┤
│ 100lvh: Largest height (Expands when bar is hidden)    │
├────────────────────────────────────────────────────────┤
│ 100dvh: Dynamic height (Adjusts in real-time)          │
└────────────────────────────────────────────────────────┘

Modern CSS specifications provide dynamic viewport units to resolve this:

• Small Viewport Height (svh): Represents the smallest height of the viewport when the mobile address bar is fully visible.
• Dynamic Viewport Height (dvh): Adjusts its height dynamically in real-time as the mobile address bar appears or disappears.

---

3. Advanced Fluid Sizing with CSS clamp()

To scale designs fluidly across mobile and desktop devices without writing complex media query breakpoints, the CSS clamp(min, dynamic, max) function is highly effective:

/* Sizing typography fluidly between 24px and 56px */
.fluid-header {
  font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem);
}

• Minimum Bound (1.5rem / 24px): The absolute minimum font size, ensuring readability on mobile displays.
• Dynamic Value (4vw + 1rem): The scaling factor, using viewport width to scale the font size smoothly as the browser window changes.
• Maximum Bound (3.5rem / 56px): The absolute maximum font size, preventing typography from growing too large on ultrawide displays.

---

4. Dynamic React PX-to-REM Converter Utility

When translating Figma designs to code, converting pixels to REM manually can be tedious. Below is a production-ready React component written in TypeScript that performs this conversion dynamically:

import React, { useState } from 'react';

export const PxToRemConverter: React.FC = () => {
  const [pxVal, setPxVal] = useState<string>('16');
  const [rootSize, setRootSize] = useState<number>(16);
  
  const handlePxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    if (val === '' || /^\d*\.?\d*$/.test(val)) {
      setPxVal(val);
    }
  };

  const pxNum = parseFloat(pxVal) || 0;
  const remValue = pxNum / rootSize;

  return (
    <div className="unit-converter-card">
      <h3>PX to REM Layout Converter</h3>
      
      <div className="settings-panel">
        <label>Browser Root Font Size (px):</label>
        <input
          type="number"
          value={rootSize}
          onChange={(e) => setRootSize(Math.max(1, parseInt(e.target.value) || 16))}
          min="1"
        />
      </div>

      <div className="converter-panel">
        <div className="input-group">
          <label>Pixel Value (px):</label>
          <input type="text" value={pxVal} onChange={handlePxChange} />
        </div>

        <div className="output-group">
          <label>REM Result:</label>
          <div className="output-box">
            <code>{remValue.toFixed(4)}rem</code>
          </div>
        </div>
      </div>
    </div>
  );
};

Conclusion

Standardizing CSS units across a project improves accessibility and reduces layout bugs on edge-case devices. By utilizing rem for typography, dvh for full-height containers, and clamp() for fluid scaling, developers can create robust, responsive interfaces.

---

Convert and validate your layout dimensions securely in the browser. Use our offline-first PX to REM Converter Tool →

---

External Sources

• W3C WCAG 2.2 Success Criterion 1.4.4 (Resize text)

---

Abu Sufyan · Full-stack developer · Founder of WebToolkit Pro Github

Last updated: May 2026