line-height suggestions and easier alignment

Hello,

I've often been frustrated by how line-height works in CSS. The value is 
added equally to the top and bottom of each line. This is different to 
the behaviour of programs such as InDesign, Illustrator etc which add 
leading (line-height) to the bottom of each line. I believe this 
behaviour to be far easier to control and useful.

Examples:

I have a site with three columns. The text in each column needs to line 
up vertically, however the central column has a header set in larger 
type and requires a bigger line-height. If I increase the line-height it 
gets applied top and bottom to each line pushing the title down the page 
a few pixels. I then need to use a horrible hack such as a negative top 
margin to to fix this.

This 'fix' will not work if the box has a background colour that also 
needs to align.

I think we either need a rule to supplement line-height such as 
line-height-align/line-height-origin. Or perhaps base-line: top / middle 
/ bottom.

Or maybe have a leading rule that behaves in the same manner that has 
been used since movable type was first invented and where it gets it's 
name from.I could then ditch line-height all together as I find it had 
to find any practical uses for the current implementation.

Any thoughts?

Regards

Ric

Received on Saturday, 24 December 2011 08:41:51 UTC