HTML and CSS Reference
In-Depth Information
Pixels and percentages are two of the most useful units in CSS for onscreen displays.
Pixels are fixed size, so they allow very precise control over the layout in a web document.
Percentages, on the other hand, are useful for defining font sizes for text content because
the text remains scalable, which is important for small devices and accessibility purposes.
When the text is part of the design and needs to match other elements, it can be sized
in pixels for greater control. Modern browsers all support full-page zooming, which has
made pixel-based font sizes more acceptable. Note that for high-resolution screens, a
CSS pixel renders as multiple screen pixels. For example, the Apple Retina display renders
all pixel dimensions at twice their actual size.
Font-relative units
Two additional relative measures are em-height (
em
) and ex-height (
ex
). Em-height is the
same as the font-size; ex-height is about half the font-size.
.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }
Like percentage, em-height is a good relative unit that is commonly used for setting
the font size of web document text. They both respect the user's choice of font size in their
browser and are easier to read on small-screen devices than pixel-based font sizes.
CSS 3 introduced two additional font-relative units:
rem
and
ch
. The root em-height
(
rem
) unit is relative to the font-size of the root element (
<html>
). It can be used instead of
em
to prevent the element's font size from being affected by changes to the font size of its
ancestor elements.
.one-rem { font-size: 1rem; }
The character unit (
ch
) measures the width of the character zero (0) for the element's
font. It can be useful for defining the width of a box containing text because the unit
roughly corresponds to the number of characters that fit within that box.
/* Same width */
<div style="width: 5ch;"></div>
<div>00000</div>
The
ch
unit is supported only in Chrome 27+, Firefox 19+, and IE9+, so it should be
used only with a fallback. The
rem
unit has slightly better support and works in Chrome 4+,
Firefox 3.6+, IE9+, Safari 4.1+, and Opera 11.6+.
Viewport units
Viewport width (
vw
) and viewport height (
vh
) units allow elements to be dimensioned
relative to the viewport, meaning the visible portion of the document. Each unit
represents a percentage of the current viewport.
