Automatic.css’s typography system controls the font size of headings across your site.
All heading sizes are automatically responsive, and unlike with other frameworks, heading sizes in Automatic.css follow a perfect mathematical scale.
Fluid Heading Setup
Next, you’re asked to set your base font size for fluid headings.
The “base” font size serves two purposes:
- It sets the default size of H4 headings on desktop.
- It sets the starting point for the mathematical typography scale (for other sizes)
While these values are stated in pixel units, they’re converted to rem on the back end. Automatic.css uses rem, em, and dynamic units exclusively.
The “H5” and “H6” sizes are scaled *down* from the “H4” size while all the other sizes are scaled up.
Fluid Heading Scales
The second most crucial thing to customize within Automatic.css is the heading scales. The scales control the degree of variance between heading sizes.
You can choose from popular typography scales or set your scale manually.
It’s common to want to use a tighter scale on mobile devices than on desktop since mobile devices don’t have enough room to fit more extreme scales, so Automatic.css lets you set the desktop and mobile scales independently.
If you don’t want the scale to change between devices, make the Typography Scale and Mobile Typography Scale equal (double-check that the scale you’ve chosen works well on all devices).
Note: To generate a hierarchy, the scale values must be greater than 1.
Fluid Heading Overrides
You can manually override heading sizes in Automatic.css. When you override a size, you’re effectively removing it from the mathematical scale. No sizes above or below the size you’ve overridden will be affected.
To override a size, input a value into the min or max field. The min field controls the bottom end of the fluid range. The max field controls the top (desktop) end of the range. These values are plugged into the clamp() and calc() functions to ensure these custom sizes are automatically responsive.
Note: You can override the max without overriding the min. The clamp function will pair your new max value with the default min value.
H5 & H6 Minimums
Because you have complete control over the type scale, creating a hierarchy where “S” and “XS” text sizes are too small and inaccessible for most users is possible.
As a protection, you can use the “min” fields in the text overrides for these sizes to set fixed minimums that “S” and “XS” will never go below.
How do I dial in the proper font sizes?
The primary values controlling font sizes in Automatic are the base and scale values.
The Base sizes allow you to adjust ALL SIZES EVENLY.
The Scales allow you to adjust the VARIANCE between sizes (larger scales create a larger variance, and smaller scales create more minor variance).