Typography tokens, done with the Figma Tokens plugin
A quick overview of how I create my typography in Figma in a simple, dynamic, and interconnected way, with the help of the Figma Tokens plug-in.
Ratios
Who loves ratios?! 😒
Ratios calm us down, bringing a seeming order and consistency, whispering in our ears: “it’s okay, I can be your scapegoat”.
Humans, Lizzards and Designers seem to love consistency. So we embrace systems, grids, increments, ratios, and anything that can contribute to the balance, harmony, familiarity, and affordance of our crafts. That, or we just want to show off some algoritmic-quantum-math-hacker skills so they don’t just see us drawing dots and stripes all day long.
Some of the most common ratios are:
1.067 is the Minor Second
1.125 is the Major Second
1.200 is the Minor Third
1.250 is the Major Third
1.333 is the Perfect Fourth
1.414 is the Augmented Fourth
1.500 is the Perfect Fifth
1.618 is the beloved Golder Ratio
But at the end of the day, you can use any number you want, as long as you consistently stick to that value.
Something I’ve realized is that the denser and more complex my interface is, the lower the ratio I tend to use.
Base
The base describes the font size value used to calculate all typography font sizes.
Most of the times I equal base to body font size. Then, instead of describing “body = 12pt” I do “body = base”.
I find 12pt to 13.5pt / 16px to 18px to be a good body font size.
Calculation
With ratio and base I can now do simple math to figure out the remaining typographic levels/scales needed for my system.
Lets start by calculating H5 font size by multiplying base 12pt x 1.2 (Minor Third) = 14.4pt (please control your OCD, we will take care of those decimals later on).
Then I can use the resulting H5 value to now calculate H4: 14.4 x 1.2 = 17.28pt.
The smallest adjustment to the ratio or base would have an immediate impact on all source style dependents.
Figma Tokens Plugin
With Figma Tokens Plugin the establishment of these relationships and interdependencies is quite easy to manage.
To learn more about Design Tokens and Figma Tokens Plugin, I suggest two other articles with more detail:
Here’s how the H5 calculation would look like:
Now, let’s finally get rid of that decimal:
Here’s how the H4 calculation would look like:
Conclusion
Once all the font sizes are created, any adjustment to the base or the ratio will have an immediate impact on your interfaces:
But wait, can’t we use that same ratio for the line heights as well?!
