Skip to main content

Website Resizing Techniques

Unlike documents, where native applications handle most resizing, web content requires a few key considerations to remain usable when zoomed.

Resizing is also easy to test without additional tools. Use Cmd/Ctrl + and Cmd/Ctrl - to zoom in and out, and confirm the page remains fully usable up to 200% zoom.

META Resize

To support zoom and resizing, avoid disabling user scaling via the <meta name="viewport"> tag. Pages typically allow resizing when relative units are used, unless the viewport settings restrict it.

A generally accessible example is:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Avoid viewport values that limit zoom, such as:

  • maximum-scale: values below 3 can prevent users from zooming to WCAG-recommended levels.
  • user-scalable=no (or 0): disables zoom and fails accessibility.

Even if some browsers ignore these settings, they should not be used, as they can block resizing for some users.

Absolute vs. Relative Sizes

When developing for the web, distinguish between absolute (fixed) and relative (flexible) sizing. This is especially important for typography—use relative units for font sizes to better support zoom and user settings.

<style>
   .absolute { font-size: 12px; }
   .relative { font-size: 1em; }
</style>

<p class="absolute">This is an absolute size font.</p>
<p class="relative">This is an relative size font.</p>

Sizing units

Web developers can choose from many units. px is the most common absolute unit; em, rem, and % are the most common relative units.

Absolute Units

  • px*: pixels (1px = 1/96 in)
  • cm: centimeters
  • mm: millimeters
  • in: inches (1 in = 96px = 2.54cm)
  • pt: points (1pt = 1/72 in)
  • pc: picas (1pc = 12pt)

Relative Units

  • em*: relative to the element’s font-size (e.g., 2em = 2×)
  • rem*: relative to the root font-size
  • %*: relative to the parent element
  • ex: relative to the font’s x-height
  • ch: relative to the width of “0”
  • vw: 1% of viewport width
  • vh: 1% of viewport height
  • vmin: 1% of the smaller viewport dimension
  • vmax: 1% of the larger viewport dimension

* = Most commonly used for web typography.

EM vs. REM

The rem units are relative to the root (html) font size, while em units are relative to the computed size of an element’s parent. As a result, em values compound with nesting; rem values remain consistent.

CSS classes

.EM {height: 0.8em; width: 0.8em;}
.REM {height: 0.8rem; width: 0.8rem;}

Using em (compounds):

<div>Parent (Root)
  <div class="EM">Child
    <div class="EM">Grandchild</div>
  </div>
</div>

This will produce 3 DIVs embedded inside each other which will look like this:

3 Divs. Root DIV is 16px, the child is 13px, and the grandchild is 10px

Using rem (does not compound):

<div>Parent (Root)
  <div class="REM">Child
    <div class="REM">Grandchild</div>
  </div>
</div>
3 nested Divs. Root DIV is 16px, the child is 13px, and the grandchild is also 13px

Because the REM is in reference to root, it doesn't matter what the container element is set to, it will always be the same size as it relates to the root size.

Last modified