CSS - display text on descent instead of baseline?

Question

Is there a way to display text at the descent height of the line instead of the baseline?

Please refer to the following pages:

http://en.wikipedia.org/wiki/Baseline_(typography )

and

http://jsfiddle.net/YPPnU/

The goal is to make the bottom of my text (as depicted on the violin) flush with the bottom of the H1 block without using images.

I understand that this is a flash if I use descending characters (p, q, etc.), however I will never use them for the scope of this project. I need characters without descenders to be flush with the bottom of the h1 block.

I tried various settings with positioning and negative margins, but this creates two problems 1) h1 height is messed up. 2) the amount of negative bottom may vary depending on the font used. Is there a “right” way to do this?

edit Please see Comments for additional updates ....

The best way to work is here: http://jsfiddle.net/YPPnU/23/

But I would prefer not a “guest” in line height

In addition, I realized that another option is to use webfont, where the bottom of all the characters was placed on the trigger instead of the baseline, but I can not find it in google. Does anyone know if such a thing exists?

Answer 1

What about vertical-align: bottom with line-height: 65% ?

http://jsfiddle.net/y53uK/