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…


One issue encountered with percentage and em sizing is the compounding cascade conundrum! Consider this basic example…

body  { font-size: 100%; }
p, li { font-size: 0.75em; }

<p> 12px text </p>

<li> 12px text
<ul><li> 9px text </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?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Emanuel

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

    Hallelujah! :D

  • Rick Benetti

    when you say:

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

    What’s is this vm and vmin?

    • Craig Buckler

      Read the article and it’ll all make sense!

      • Rick Benetti

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

  • Rick Davies

    yes! sing it

  • Matt Early

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

    • Christian

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

  • 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.

  • Strx

    I find this really interesting for icon fonts…

  • Nathaniel Flick

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

  • 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.)

    • 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.

  • Benedict

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

    • Craig Buckler

      Good question. It’s usually from a variety of sources — browser vendor announcements, MDN, the W3C, technology news, blogs etc. 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-
    — and from the comments: ;

  • 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?)

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.