CSS & Typography: Uniform Vertical Alignment of Number Descenders?

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.

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.

1 Changing the font isn't an option– it's part of a site wide design that uses Georgia. – j-man86 Jun 16 '10 at 15:57 5 In a nutshell, then, you're screwed. Any attempt to vertically center Georgia numeric characters will be a gigantic kludge and won't look satisfactory even if you succeed.

The fact is, the 3, 4, 5, 6, 7, 8 and 9 in Georgia are larger than the 0, 1 and 2. – Robusto Jun 16 '10 at 16:04 Just to note that some fonts contain a set of "old style figures" (as per Georgia) in addition to a set of "lining figures" (as per Times NR) to cover different typesetting scenarios, but this is more relevant to high-end print design. – e100 Aug 2 '10 at 13:55.

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 '' . $num . ''; 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 ''; Again, just some things I would try out, not certain if they'd work.

It'll work, but you'll have reams of extra CSS and it's a total kludge, as mentioned in the comment above. I wouldn't recommend this. Just pick a reasonable line height and pad the top and bottom of the characters if at all possible with a couple of pixels of extra space.

– nickb Jan 11 at 8:02.

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.

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.

1 Even with padding tricks he'd still have the problem that the 0, 1 and 2 are smaller than the rest of the numbers. Which would, let's face it, look at least as disconcerting as the descender/ascender disparity. – Robusto Jun 16 '10 at 16:43 That is correct.As I said, my opinion is that Georgia is bad for showing numbers.

Then again, I am not a graphic designer for a reason. :-) – Franci Penov Jun 16 '10 at 16:53.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.