Return to Snippet

Revision: 2735
at April 14, 2007 06:09 by 1man


Updated Code
/* Grid system for CSS typography  ********************************************/
/*The first thing we have to do is set a line-height for our grid. I’ve chosen a 
pretty standard base font size of 12 pixels, and set the line-height at 18 
pixels, which gives us a nice open leading of about 150%.*/

/*The pattern is pretty simple. Any time you add vertical space with a margin or 
padding, you need to add it in units of 18 pixels to maintain the baseline grid. 
You don’t always have to add it in one place, but you need to add it in pairs 
that add up to 18 pixels. For instance, you could set a top margin of 12 pixels 
and a bottom margin of 6 pixels.*/

* {/* don't use this in production, be more specific */
	padding: 0;
	margin: 0;
	}
body {
	font-family:'Lucida Grande',Arial,sans-serif;
	font-size:12px;/* this is 100% */
	line-height:18px;/* gives a leading of 150% */
	}
p,h1,h2,h3,ul {margin-left: 24px;}/* for nice display */
p {
	margin-bottom: 18px;
	width: 400px;
	}
h1 {
	font-size: 24px;
	line-height: 36px;
	margin-bottom: 18px;
	margin-top: 18px;/* for nice display */
	}
h2 {
	font-size: 18px;
	line-height: 18px;
	margin-bottom: 18px;
	}
h3 {
	font-size: 12px;
	line-height: 18px;
	}
ul {
	margin-bottom: 18px;
	}

Revision: 2734
at April 10, 2007 08:40 by 1man


Initial Code
/* Grid system for CSS typography  ********************************************/
/*The first thing we have to do is set a line-height for our grid. I’ve chosen a 
pretty standard base font size of 12 pixels, and set the line-height at 18 
pixels, which gives us a nice open leading of about 150%.*/

/*The pattern is pretty simple. Any time you add vertical space with a margin or 
padding, you need to add it in units of 18 pixels to maintain the baseline grid. 
You don’t always have to add it in one place, but you need to add it in pairs 
that add up to 18 pixels. For instance, you could set a top margin of 12 pixels 
and a bottom margin of 6 pixels.*/

* {/* don't use this in production, be more specific */
	padding: 0;
	margin: 0;
	}
body {
	background: url(../images/gridbg.gif) repeat top left;
	font-family:'Lucida Grande',Arial,sans-serif;
	font-size:12px;/* this is 100% */
	line-height:18px;/* gives a leading of 150% */
	}
p,h1,h2,h3,ul {margin-left: 24px;}/* for nice display */
p {
	margin-bottom: 18px;
	width: 400px;
	}
h1 {
	font-size: 24px;
	line-height: 36px;
	margin-bottom: 18px;
	margin-top: 18px;/* for nice display */
	}
h2 {
	font-size: 18px;
	line-height: 18px;
	margin-bottom: 18px;
	}
h3 {
	font-size: 12px;
	line-height: 18px;
	}
ul {
	margin-bottom: 18px;
	}

Initial URL
http://www.alistapart.com/articles/settingtypeontheweb

Initial Description
Example off ALA, pleasing typography layout for the web. Based on the grid system.

Initial Title
CSS Line Height Example

Initial Tags
css

Initial Language
CSS