Utopian CSS generator, an iteration

We've just published a second generator for Utopia.

The initial controls are the same as the first, you control the viewport, base size and type scale for your minimum and maximum target screens, and the generator will provide project-ready CSS.

Originally, the idea of leaving the configurable options within the :root declaration seemed ideal; it allowed you to tweak the parameters without recalculating each time. And for type scale purists, or for when you're starting out on a project, that may well still be the best option - we don't plan on sunsetting that generator.

But having applied these Utopian principles to a few more projects, we were finding we wanted a little more control over each step in the scale.

Take this scale:

Step	Min	Max
0	19.00	22.00
1	22.80	26.40
2	27.36	31.68
3	32.83	38.02
4	39.40	45.62
5	47.28	54.74
6	56.73	65.69
7	68.08	78.83

It uses a variable base size of 19-22px, but a fixed minor third type scale of 1.2. This gives us subtle shifts between font sizes; step 5 only shifts 7px between the two breakpoints. This is perfect if you need a slow ramp up to larger sizes, but does have a downside. If you're after a nice chunky heading size (let's say step 7 rounding out at 78.83px), you have to accept that it'll be 68px on the smallest screen. That's generally too large on a mobile device, leaving you with overflowing or wrapping words.

The original generator baked those two values into a complex calculation, making it hard to unpick. The new generator -calculates the values for each step within the Utopia website, but leaves them tweakable in your codebase:

--f-7-min: 68.08;
--f-7-max: 78.83;
--step-7: calc(((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min)) * var(--fluid-bp));

Overriding the steps

With the new generator, you can now bring that minimum value down to something a bit more reasonable. Be aware, by doing this, you are in effect changing the type scale for this step, so the rhythm between each step will be altered.

The first option is to manually change the minimum, say to 50px:

--f-7-min: 50;
--f-7-max: 78.83;
--step-7: calc(((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min)) * var(--fluid-bp));

But that's pretty arbitrary. It would be better if we could keep things systematic. Thanks to custom properties, you can feed the 'output' of another step, into the input of this step:

/* Start at the same point as step 5 */
--f-7-min: var(--f-5-min);

/* Start at step 4's end point */
--f-7-min: var(--f-4-max);

Why another generator?

The original generator prioritised the integrity of the type scales, which still works well for certain projects. This new generator introduces a layer of flexibility, removing restrictions without sacrificing the entire system. Utopia is an 'opinionated' methodology, that sets sensible foundations for your responsive web projects; this iteration exposes those opinions for you to tweak to taste.