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
http://www.cs.tut.fi/~jkorpela/x-height.html

Aspect values for web fonts
http://www.barrypearson.co.uk/articles/text/aspect_values.htm

x-height, etc.
http://www.brunildo.org/test/fontlist3.html
http://www.brunildo.org/test/xheight.pl

Most common serif fonts found/installed on Windows, Mac and Linux
http://www.codestyle.org/css/font-family/sampler-Serif.shtml

> 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
font.

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
Linux.

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
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Thursday, 12 January 2012 21:49:57 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT