{Carrer web log}

In the search of ideal line-height

Wednesday, October 23, 2013 { 0 Comments }

I love making typography experiments, browsing the internet I stumble upon one site who had 1,39em line-height (Leading). That is really unusual number for line-height. In the past I was often using the "golden" height in my CSS Typography Frameworks Azbuka and Better Readability Project but every typeface is different and using one "magic" number for all the typefaces seams wrong even that I defended that concept in the past.


I conduct several experiments in photoshop examining different typefaces in the search of common logic, searching what parameter should be using for determine the quality of good line height.

The question is what is ideal line-height size?

In my opinion that will be the minimal amount of distance between the lines where our "eye" wouldn't jump (mix) one line from the other.
In other words we will have clear track for every line in the text without confusing and mixing the lines in the reading process.

How can we determine the ideal line height?

I started with the idea of most repeated letter size in the text or the size of the small letters like a, e, i standardized with x-height.
I think that the x-height can be used like a measure for ideal line height. That is the safe distance between the lines based on most repeated letter size.

So the formula is quite simple:

line-height = font-size + x-height

Helvetica, Arial 1.52
Futura 1.51
Georgia 1.48
Lucida Grande 1.53
Optima 1.47
Palatino 1.47
PT Serif 1.50
Times New Roman 1.45
Verdana 1.55
Tahoma 1.55



Other things to consider font-size is "not" font size, what I mean in the english alphabet the longest letters may be smaller then the font size, example the letter "j" in Helvetica probably the highest letter is english alphabet is only 93px in 100px font. Based on this calculation 93px the height of the j letter + 52px the height of the x letter is 145px line height for Helvetica.

The point of this article is know your font and alphabet and apply the line-height based that font.