10/03/2023
Typographic scale is at the basics of every website we design. It’s an invaluable tool that helps us create websites that look good and functions great across all screen sizes – and with the tools we have made, we can do it fast.
Typographic scale is a method for creating balanced and readable font sizes. With a solid foundation in typography, you are well on the way to create cohesive and accessible experience of your website. The scale can also be used to create margin and spaces, that corresponds to the typography for a balanced and eye pleasing design.
Typographical scale uses a lot of math, and it can be difficult to implement and test when done manually, but luckily computers and code are great at math. With CSS variables and a few math functions, you can create a system that controls the core functions of your design. Best off all, this is done without breakpoint.
With just three simple variables you can change the scale for all your typography and the margins and white space on your site. With this tool, you can very quickly test how various types work with different scales and how the overall layout reacts to the changes.
The three variables are, type scale, minimum font size and maximum font size. Once those are set, all sizes and margins are calculated.
Try it yourself. In the CSS column change the values of --type-scale, --type-root and --type-root-max. The text sizes are 1/10 size, so 16px = 1.6rem is equal to 1.6 for the variable and so forth. Then change the width of the live preview area to see how the size change with the width of the view port.
Responsive typographic scale for calculating responsive font sizes and margins without the use of breakpoints, with just three simple variables....