dispatchEvent()™

My brother Neal turned me onto this article on A List Apart

tl;dr

The best unit for defining font sizes in CSS are ems combined with font-sze:100%; in the body selector.

But working with ems can be a PITA. But if you’re using less css (or sass), it can be quite easy. 1 em = 16px so the conversion can happen in a parametric mixin.

// less
.font-size (@px: 16) {
    font-size: @px/16 em;
}
p {
    .font-size(18); // 1.125em
}

// sass
@mixin font-size ($px) {
    font-size: $px/16 em;
}
p {
    @include font-size(18); // 1.125em
}

PS, less rules, sass drools!