Line height too large for baseline grid

matsaukeo's picture

Hi All,

First let me confess that I'm approaching this from a web perspective so some of my terminology might not be correct for you. I wanted to see what other people and hopefully people from a more print orientated background thought of this.

I'm trying to make the text align to a baseline grid. I think I understand the principle of vertical rhythm where the main text must return to the rhythm following deviations. I'm doing this by setting up a baseline of 18px and using a line-height of 18px. I'm ignoring spacing between headings and paragraphs for this example.

The main body text is 12/18.

Headings are 24/36 so the line-height is a multiple of the baseline.

That works fine but to my eye, the line-height is too large for the heading - this is especially apparent when there are only 2 lines of heading. To me the line height should be somewhere in between 18 and 36. I could use a line height of 27 but that means that the following text is no longer on the rhythm, its shifted by half of the baseline.

One solution would be to add a margin of 9px so that the space taken up by the heading is still a multiple of 18 (27+9=36). The problem with that if the heading goes over two lines I’d get (27x2)54 + 9 = 63. I won't ever know for sure how many lines the headline will take up.

In Summary:

If I use multiples of the baseline some of my headings will have line heights that are too large.
If I use line heights that seem reasonable I lose my baseline grid meaning that if I have two columns the text won't line up.

Does that make sense or am I totally misunderstanding this? Maybe this is something that print designers come up against all the time and make decisions based on a per project basis. Maybe its just my personal preference that doesn't like the 36px line height.

Any thoughts or pointers would be well appreciated.

riccard0's picture

Here’s how I solved a similar issue, hope it could help.

aluminum's picture

I've played with baseline grid concepts with CSS but I've always found that they fail mathematically and you always end up tweaking it by eye anyways. Add to that browse and type discrepancies and I'd suggest staying sane and go back to eyeballing it.

matsaukeo's picture

Hi Riccard0 - Were you trying to post a link? I don't think it is showing up. I'd be very interested in your solution.

I think the situation is similar to here:

Mathmatically it is possible - but with print you know exactly how many lines each heading is going to take up so you can adjust them based on that knowledge. Presumably until the client asks for a longer headline! That must take ages to re-calculate things!

As for browser consistencies, I've found that if you stick to pixels it all works out very well. Using ems is also fine but IE8 and IE9 (not below) messes up with line-height and ems. I've started to set my font size in ems and line-height in pixels meaning that IE users can still resize their text but the line-height won't grow with it. Its a fairly decent compromise.

riccard0's picture

Mmmh. I was pretty sure there was a link. This:

But, on second sight, my problem was maybe too different.

matsaukeo's picture

Perhaps - but similar in the way you have dealt with headlines that go over 2 lines. I think with your example its all about the size of the heading. - Thanks for posting the link. The layout was very inspiring!

matsaukeo's picture

Hmmmm - hope this doesn't annoy anyone by me dragging this one up again but I keep coming across this. Perhaps there is no fix for this on the web but I'd like to know what print designers do in the situation.

I understand that you set the line-height/leading so that it is in multiples of the baseline. But for my example that's too large.

What would print designers do in this situation? Ignore that the line-height looks a bit odd for the sake of the vertical rhythm or change it and try and shift things so that they return to the rhythm?

Frode Bo Helland's picture

You could write a small script to automatically adjust the margins when necessary. There is no concept of baseline rythm on the web, so efforts to do so will often include some kind of hack.

aluminum's picture

The typical reason for a baseline grid in print is to keep the type in adjacent columns aligned horizontally. Eyeball your blocks of type as you see fit and then adjust the spacing between paragraphs/sections to then accomodate the grid.

On the web this is much more difficult as you don't have the same control over rendering as you do in a DTP app.

matsaukeo's picture

Thanks for the replies!

Aluminium - thanks for that. That's kind of what I was getting when I wanted to know if print designers sort of shift things around because they know things won't change once it has been sent to the printers. It MUST be very annoying though when I client adds extra text at the last minute that just nudges everything out!

I do think that although its difficult on the web its not impossible. Definitely fine if you know that the text is static. You can see this at (you might need to scroll the image I uploaded to see the right column). This is a screenshot that looks consistent across browser. Luckily for this the font is condensed and the line height works in multiples.

Frode frank - This is an idea I started to play around with. There is probably a way of working out the height of the element, and working out if that means it has gone over an even or odd number of lines. Margin/padding could then be used depending on whether its odd or even to make up the overall height to be a multiple of the line height.

Seems to be a bit of a sledgehammer approach but this is an issue I keep coming across so would love this to work. If I get any further I'll post here.

Thanks again

Syndicate content Syndicate content