Designing with One Font Size and a Steady Rhythm
I recently changed the styling of this site—especially the page you’re reading right now. Up until now, I was using @tailwindcss/typography
out of the box.
But since I’ve built a site where I can control everything myself, I thought, why not stop relying on someone else’s polished design and try shaping it on my own?
This time, I focused on two things: using a single font size and keeping a steady vertical rhythm. I went all in and designed the page with just one font size, relying only on font weight and spacing to show structure.
Changing font sizes creates big “jumps” in the flow, which makes your eyes skim too quickly. That’s fine if you just want to scan an article (and let’s be honest, that’s how most web articles are read), but if you actually want to sit down and read carefully, those jumps can feel like noise.
I also worked on keeping a consistent rhythm as you scroll down. Specifically, I designed everything to fit into a 24px grid. On the web, unlike in print design, there aren’t really physical constraints that force you to stick to a grid.
For me, though, it’s more of a design philosophy. I find beauty in rational, orderly structure, so even if it isn’t strictly necessary, I like my work to reflect that.
Of course, I might change things again whenever I feel like it. That’s the real joy of running your own site: you can shape and reshape it however you want.