I believe that the technique described in the A List Apart article, as mentioned in the code comments, is not being applied correctly.

In order to achieve a consistent vertical rythm, the margins of different html elements are being calculated in proportion to the base font size.

However, the margins of the headings, for example, are set to 1em, the page's base font-size, instead of the base line-height, 1.333em. Secondly, the headings all receive a line-height of 1.333em, which is relative to their own font-size, and not a proportional derivative of the page's base line-height.

For example:

/*
* Headings
*/
h1
{
  font-size: 2em;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font.
                           Remember, a margin specified in ems is relative to
                           the element's font-size, not to the pages' base
                           font size. So, for example, if we want a 1em margin
                           (relative to the base font), we have to divide that
                           length by the element's font-size:
                           1em / 2em = 0.5em */
}

should be:
/*
* Headings
*/
h1
{
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 0.6665em; /* 0.6665em is equivalent to 1.333em in the page's base font.
                           Remember, a margin specified in ems is relative to
                           the element's font-size, not to the pages' base
                           font size. So, for example, if we want a 1.333em margin
                           (relative to the base font), we have to divide that
                           length by the element's font-size:
                           1.333em / 2em = 0.6665em */
  line-height: 0.6665em; /* or multiples of 0.6665em. In fact, when leaving this as the
                           page's base line-height, it may be omitted, because it is inherited.  */
}

Attached patch corrects all occurrences of the erroneous line-height and margin declarations.

Files: 
CommentFileSizeAuthor
#2 Before.png163.87 KBkdebaas
#2 After.png164.98 KBkdebaas
#2 481952_#2.txt9.24 KBkdebaas
zen-line-heights-css.patch3.88 KBkdebaas

Comments

Yeah, the vertical rhythms in the default Zen are kind of ass.

If we're going to set them to some arbitrary value, let's get them looking slightly better. I'll review this patch before a 6.x.-2.0-beta-1 is released.

StatusFileSize
new9.24 KB
new164.98 KB
new163.87 KB

Attached is a new patch against HEAD, and two screenshots of the webpage before and after. Here's what I did:

I used a 12px font size on the page, with a line-height of 18px, to keep calculations sane. Then, for the main content paragraphs, a font-size of 14px, to show how margins and font-sizes are calculated relative to the base font-size. I adjusted the headings accordingly, and corrected the calculations of their margins to be equal to the size of the base line-height instead of the base font.

I changed the margins on all block-level elements to reflect the base line-height, as well as the #with-navbar top margin in the respective layout.css files.

LIMITATIONS:

This patch is as far as I got with reasonable results for an out of the box vertical rythm experience. It doesn't work completely, for example I didn't change the styling of the tabs yet, which obviously break that rythm. Nor did I override any extra core css, such as taxonomy.css, nor the rendering of forms, all of which break the vertical rythm. And I switched off the logo, which obviously doesn't come at a convenient size that is a multiple of the page's line-height.

One could go crazy perfecting this kind of css hocus pocus, especially when you have to start calculating multiples of the line-height out of objects that have borders, padding and margins set, all in ems. The big question is whether that is really worth it for Zen, or how far one should go achieving perfect vertical rythm. But let's have a look at this, and let's at least get rid of the css which erronously set the margins of headings to the size of the base font instead of the base line-height.

[Edit: the proper link to the attachment is: http://drupal.org/files/issues/481952_%232_0.txt ]

Why exactly are we sizing the font in pixels rather than following the W3C's best practice, sizing fonts in ems?

We aren't.

@kbaas i can't access your file, can you repost it with a filename that doesn't include the # character?

It's been more than a year ago since this was posted. Even if I would be able to find the file again, it would probably not apply against HEAD anymore. Sorry about that.

If you feel like taking this up, have a look at the first patch. The essence of the problem lies, among other things, in a misunderstanding of how line-heights are calculated. i.e. what are they relative to:

  1. The headings all receive a line-height of 1.333em, which is relative to their own font-size. This means an actual line-height of 1.333 * fontsize, which is inconsequent. This should be a proportional derivative of the page's base line-height. The best is to omit them, because they are inherited from the base line-height (1.333em becomes 1em when calculated relative to the font-size).
  2. The margins of the headings are set to 1em, the page's base font-size, but should be set to the base line-height, 1.333em.

The second patch was an unfinished attempt to carry through all the corrections that stem from these two misunderstandings. If I ever take this problem up again, it will most likely against the drupal 7 version, I regret to say.

The valiant may want to look at: Compose to a vertical rythm, which is a good guide to setting up the correct css.

Version:6.x-2.x-dev» 7.x-3.x-dev
Component:CSS/HTML Markup» layout.css

Indeed the margins for the block level elements where part of my pre-Drupal "base install" CSS that I wrote about 8 years ago. And I never revisited them. :-p

I've edited comment #2 to add the proper link to the patch. And I'm looking at this today.

Title:Inconsistent line-height declarations in html-elements.cssAdd vertical rhythm to line heights and margins
Status:Needs review» Fixed

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.