CSS & Typography: Uniform Vertical Alignment of Number Descenders

Question

Check out the following screenshot: http://www.jesserosenfield.com/beta/descenders.png

My problem is that descending (like the "7" in the screenshot) numbers are vertically aligned with the bottom of the span, while other numbers are vertically aligned more towards the middle. Is there a way to "equalize" the vertical alignment of all numbers, regardless of ascender / descender?

Thanks!

The code:

<div class="postDate">
     <span class="postDay"><?php the_time('j'); ?></span><br/>
     <span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->

and CSS

.postDate {
    width: 99px;
    height: 74px;
    position: relative;
    left: -30px;
    font-family: Georgia, "times new roman", times, serif;
    background: url(images/dateFlag.png) no-repeat;
    text-align: center;
    color: #ffffcc;
    padding-top: 9px;
    }

.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}

Answer 1

Use a different font. Arial puts all the bottoms of its numbers on the same baseline. So does Microsoft Sans Serif. So does Trebuchet. So, for that matter, does Times New Roman.

The fact is, numbers have different ascenders and descenders depending on the typeface. What typographers do is center the "body" of the number based on what they believe looks good, then go up or down from there. Usually that variation is on serif faces, but not always. You can't control it, in any case. BTW, the 3, 4, 5, 7 and 9 are the ones that usually have the descenders and the 6 and 8 usually have the ascenders.

Answer 2

All you can control is the vertical alignment of the text baseline within its parent. However, you can't control the specific font position of the various characters outlines with regards to the text baseline.

As @Robusto said, one solution is to change the font you are using, so that all numbers end at the baseline. Georgia is particularly bad for numbers, because some numbers (36 or 84 for example) look weird due to one of the digits having ascender and the other having a descender. (Not that you'll have to worry about 36th of May of course :-))

Another solution is to stay with Georgia font, but to increase the vertical padding so that the descenders on 3, 4, 5, 7 and 9 are not as prominent. In your case adding 4-5px below and above the number ought to do it. Of course, that would increase the overall size of the date flag, which might not be desired.

The alternative to increasing the vertical padding that much would be to tweak down the font size couple of pixels, which would make the ascenders and descenders less prominent. This one works only if the user's browser zoom is set at 100% and regular DPI. If the zoom is at 120% or the user uses high DPI, the font visual size is increased and the ascenders/descenders are more prominent.

Answer 3

I'm not sure if it would work, but one of the things I would try:

It looks like you have a php function to output the day and month. Instead of just outputting the number why not try wrapping it in a span that positions/styles each number appropriately.

Rough sketch of CSS & PHP:

.georgiaFixNum7 {
    position: relative;
    top: 5px;
    font-size: 18px;
}


echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';

I understand the need for a pure css/html solution with the fonts, but if you are really desperate you could try using seperate images to display the numbers. Your php function would need to work in a similar way.

echo '<img src="/img/' . $num . '.png" />';

Again, just some things I would try out, not certain if they'd work.

Answer 4

Georgia has old-style figures. If you really need lining figures, you should check if there is an OpenType version of Georgia that has this option.

That said, I don't see the problem in using old-style figures in the context you show; no need to have everything align everywhere all the time :)
Just set up spacing so that there is reasonable space above and below.