Grow your CSS skills. Land your dream job.

Typographic Grid

Published by Chris Coyier

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.


View DemoDownload Files

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.

Comments

  1. Always interesting to see other peoples take on how to create a css grid.

    Thanks!

  2. bolo
    Permalink to comment#

    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!

  3. Permalink to comment#

    hey this is amazing. Typographic Grid, I need to tweet this :)

  4. Sean
    Permalink to comment#

    I get the argument for the vertical grid, but I have never been able to put it in to practice in a satisfactory way.

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

  6. Nice, but the it doesn’t line up horizontally for me..

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

  8. Permalink to comment#

    Looks good in my browser.. I like it, I see this coming in handy on many projects. Great Work.

  9. TheDoc
    Permalink to comment#

    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

  10. Permalink to comment#

    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.

  11. You can always get some EM-based CSS via http://pxtoem.com

  12. Permalink to comment#

    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.

  13. Maybe I’ve read it wrong, but you’ve said you’re using unitless line-heights, but your demo has line-height in pixels. :?

  14. Looks great!

  15. Permalink to comment#

    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.

  16. Thanks. Very interesting entry.

  17. Permalink to comment#

    Interesting thougt. Ralph

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".