Back to CSS for JavaScript Developers: Make It Pretty (and Fast)

Typography and Spacing That Doesn’t Drive Users Crazy

If there's one thing that separates a site that feels good from one that just... exists, it's typography. You can have the cleanest layout and the prettiest colors, but if your text looks like a squashed paragraph from 2002, no one's sticking around. I learned this the hard way—on a personal blog where everything looked “fine” on my screen, but users bounced faster than I could say font-family. In this lesson, we’ll explore the real MVPs of readability: line height, font sizing, and spacing. These subtle tweaks do the heavy lifting that makes a site feel polished, accessible, and honestly, just more enjoyable to read.

Line Height: The Secret to Readable Text

You can write the most brilliant paragraph ever, but if your lines are packed like sardines, no one’s going to read it. Line height is about giving your content room to breathe.

Start here:

css
1
2
3
          body {
  line-height: 1.5;
}

That’s the baseline. But it depends on your font and size—sometimes 1.6 or 1.75 works better. The goal is comfort. Not too tight, not too loose.

If you’re using a heading font that’s tall or wide, reduce the line height:

css
1
2
3
          h1, h2, h3 {
  line-height: 1.2;
}

For body text, go looser:

css
1
2
3
          p {
  line-height: 1.7;
}

Want to get nerdy? Try setting line-height without a unit. That makes it scale better with different font sizes across breakpoints.

Quick mistake I made:

I once used line-height: 2em; thinking “more space = better,” but it made every heading look like a weird poem. Trust your eyes. Not the number.

Font Sizing: It’s Not Just About Pixels

It’s 2025. Please stop using px for everything.

Start with rem. Why? It respects user preferences and scales better across devices. If your base font size is 16px, then:

css
1
2
3
4
5
6
7
          body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

Need a fluid scale? Try clamp():

css
1
2
3
          h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

This makes your text grow and shrink based on the viewport size—no media queries required.

If you’ve ever visited a site and the text looked weirdly small on a massive screen, or awkwardly huge on mobile, clamp() is your new best friend. It saved me from hand-coding ten breakpoints for every blog header I ever made.

And for a quick primer on modern font sizing strategies, this guide on fluid typography is a great reference.

Creating Perfect Spacing for Readability

Spacing isn’t just a design thing. It’s a readability thing.

Too little space and your content feels jammed. Too much and it floats away from itself.

Start with vertical rhythm:

css
1
2
3
          p + p {
  margin-top: 1rem;
}

This tiny rule makes paragraphs easier to digest. Want to go a step further?

css
1
2
3
4
5
6
7
          section {
  margin-bottom: 3rem;
}

h2 {
  margin-bottom: 1.25rem;
}

You’re building a visual flow. Headline → body → break → new thought. It’s like writing a well-paced essay, but with code.

For our course project, here’s how we’ll apply it:

css
1
2
3
4
5
6
7
8
9
10
11
          .projects h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.projects p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

And for the love of legibility, check your contrast. Use tools like Contrast Checker to make sure your color choices don’t destroy readability.

What’s Next?

Now that your text looks amazing and your spacing doesn’t feel like an afterthought, it’s time to have a little fun. Up next, we’ll sprinkle some magic with Shadows, Borders & Transitions (The Fun Stuff). This is where things start to feel interactive—and a little bit fancy