There’s lots of information out there about creating typographic systems with modular scale and vertical rhythm.
If you’re new to typographic systems, or don’t have one, I would look into it. They go a long way in establishing visual order and consistency throughout your product.
Visual order increases understanding… visual consistency reinforces your brand… both of which are great for UX…
Many articles explain how to create vertical rhythm via a baseline grid, and how to determine modular scale by working in multiples of your base < p > tag size. But there’s another little something that also influences type systems that people rarely talk about. And I get it because it’s kinda of hard to describe.
Your own design taste.
Okay, maybe it’s a big something.
The only way I can explain it is that there are rules to follow, but if the resulting output doesn’t jibe, then you need to adjust.
For example, people like to have a 1:1.5 or 1:2 ratio between font-size and line-height. But my ratios are more like 1:1.6 — 1:1.8.
Another example, some folks like to set font-size: 12px and line-height: 24px, but I usually go with font-size: 16px and line-height: 26px.
See what I mean?
But fear not, my friend. There’s a tool that will help you sort through it, or at least get you most of the way there before creating a Style Tile or writing one line of CSS: Gridlover
I’ll leave you to check it out for yourself. It’s super easy to use, and even comes with sliders, a grid toggle and CSS output.
Make sure to turn that grid on and off — it helps.
Have fun and until next time,
P.S. I don’t know what’s going on with the kerning (line-spacing) in the screenshot. I only know that I needed an image and had to publish today :)