The New CSS3 Relative Font Sizing Units

Craig Buckler
Craig Buckler
Share

It’s been more than three years since I last wrote about CSS font sizing. For a decade we were lumbered with inconsistent keywords (small, medium, large etc) and flawed fixed units (px, pt, mm). While the problems associated with px in Internet Explorer have dissipated, % and em remained the best choices — especially for responsive designs. Fortunately, CSS3 provides us with several new alternatives…

rem

One issue encountered with percentage and em sizing is the compounding cascade conundrum! Consider this basic example…
<style>
body  { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>

<p> 12px text </p>

<ul>
<li> 12px text
<ul><li> 9px text </li></ul>
</li>
</ul>
em units are relative to their parent container so nested lists have decreasing font sizes. It can be difficult to determine font sizes on complex pages — most of us use the force (lots of trial and error). rem is similar to em except that it’s relative to the root element rather than the parent. Changing the li selector to 0.75rem
will ensure all nested lists remain at 12px. rem is available in Chrome, Firefox, Safari, Opera and IE9+. Older browsers can be supported with a fallback and you’ll probably find it easier to use absolute units, e.g.
p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

vw, vh and vmin

These new properties allow you to scale font sizes according to the viewport dimensions, i.e.
  • 1vw is 1% of the viewport width
  • 1vh is 1% of the viewport height
  • 1vmin is the smallest of 1vw and 1vh
For example, assume your browser viewport is set to 1,000 x 1,200 pixels:
  • 1.5vw = 15px font size
  • 1.5vh = 18px font size
  • 1.5vmin = min(1.5vw, 1.5vh) = 15px font size
The new units will revolutionize responsive design — text on mobile devices often appears a little large because you’re holding the device closer than a monitor. Browser support is a little patchy but it’s coming…
  • IE10 — full support
  • IE9 — supported, but vmin is named “vm”
  • Chrome 22+ — full support
  • Safari 6 and iOS Safari 6 — full support
  • Firefox — will be implemented in version 19 (late February 2013)
  • Blackberry Browser 10 — full support
No word from Opera yet, but I suspect they’re on the case. Again, it may be advisable to use fallbacks for a few years, e.g.
p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}
Will you adopt any of these new font sizing units in your pages? And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World. Comments on this article are closed. Have a question about CSS3? Why not ask it on our forums?

Frequently Asked Questions on CSS3 Relative Font Size

What is the significance of using relative font sizes in CSS3?

The use of relative font sizes in CSS3 is crucial for creating responsive web designs. Unlike absolute font sizes, relative font sizes adjust according to the parent element’s size or the base font size of the page. This flexibility allows the text to scale up or down based on the user’s device or browser settings, enhancing readability and user experience. It’s particularly beneficial for accessibility, as it allows users with visual impairments to adjust the text size to their preference.

How does viewport-based typography work in CSS3?

Viewport-based typography in CSS3 uses units like vw (viewport width) and vh (viewport height) to size fonts. These units represent a percentage of the viewport’s width or height. For example, 1vw is 1% of the viewport’s width. This means the font size will adjust dynamically based on the size of the viewport, making your typography truly responsive.

What are the different types of relative font size units in CSS3?

CSS3 offers several types of relative font size units. These include em, rem, percent (%), vw, vh, vmin, and vmax. Each unit has a different reference point. For instance, em is relative to the font size of its closest parent, rem is relative to the root element’s font size, and vw/vh are relative to the viewport’s width and height.

How can I create fluid typography with CSS3?

Fluid typography can be achieved in CSS3 using viewport units and calc() function. The calc() function allows you to perform calculations to determine the font size. For example, you can set the font size to be a calculation that includes a base size and a size relative to the viewport width, creating a font size that scales smoothly between a range of sizes.

What are the benefits and drawbacks of using relative font sizes?

Relative font sizes offer several benefits, including improved accessibility, better responsiveness, and more flexible design. However, they also have some drawbacks. They can be more complex to implement and manage, especially in large projects. Also, because they depend on the parent element’s size or the viewport size, they can sometimes lead to unexpected results if not used carefully.

How does the use of relative font sizes impact mobile web design?

Relative font sizes are particularly beneficial for mobile web design. They allow text to scale based on the device’s screen size, ensuring optimal readability on all devices. This is crucial in today’s multi-device world, where users may be viewing your website on a variety of screen sizes.

How can I convert px to em or rem in CSS3?

To convert px to em or rem in CSS3, you need to know the base font size. The base font size is typically 16px, but it can be set to any value. To convert, divide the desired pixel value by the base font size. For example, if you want a font size of 20px and your base font size is 16px, you would set your font size to 1.25em or 1.25rem.

How does CSS3 handle font size inheritance?

In CSS3, elements inherit the computed font size of their parent element. This means if you set a font size in em or percent, the element will calculate its font size based on the font size of its parent. This can be useful for creating scalable designs, but it can also lead to compounding sizes if not managed carefully.

Can I use relative font sizes for elements other than text?

Yes, relative units can be used for sizing any element, not just text. This includes padding, margins, widths, and heights. Using relative units for these elements can help create a more cohesive and scalable design.

How can I ensure my typography is accessible when using relative font sizes?

To ensure your typography is accessible, it’s important to test your design at different screen sizes and browser settings. Consider users who may need to increase the font size for readability. Also, avoid using very small base font sizes, as this can make the text too small to read when scaled down.