I, for one, welcome our new REM saviours

I, for one, welcome our new REM saviours

I liked ems for their relative sizing, but I loath the inheritance maths of nested elements.

Enter the rem. It is calculated relative to font-size on the root unit. Set body {font-size:100%}, generally 16px, and all your rem sizing will be based on that. Brilliant!

The CSS3 values page contains some pretty interesting things. Take for instance the VW & VH units, which are lengths relative to the viewport. VW equals 1% of the initial containing block. As per their example, h1 {font-size:8vw;} in a containing block 200mm wide, will be 16mm: (8×200mm)/100).

In my quick play, the size didn't update as I scaled the page width, which is what I was after. While you can argue you only need a few breakpoints not 100% scaling, and that you're not going to be resizing the browser on a mobile device, how cool would it be to have type smoothly scaling as you resize the window, maybe even combined with CSS3 animation?