Note that most of the css is auto-generated according to the line heigth
volume 004
This is a typographic web design toy, modelled after an A List Apart article How to size text in css(http://www.alistapart.com/articles/howtosizetextincss). It generates css with constant lines aligned to a baseline grid, by calulating em-values for font size and line height.
All rights reversed, Ville Takanen 2007.
Feel free to use the resulting file as you see fit (though I'd appreciate if you'd leave the generator watermark untouched).
in addition to css below, you need to add an IE fix, to enable text resizing in IE. It should be after any other css definitions. Last entry inside <head> should do it.
<!--[if !IE]>-->
body {
font-size:16px;
}
<!--<![endif]-->
To adjust page properties, use the form [css-]floating right of this text. The form uses strip_tags() php function.
Sets the grid baseline height
Sets the body font family. This is overridden by heading font family.
Sets the heading font family. This is overrides body font family.
/*
*Grid em's generated with Typography Toy 1 (http://www.sange.fi/~vtakanen/typography/linefeed.php)
*/
body{
font-size:100%;
line-height:1.125em;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
}
h1,h2,h3,h4{
font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
}
h1{
font-size:2em;
line-height:0.5625em;
margin-top:0.28125em;
margin-bottom:0.84375em;
}
h2{
font-size:1.75em;
line-height:0.64285714285714em;
margin-top:0.32142857142857em;
margin-bottom:0.96428571428571em;
}
h3{
font-size:1.5em;
line-height:0.75em;
margin-top:0.375em;
margin-bottom:1.125em;
}
h4{
font-size:1.25em;
line-height:0.9em;
margin-top:0.45em;
margin-bottom:1.125em;
}
p, li{
font-size:0.875em;
line-height:1.2857142857143em;
margin:0;
margin-top:0.5625em;
margin-bottom:0.5625em;
}
Changelog
004 Various IE CSS Fixes (like double float breaking the page)
003 Selectors for web safe forns workin in win/osx/*x
002 GET changed to POST for prittier urls.
001 Basic parsing