Menu
I noticed that some unicode chars are taller than the normal text.
E.g. the diagonal arrows (North East Arrow ↗, South East Arrow ↘, ...), they claim more space on top of the letter than a normal text.
<body style="font-size:48px;">
<div style="border:1px solid #00ff00;float:left;">
1-<br>2-<br>3-<br>4-<br>5-<br>6-<br>7-<br>8-<br>9-
</div>
<div style="border:1px solid #ff0000;float:left;margin-left:5px;">
-1<br>-2 ↗<br>-3<br>-4 ↗<br>-5<br>-6 ↗<br>-7<br>-8 ↗<br>-9
</div>
</body>
http://jsfiddle.net/q5LEt/
You can see the dashes moving down every time an arrow is in the same line.
How can I avoid this behaviour, e.g. by CSS?
514
You can avoid it by explicitly specifying a line-height:
line-height: 1em;
Re the question in the title: The basic answer is that characters are different. An “A” is taller than an “a”, and some special characters can be even taller than “A”. But there’s more. If you mix fonts, there is additional variation, since fonts have been designed differently. For example, “a” in Verdana is much taller than “a” in Calibri, with the same font size.
Re the code example and the jsfiddle: No font family has been declared, so each browser will use its defaults. What happens when I test it on Firefox is that the problem described indeed occurs, for the reason that “normal” characters have been taken from Times New Roman (the common default font), whereas tehe arrow characters—which do not appear in Times New Roman—have been taken from Segoe UI Symbol. Your mileage may vary, but what usually happens is that fallback font used, such as Segoe UI Symbol, has a larger default line height than Times New Roman has. This causes the line as a whole to take more vertical space.
So the issue does not have nothing to do with heights of letters; it depends on properties of the font. (Well, indirectly there is a connection: fonts like Segoe UI Symbol have relatively large default line height set on them, because they contain glyphs that are rather tall.)
You can usually deal with the symptoms by setting line-height, as @KonradRudolph suggests (though the value of 1em, i.e. setting the text solid, would be somewhat extremist, suitable for special cases but not normal texts).
Alternatively, avoid the problem by selecting a list of fonts that contain all the characters you need in the text and declare font-family with such a list as its value. This means that the arrows and the rest of the text is in the same font, which is generally good even for purely typographic reasons. Finding out the list of fonts takes some time; see my Guide to using special characters in HTML for some tips.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
