In the last post, we discussed the foundation of the Utopia Scaling system: what a single step means for the font size. In Utopia Scaling's "step 0," the font size for your base font starts smaller on small devices, with a specific minimal size that the font size cannot go below, and grows linearly as the screen gets bigger until some maximal size the font cannot go above.

These four values, a minimal and maximal screen size, and a minimal and maximal font size, create two points on a flat graph; two points define a line, and by calculating the slope and intercept of that line we can craft a single linear expression that creates incredibly smooth scaling across a vast suite of devices.

We often needsmaller fonts for placeholders, help messages, and so on, or larger fonts for headers and titles. Utopia calls those "step 1", "step 2", and "step 3", to make them larger, and "step -1", "step -2", and so forth for smaller.

Here's how the steps are calculated.

Recap

In the last post, we ended with four calculations needed to get the slope and intercept, and thus the "starting size" and "rise over width" of how you want your base font to scale. Those calculations and their inputs were:

base_fontsize: number;   // The base font size from which all fonts will be
                         // calculated. Usually 16px
max_font_scale: number;  // How large you want the base font to scale on the
                         // biggest screen. Usually about 1.1 or 1.2
min_font_scale: number;  // How small you want the base font to scale on the
                         // smallest screen. Often 0.75 or 0.8
low_screenwidth: number  // The screensize below which scaling should stop
high_screenwidth: number // The screensize above which scaling should stop

high_fontsize = base_fontsize * max_font_scale;
low_fontsize = base_fontsize * min_font_scale;
scale_factor = (high_fontsize - low_fontsize) / (high_screenwidth - low_screenwidth);
start_fontsize = (low_fontsize - (scale_factor * low_screenwidth)) / base_fontsize;

A bigger step

The most simple bigger step is just to multiply the font_scale numbers by some factor, say 1.2 or 1.25. And, in the most simple Utopia scales, that's exactly what they do. Since multiplication is commutative, the "step 1" is just:

step_scale: number;      // How much larger you want the next font step to be,
                         // something like 1.2 or 1.25;
low_fontsize = base_fontsize * min_font_scale * step_scale;
high_fontsize = base_fontsize * max_font_scale * step_scale;

But what about the next step? That's where things get... exponential.

step_scale: number;      // How much larger you want the next font step to be,
                         // something like 1.2 or 1.25;
low_fontsize = base_fontsize * min_font_scale * Math.pow(step_scale, step_number);
high_fontsize = base_fontsize * max_font_scale * Math.pow(step_scale, step_number);

If you choose step_scale=1.2, for example, the size scaling from -2 through +3 would be [0.7, 0.83, 1, 1.2, 1.45, 1.70]; and your base font sizes become [11, 13.33, 16, 19.2, 23, 27.6].

The result looks something like this:

Linearity is for simple minds.

Utopia goes one step further. They are of the opinion that the scales look better if the high end changes more rapidly than the low end, so their calculations become:

low_step_scale: number;  // How much you want to scale the low end of the next font step;
high_step_scale: number; // How much you want to scale the high end of the next font step;
low_fontsize = base_fontsize * min_font_scale * Math.pow(low_step_scale, step_number);
high_fontsize = base_fontsize * max_font_scale * Math.pow(high_step_scale, step_number);

As long as your containers are also sized in rem, everything works out nicely.

The result looks something like this:

If you've used the Utopia website and ever wondered what they heck they mean by things like "major third" and "minor fifth," those are descriptions of musical frequencies, and how quickly notes go up or down in pitch within an octave; the ratio of a note's pitch to some base note is called the semitone, and the ratio of the smallest change within common classical tunings is called an interval. The names and ratios Utopia uses are derived from the Just Tuning intervals. (I'm not a musician; this description is probably horribly garbled to someone who understands musical theory.)

Keep things simple for spacing.

One thing to note is that for spacing, for how much padding, margin, and gaps should change, those should also be calculated in REM for consistency but, again, the designers at Utopia emphasize that the step_scale should be the same at both ends. This creates a more harmonious look, without excessive whitespace on larger devices.

... and that's it. That's the entirety of the system. There are six numbers to configure the whole thing, plus the number of steps smaller and larger that you want your system to cover, as the exponents to the scaling calculations.

As a demo, you can click on the settings wheel in the upper right hand corner of the page and it will bring up a little tool you can use to set those values, and the page will respond to your changes, showing you how these ratios work and what this humble website looks like with different ratios. You never know; you might find one you like.

Sadly, I don't store those anywhere, not even in cookies^{(this website does not store any data about you, ever)}; they're kept in the session buffer, so if you close the tab your choices go away. At least, for now they do.