The New CSS3 Relative Font Sizing Units

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.ultraq.net.nz/ Emanuel

    “rem is similar to em except that it’s relative to the root element rather than the parent.”

    Hallelujah! :D

  • http://rickbenetti.com.br Rick Benetti

    Hi,
    when you say:

    font-size: 12px; /* old */
    font-size: 1.2vm; /* IE9 */
    font-size: 1.2vmin;

    What’s is this vm and vmin?

    • http://www.optimalworks.net/ Craig Buckler

      Read the article and it’ll all make sense!

      • http://rickbenetti.com.br Rick Benetti

        Thanks,
        sorry I’m read full know and really make more sense.

  • http://tricky3.co.uk/ Rick Davies

    yes! sing it

  • http://www.mattearly.com Matt Early

    Could you actually put 100vw and it makes each font with width on the viewport? I’m terribly confused by this :)

    • http://resume.christianziebarth.com Christian

      I just tried that and, yes, that’s pretty much what happened. Actually, each latter was about half the width of the viewport.

  • http://resume.christianziebarth.com Christian

    Maybe something like the following for now?:

    p, li
    {
    font-size: 12px; /* old */
    font-size: 1.2vm; /* IE9 */
    font-size: 0.75rem;
    font-size: 1.2vmin;
    }

    • Tom

      What is the benefit of mixing vm and rem here?

      • Christian

        It’s not mixing. It’s creating a stack of fallbacks.

  • http://strx.it Strx

    I find this really interesting for icon fonts…

  • http://www.dirtandrust.com Nathaniel Flick

    I notice a great responsive website Polygon is using static font size (px). I wonder why?

  • http://resume.christianziebarth.com Christian

    Used “vmin” in a project yesterday and have to say I have some reservations about it since it is very easy for fonts to end up way too small on resize. You could still set different “vmin” values in different media queries but you could already do that with prior types of units.

  • Erin

    The rem unit will be a dream come true!

    But the vh, vw and vmin could be a nightmare. One of my biggest issues with many mobile sites is the inability to zoom or resize fonts. A website that already uses smaller fonts could be unusable viewed on a phone. (And think of a site that is styled like this and reads well on the phone held vertically… viewed on a hi-res landscape monitor.)

    • http://www.optimalworks.net/ Craig Buckler

      You could use Responsive Design techniques to adjust the text size on smaller screens. I’d need to do more testing, but I suspect the page/font can be zoomed even when vh or vw is set.

  • http://Beaconsmultimedia.com Benedict

    Great stuff! Where do you pick these new stuff from Craig? Browser vendors or W3C?

    • http://www.optimalworks.net/ Craig Buckler

      Good question. It’s usually from a variety of sources — browser vendor announcements, MDN, the W3C, technology news, blogs etc. caniuse.com is also invaluable for verifying browser support and finding links to documentation.

  • Albert

    Thanks for the aggregation on the v units and browser support.
    Further reading (for rem):
    - rem LESS/SASS mixin for px fallback- http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
    – and from the comments: https://github.com/christopher-ramirez/remixings ; https://github.com/ry5n/rem

  • http://dailyprayer.us Mason Barge

    HECK YEAH I am going to implement this. I might wait until support is a little better for the “v” designators but “rem” is a dream come true. (REM, dream — get it?)