This is not a “framework” or anything, I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It is inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.
font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;I thought the results were very pleasing. If you have a site heavy on text content, I think paying fine-grained attention to the underlying grid is important.
Always interesting to see other peoples take on how to create a css grid.
Thanks!
interesting stuff Chris. I have been just recently reading up the vairous grid hype things out there and the typography parts of it all is intriguing to say the least. I like your little demo layout!
hey this is amazing. Typographic Grid, I need to tweet this :)
I get the argument for the vertical grid, but I have never been able to put it in to practice in a satisfactory way.
Real nice Chris. The hardest part for me has always been the line height, well, getting all the headers and paras all looking just right together. I just downloaded the files to inspect further. Thanks.
Nice, but the it doesn’t line up horizontally for me..
Looks like a good start. This should help people looking to get a “notebook” feel to their website quite a bit.
The text and lines are a bit off in my chrome browser, but still really close.
Looks good in my browser.. I like it, I see this coming in handy on many projects. Great Work.
While I am NOT a fan of CSS grids (see poll), I do absolutely love typographic grids. They make me feel warm and fuzzy inside
Nice, the devil is in the detail as they say. I have 2 typography style sheets one using 16px default font-size and the other 12px. 16px? I’m giving that a go for the redesign of my website.
Anyway, there are a few tools out there to help with the maths nowadays such as the Baseline Rhythm Calculator, the Adobe Air EM calculator by James Whittaker and the very useful Grid bookmarklet.
You can always get some EM-based CSS via http://pxtoem.com
Nice Chris.
@Karl I love the baseline rhythm calculator such a useful tool, I use it on most of the stuff I work on.
A list apart wrote a great article a couple of year ago on the subject.
Maybe I’ve read it wrong, but you’ve said you’re using unitless line-heights, but your demo has line-height in pixels. :?
Not sure where you are looking? The line-height is set in only one place in the demo, on the body, and it’s set to “2”.
blockquote {
font: italic 15px/**20px** Georgia, Serif;
width: 180px;
}
Looks great!
I’d like to see how you get a baseline rhythm/grid working with all the HTML elements someone might use in a design – specifically: tables, forms and elements with top/bottom borders etc. In my own experiments I’ve found these often break any kind of rhythm in most browsers.
In the end a baseline grid isn’t possible when the site content starts getting more complex than simple typo elements due to slight browser rendering differences.
Thanks. Very interesting entry.
Interesting thougt. Ralph