7
The typography scale that broke my design system
Spent 3 days trying to get a consistent type ramp. 8 sizes felt like too many. 3 felt too few. Figured out the sweet spot at 5 sizes after staring at a spreadsheet for 6 hours straight. My mistake was trying to match every single use case upfront instead of just the 80 percent common ones. Anyone else waste way too long on this?
3 comments
Log in to join the discussion
Log In3 Comments
leebrown3d ago
The 80 percent rule is basically the Pareto principle for people who stare at font sizes all day, congrats you reinvented business school math. I spent a whole week once trying to get my h2 to look right on a 320px wide phone and finally realized nobody reads headers that small anyway. At this point I think the real design system killer is just having to admit you need fewer options when you already bought the font license for all those extra weights.
8
danieljenkins1mo ago
Honestly, before reading this I was on team "more sizes equals better control" and it was a total time sink. Your point about matching the 80 percent common uses instead of every edge case finally clicked for me. I've been trimming my own design tokens down to 5 this week and it's way less headache than the 8 size mess I had before.
3
mark_fisher481mo ago
Six months ago I was running a design system with 12 sizes and it was a total mess on every screen size. Your 80 percent rule makes a lot of sense though, I finally get why matching every edge case upfront just wastes time. I dropped mine down to 5 yesterday and the type ramp feels way cleaner and faster to work with on mobile screens.
2