A Typescale Creation Tool
Defining a Typescale
A typescale, or typographic scale, groups all the variants of a font or group of fonts used within a design system.
What's Different About this Typescale Generator
Typescale Garden stands out as a versatile tool for generating typographic scales based on various relationships. What sets it apart is its superior configurability compared to other tools. Notably, it offers the flexibility to create two sets of related typographic scales – one tailored for phones and small devices, and the other optimized for larger screens.
Why Two Typescales?
In the realm of printed media, designers knew the format they were working with, allowing them to craft an ideal typographic scale based on media size and viewing distance. However, with the influx of digital technology, the predictability of screen sizes and usage scenarios diminished, leading to a significant challenge.
The Desktop vs Mobile Ratios Dilemma
In a Nutshell
The one-size-fits-all approach for fonts across various screen sizes poses a significant problem. Proportional scaling can result in either oversized fonts for headings on smaller screens or sizes non-conforming to accessibility standards for paragraphs in smaller screens.
Let's Analyze This Scenario
We've a new website, with a Big Bold Brand™️, the obvious solution could be to have a strikingly growing typescale right?
We begin a new file in our new favorite design tool (figma in my case), we work trough picking a font, a spacing system and many other pieces, day comes when we start working on the typographic scale, we explore different ratios, weights, make visual adjustments and we even test it on a couple test pages.
Likely you are doing all of this on a laptop or even a big monitor, which could be keeping you from finding a big problem with your typographic scale until it's too late.
You could even go as far as not testing your font on any design for a small screen, because you're just "testing the font, and the typographic scale".
Process iterates and you've a result you're happy, you make your first page using your new design system and it works well ...until this happens:
Your nice heading, that was taking only two lines in the design, actually needs five in a mobile screen due to the little horizontal space available. But that's easy to solve right? Just make it smaller, once you do so, you realize that now your second heading is bigger than the first one, that's not right!
In an attempt to easily fix it, you scale down everything to a third of it's size on mobile devices, things are looking good, headings preserve their hierarchy and everything fits well. You now go ahead and keep designing that nice landing page, but once you get to a content heavy paragraph, you realize something, the body font just doesn't feel right with the scaling rule applied, you've gone too far and it's not even accessible. You make it bigger, continue to write within the landing page but now you notice another problem, the body font is bigger than the smallest heading, that's not right either!
The problem has made obvious by now, the typographic scale you designed for desktop devices is not going to be easy to adjust for mobile devices, but going trough all of the math, observation and relationships again is going to introduce quite some work.
If you've ever found yourself in the scenario above, maybe you where iterating in the same way I do, that's why I created this tool, looking to continue to have the flexibility of creating a new typescale for each project as I enjoy to do, but keeping me from having to make the same processes and decisions at least twice just to explore a typographic scale.