How to create a vertical rhythm using ems on headings

[PublicSphere]

I'm trying to create a vertical rhythm on my page.

The rhythm I'm working to is 18px.

I've reset the font size to 62.5% (10px) and I'm working with a 12px (1.2em) paragraph font size, with 150% line-height (18px) and a 0 1.5em margin (18px).

That's all fine and the rhythm is working fine on the paragraphs.

On the heading 1 I've got 3.6em/150%, which also works fine as it's 54px line-height (3 x 18px) -- so that flows correctly across one or two lines.

However I'm completely stuck trying to get a 3em heading (my heading 2) to align correctly when it spans 1 or 2 lines.

I'm using 3em/150%, which is a 45px line-height. That means to get it to align to the grid it needs an additional 9px (which is 0.3 x 3em).

Without increasing the line-height, how can I add the extra 0.3em to the heading 2 to give it vertical rhythm?

If I add margin to the top of the h2 it works when the heading is one line but it breaks the rhythm if the heading spans two lines.

Is it possible to keep this rhythm without increasing the line-height past 150%?

Thanks in advance for any help.



Here's my CSS:

body, h1, h2, h3, h4, h5, p, ul, ol, li, blockquote, cite { padding: 0; margin : 0; }

body { background: url(grid.png) 0 0; font-size: 62.5%; }
html>body { font-size: 10px; }

.wrapper { max-width: 960px; min-width: 320px; }

p { font: 1.2em/150% Helvetica, sans-serif; color: #333; margin: 1.5em 0 1.5em 0; background:#ccc; }

h1 { font: normal 3.6em/150% Georgia, "Times New Roman", Times, serif; color: #333; background: Red; }

h2 { font: normal 3em/150% Georgia, "Times New Roman", Times, serif; color: #333; padding: 0.3em 0 0 0; background: Blue; }

h3 { font: normal 2.4em/150% Georgia, "Times New Roman", Times, serif; color: #333; background: Green; }

[alt131]

Hi PublicSphere, I've read quite a bit of the literature on vertical rhythms, but never seen a coder consciously doing it like this - so very interesting.

My first thought isn't css, but semantics and content writing: A header briefly describes the "section" of content that follows, so usually just a few words. Headers of more than one line sound more like sentences - and therefore more like an introduction - rather than a header.

Despite your good explanation, I can't quite visualise where you want the extra 0.3em. The reason is that my understanding of vertical rhythms are they would be achieved by using a margin or padding to add the 0.3em to the top of the h2, and then setting a smaller margin/padding at the bottom. As you've already tried margin-top, maybe I haven't understood properly.

The other thought was setting ye increase on h2:first-line (or first-letter if supporting older versions).

[PublicSphere]

Hi and thanks alt131.

I would like to support multiple line headings, because, although they are far rarer than single line headings, they do occur from time to time. Since we're using a CMS with multiple authors, it would be great to have multiple heading line support for the vertical rhythm.

Also I'm using responsive design with a flexible width layout, so headings might go multiple line on mobile devices. I think the answer to that problem is to use an @media query that selects a different font-size when displaying the page on smaller resolutions to reduce the risk of going multiple lines on headings.

I've tried the margin-top -- which is my preferred solution. That's fine with one line, but of course if you have two lines there is still only one margin-top, which means only one 0.3em extra rather than two, which is what you need if there are two lines. Also you have the problem of margin-collapse to get around.

I think there must be a way to do it. I just can't figure it out!

There must be a CSS master out there who can work this one out!

[lucy24]

I've reset the font size to 62.5% (10px) and I'm working with a 12px (1.2em) paragraph font size

In other words, you've created a design that requires the viewer to have 20-20 vision and be using a full-size monitor. Does your target audience consist entirely of able-bodied college students?

[alt131]

Hi Publicsphere, I doubt you will find anyone who considers themselves a css master in this forum, but I'm sure we can assist if you would just clarify where you want the extra "space":
1. Above the first line
2. Below the second line
3. Between the two lines
4. Combination
5. All

Margin collapse is so easy to avoid it isn't really a factor. If you want only one of the above, or a combination, then some variation on asymmetrical margin/padding should do it, especially when combined with :first-letter/:first-line. You may lose it on small screens that lack full css support as yet, but at these sizes I'm not convinced it would be that noticeable. If you want all, then why is line-height not an option?

[edit reason]Formatting![/edit]