Is there a correct method to position text at the descent height of a line rather than its baseline?
For more information, please visit:
http://en.wikipedia.org/wiki/Baseline_(typography)
and
The objective is to align the bottom of my text (as shown in the fiddle) with the bottom of the H1 block without relying on images.
I understand that the alignment is achieved by using characters with descenders like 'p' and 'q', but I need characters without descenders to align flush with the H1 block's bottom.
I have attempted different adjustments involving positioning and negative margins, but encountered two issues: 1) it affects the height of the h1 element. 2) the amount of negative bottom margin needed may vary based on the font used. Is there a "proper" way to accomplish this?
edit Please check comments for updates....
The most effective technique can be found here: http://jsfiddle.net/YPPnU/23/
However, I would prefer not to rely on estimations for line-height.
Another option could be to use a webfont where all characters are aligned at the descent instead of the baseline, but I have been unable to locate such a font through Google. Does anyone know if one exists?