Scalable font size, SASS (LESS) with "px" vs plain ems

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?

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

Solution 2

You can as well use Fluidizer SASS library. It aims to think in pixels and get values in em and percent flexible units. I'm its developer, but I think it can work very well in your situation.

Here it's an example. To get em you use em() function with the desired size in pixels as the first argument and the relevant font size (the context you said) as the second argument.

$initial-rfs: 16px;
html {
    font-size: $initial-rfs;
}
body {
    font-size: em(10px, 16px);
}
h1 {
    font-size: em(30px, 10px);
}
h3 {
    font-size: em(20px, 30px); /*did you said your context was 30px? are you sure? h3 inside h1? I think its context would be better 10px, them em(20px, 10px)*/
}

Solution 3

If the user has accessibility issues and would like to set a bigger base font in a user-agent stylesheet, the em based sizes will scale accordingly but the px based ones won't.

Comments

[Ben Cottrell]

Why are you looking solely at font-size? What about margin, padding and border-width? If you write the whole lot in em, when the base font-size changes, the padding, margins, borders and line-height scale to match. Also, longer numbers aren't ugly, just more precise :)

[Ilya Tsuryev]

Really because the lesson was about scalable fonts :D If we want to extend it to other properties then we can use both approaches and the second one is still nicer. Maybe they are indeed same thing and I am missing nothing and preprocessing simply makes it even prettier.

[Ben Cottrell]

My point is that these things are all interconnected/symbiotic. Rather than making just the text scale, try to make entire elements (hell, entire pages) scale cleanly :)

[Ilya Tsuryev]

Like user adding html { font-size: 30px; } for example? While this seems true I doubt it's a problem - zoom is available on every browser.

[Ilya Tsuryev]

If we have font-size: 16px; on html then what is the difference between 1em and 16px; on some element? They would look the same everywhere, no?

[Ben Cottrell]

Not quite. em is sized relative to the font-size of the parent element. So if you set h1 { font-size: 3em; } p {font-size: 1em;} strong { font size: 2em; }, then h1 strong will be much bigger than p strong. Depending on the situation, this can be brilliant or infuriating (in which case, look into rem and perhaps the other CSS3 measurement units, e.g. vw, vh, etc).