W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Re: line-height suggestions and easier alignment

From: Gérard Talbot <www-style@gtalbot.org>
Date: Thu, 12 Jan 2012 13:48:46 -0800
Message-ID: <70a4f35192b4e889260da3bbd3463924.squirrel@gtalbot.org>
To: "Alan Gresley" <alan@css-class.com>
Cc: "W3C www-style mailing list" <www-style@w3.org>

Le Jeu 12 janvier 2012 1:01, Alan Gresley a écrit :
> On 12/01/2012 2:43 PM, Alan Gresley wrote:
>> On 12/01/2012 8:15 AM, "Gérard Talbot" wrote:
>>> I believe that an ideal webpage explaining all these concepts
>>> (line-height, line box, inline box, content area, font-size,
>>> vertical-align, etc.) should create a line that emulates/simulates the
>>> baseline.
>> Yes it would. This would require a vertically centered image
>> (linear-gradient are ideal since they work with vendor prefixes ~ each
>> browser can be given slightly different values) with vertical heights in
>> em values.
> I planing on improving my test with a few cross platform fonts (Windows,
> Mac and Linux) and making the page interactive.
> This is a question to all list members (I not a font person). Which
> fonts should I used?

Ideally, it would be to choose 3 font types which have approximatively the
same x-height ratio aspect of font (this is best for several reasons) and
with each font being present on each os (Windows, Mac, Linux).

Estimating the x-height of a font

Aspect values for web fonts

x-height, etc.

Most common serif fonts found/installed on Windows, Mac and Linux

> I thinking of 'Times New Roman', 'Arial', 'Verdana' (since it's a large
> font) and Helvetica.

Arial and Verdana are sans-serif fonts whereas Times New Roman is a serif

Times New Roman has a ratio of 0.45 while Verdana has a ratio of 0.55;
they are not ideal together.

FreeSerif (83% of the time found in Linux distribution) has a x-height
ratio aspect of 0.45. So, FreeSerif along with Times New Roman would meet
my requirements.
And then, Liberation Serif (86% of the time found in Linux distribution)
has a x-height ratio aspect of 0.46: that would be my 2nd choice for

div {font-family: FreeSerif, "Liberation Serif", "Times New Roman", serif;}
You should always start with the most difficult to find font type and then
end with the most available one


The ideal webpage on line box, inline box, line-height, vertical-align,
leading, etc... would be one that uses good diagrams, meaningful examples
and would be exempt of errors.

I have something very clear in mind ... but I very much lack available
time for this.

regards, Gérard
CSS 2.1 Test suite RC6, March 23rd 2011

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Thursday, 12 January 2012 21:49:57 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:35:02 UTC