You’ll then repeat the process for every breakpoint, as you flesh them out.
You might have noticed that I conveniently didn’t mention the “light” spec that is shown in the screenshots. Sometimes, a project will have some type levels in opposite brightness color schemes, in which case you could set the type scale just like in the screenshots, or expand any other way you consider relevant. But I generally stick to setting the styles in their intended color, documenting only the level (color, tracking, line-height and paragraph space) in its breakpoints, in order to keep it as bare as possible. When needed, I just manage color variations manually using Document Colors. This way, I don’t have to update 6 colors of the same style in two breakpoints if I simply need to adjust the line-height. Furthermore, by selecting colors from the Document Colors, you’re making sure that you’re using only specific colors you selected (let’s be honest, who never came across a 50-shades-of-similar-grey type of situation when readying design files for hand-off to devs?).
Do I need a formal type scale?
While we haven’t dived into the actual theory of defining a type scale (perhaps in another article), the question remains pertinent. I remember that in my beginnings as a designer, I was always eager to systemize my designs, even if the scale of them didn’t call for it. In retrospect, it allowed me to appropriate the concept of it, preparing me for when the proper occasion arose.
Everyone gets better at gauging what is the optimal ratio of minimal effort to maximum yield with their tools. In the end, one could argue that although the design system’s components of big and small projects, such as a type scale, differ in how formally they have been established, they are there regardless.
In practice, as soon as a website has more than two pages, basic design patterns should have emerged and that’s where a type scale will start to form itself, so you might as well make your life easier and set a type scale early. Additionally, it makes the developers’ lives easier to have well defined specs.
Thank you for reading!