The font Georgia starts at different heights - css

Question

I have the websafe font georgia that is beuatifull for what I want.
The only problem I am having is that the bottom of the font doesn't line up.
http://jsfiddle.net/JW7F8/
<style>
.georgia {
font-family:georgia;
font-size:1.9em;
}​
</style>
<span class="georgia">
1234567890
</span>
​
As you can see in the fiddle is that the 1,2,6 and 8 all start a bit higher than the rest.
The question:
How can I render georgia that it all starts on one line whilst still being able to set the site with XXem.
I do not mind:
splitting up the string
setting different classes
I just need a workable solution that still allows for dynamic sizing.

Answer 1

This is just the style of the font, technically all the font characters line up (if you highlight the text it will show the height of the font character).
You won't be able to consistently line up Georgia font even by splitting the font because the offset will have to vary depending on font size. This could be possible using em's, but it would be hacky at least, and would be very difficult to get working consistently cross browser.
Also, changing the font position will cause Kerning issues.
However, there is another similar font which Georgia was influenced from, which does line up:
Georgia incorporates influences from Clarendon-style typefaces
http://en.wikipedia.org/wiki/Clarendon_(typeface)

Answer 2

For a websafe solution I ended up implementing this: http://jsfiddle.net/JW7F8/2/
<style>
.georgia {
font-family:georgia;
font-size:1.9em;
}
.subitx {
position:relative;
top:0.18em;
}
.subity {
position:relative;
top:0.13em;
font-size:1.2em
}​
</style>
<span class="georgia">
<span class="subity">1</span><span class="subity">2</span>345<span class="subitx">6</span>7<span class="subitx">8</span>9<span class="subity">0</span>
</span>
Only shame is the fonts that are sized up are bolder than the rest.
I really wish there were more web safe fonts that work cross browser... sigh
​

Answer 3

The Georgia font has old-style digits, i.e. digits that vary in height and may extend below the baseline too.
Most fonts that people use on web page have modern-style “lining” digits, all digits being of equal height, roughly the same as uppercase letters.
Some fonts contain both. It has relatively recently become possible to choose between such alternatives in CSS, in several browsers, using font-feature-settings. But Georgia has only old-style digits.
It is best to choose a different font if you think that such a fundamental feature is not suitable for your text.
However, on WebKit browsers (Chrome, Safari), using #font-face (for local fonts, not embedded) and unicode-range, you could specify that digits be taken from another font. It’s technically simple but not really a good idea:
#font-face {
font-family: Georgiax;
src: local("Times New Roman");
unicode-range: U+30-39;
}
#font-face {
font-family: Georgiax;
src: local("Georgia");
unicode-range: U+0-29, U+40-10FFFF;
}
Then you would just use font-family: Georgiax as if it were a real font family. But as said, this technique is not supported by other than WebKit browsers, and taking digits from another font means a typographic blunder.
P.S. Georgia is not web-safe. No font is. You won’t find it on an Android, for example.