Picky Style: Uneven Paragraph Margins

Posted

An illustration of uneven paragraph margins.

A Quick Introduction About This Series

As someone currently working in-house, I spend a lot of time thinking about and experimenting with the myriad different ways my choices affect the design of a project. I can get really picky about details searching for the pinnacle of a design. My desire is to create a final product that works well in every browser, reads comfortably for every user, is flexible and forgiving enough to handle the abuse that hundreds of well-meaning content owners throw at it, and looks good on top of all that. It’s a never-ending process.

This series will probably focus mainly on my current charge, the website for The Evergreen State College. The bulk of the design work has remained pretty consistent for the last couple years, but I continue to make a stream of subtle tweaks from day to day. Other than changing up hero photos on the homepage, I bet most people don’t notice the number of styles that get changed on a weekly basis, much less changes to the underlying structure.

While my portfolio has a pretty good overview of the project, I want to take some time to talk about some of the smaller—even micro—design decisions that I made, just to bring a modest bit of attention to the sheen of sweat on these details. Thus, here is my first attempt.

Uneven Paragraph Margins

The Problem: Detached Headings

Early on in the design of The Evergreen State College website, my boss told me she didn’t like how far away headings seemed to be from their content. My initial solution was to close up the space by removing the margins between them, but I wasn’t too keen on sacrificing the nice white space in the design. With no margins between them, the content felt too cramped.

The Solution: Uneven Paragraph Margins

I ultimately settled on setting the bottom paragraph margin to 15 pixels, and the top margin to 7.5 pixels. The result is that the first paragraph will have a small top margin, but because of collapsing margins, all of the following paragraphs will have a consistent 15 pixels between them. (See the image above.)

If margins collapse to equal the greater number, then you may think there’s no point to making them uneven. However, the benefit of this system becomes visible when I mix the paragraphs with my headings. That’s because each of my headings, h1 through h6, have their bottom margins set to 7.5 pixels. Those bottom margins collapse with my paragraphs’ top margins, which brings my headings closer to my paragraphs.

Heading margins, too, are uneven.

It’s a fairly uncommon solution, but it works really well! It negotiates the problem between headings being too far from their content, or too cozy to be comfortable. The uneven margins method connect headings to their content, but still leaves breathing room between them.

Headings will also have generous top margins, usually ranging from 30 to 45 pixels, which means the system leaves ample space between multiple headings, like in instances when I have an h3 directly following an h2.

Multiple headings, stacked on top of each other, break up blocks of text and still look nice.

I admit, I don’t typically go around inspecting the paragraph margins in the designs of others, but so far I’ve not noticed anybody else doing margins quite like this. Of course, that’s not to claim I invented the concept—I actually appropriated it from Mark Boulton’s table CSS.

To recap, uneven margins maintain the association between headings and content, while still providing enough space for the eye to find rest.

That wraps that up. Again, this is the first of a series I’m planning, with at least three more brief articles already in the works. If you liked it, let me know, and if there’s something specific you want to hear about, please request it in the comments below, or, if they’re already closed, get at me on Twitter.

Coming up next: vertical cadence and line-height.

Addendum

Though I represented my margins in pixels here, I style with ems and rems, because of their proportional sizing power. I admit that I do sometimes question the value of these relative units since we now live in the days where pixel values (technically a relative unit, anyway) and browser zooms have pretty consistent behavior. I couldn’t say for sure, but in the meantime, I’ll keep plugging away with what works for me. Just, someone let me know if I get into cargo cult territory.

Comments

No comments allowed at this time. Read my commenting policy.

← Older Newer →