Question

I’ve read an article where it was proposed to use ems units to make font size scalable for mobile development:

html {
    font-size: 16px; /* our base font size */
}
body {
    font-size: 62.5%; /* now our em = 10px */
}
/* and for example we want to make h1 = 30 pixels */
h1 {
    font-size: 3em; /* target / context = 30 / 10 = 3
}
/* quite ugly in some cases */
h3 {
    font-size: 0.6666666em; /* want 20 pixels, context 30 = 20/30 = 0.(6) */
}

This is cool of course. The question is – if we are using some CSS preprocessing (SASS, LESS, custom) then probably we don’t even need such approach and can use variables directly:

$base-font: 10px;
h1 {
    font-size: $base-font*3;
}
h3 {
    font-size: $base-font*2; /* it could be $base-font/3, still nice */
}

Second option seems so much nicer, am I missing something?

The idea of both options to have single point to change font size, right?

Answer 1

Why not combine the two approaches? Something like this:

$base-font: 1em;

html {
    font-size: 16px; /* our base font size */
}
body {
    font-size: 62.5%; /* now our em = 10px */
}

h1 {
    font-size: $base-font*3;
}
h3 {
    font-size: $base-font*2;
}

That way, you retain the nice scaling of em, but you let the pre-processor do all the work coming up with long numbers. As discussed in the comments, you could do the same with the margin, padding and borders to make the whole element scale cleanly, rather than just the font-size.

Another thing to look at might be rem (root em). See http://snook.ca/archives/html_and_css/font-size-with-rem for more.