Teehan + LaxX

We'd love to hear from you

Email: us@teehanlax.com Phone us: 416.340.8666 Follow us: @teehanlax Like us on facebook Fax us: 416.340.0777

Clients, want to work with us? Here's how

Baseline Grid


Download File

Version 1.0
Last updated March 9, 2011
Baseline Grid (351.97 kB)
Like this? Show your support:

Use this grid template and layout process to align text, UI elements and other visual content along both horizontal and vertical axes

Recently, we’ve been successfully experimenting with a 6px baseline grid coupled with the 960px grid system designed by Nathan Smith. As Pierre pointed out in his blog post, this system has three advantages:

  1. Simplifies the design process by removing the “chance” factor (no more questions);
  2. Decreases the time spent at positioning elements;
  3. Increases the feeling of organization in our design by articulating all the graphic elements with type.

The baseline is designed to be compatible with standard font sizes: 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 points. These sizes prove to be extremely useful when combined with leading derived from 3. For example, body copy can be defined as 14/18 (14pt size and 18pt leading). Small copy can be defined as 9/12. The magic of the grid operates and all these elements suddenly align; same if we choose to create a text block with type set slightly bigger (for example 21/27). Copy aligns itself every six, every four or every nine lines.

We hope that you’ll find this grid useful, not just as another trend to follow, but rather as a holistic strategy to envision and execute simple, clear and balanced design projects.

What you’re downloading:

A glimpse into the files up for download.

Comments 37

  • Craig

    Great grid PSD. Would there happen to be a CSS framework to ensure the type snaps to this baseline once in development? We have a similar grid template PSD (and accompanying CSS), but it’s not got the same flexibility as this. Thank you.

  • Firman Firdaus

    Thank you. This is very useful to cut layouting time!

  • Cosmin

    Thank you. This really helps me out! ;)

  • kevin

    cool thanks! been using 960 for a while nice development on this.

  • Gabe Abadilla

    Giving this a shot for a new site design today. Thanks for sharing!

  • designerot

    Thanks a lot :D makes life much easier

  • Peter Emil

    Very welcome indeed! Using the 960 grid system for a few sites and I like your take on it; especially the focus on the baseline. I will use it for my own site-restyle – which is in much need ;)

  • Gustavo

    It’s pretty handy aye!! Thanks for sharing it! :)
    Greetings from Brazil!!

  • Robert

    Very useful indeed. I felt like you could of gone in to a bit depth with the origins of the grid, but that’s just me, a history nerd :)

  • Beglinger

    Although i am a huge fan of using smart guides, i am sure this will become handy. Ill start my next project with this grid. Thanks for sharing.

  • Themer

    This looks great, probably have to think about using Baseline Grid when doing something in Photoshop, but how about CSS ? Do hard maths with every element I make ?

  • rizalmovic

    Thank You for Sharing this cool Template..

  • Monkeytail

    I don’t get the “Copy aligns itself every six, every four or every nine lines” part.


    It would be great if you can supplement with a tutorial for dummies.

  • James

    Awesome! Thanks alot!

  • Barry

    Very nice guys, thanks.

  • Emily Ridge

    Great template! Baseline grids are often overlooked in web design. Thanks to my graphic designer friends I am learning how important it is!

  • Georgetrace

    Thank you very much, the 960 grid is good, but with the vertical grid is even better. I also put a backgroud image on body tag for developing the CSS.

  • TechDaddyK

    Very handy indeed! Thanks bunches.

  • Ben

    Nice one, Thanks for this. Although I don’t suppose you also have a downloadable Fireworks version?

  • Barry

    Guys just want to say… I’ve been using this grid for the past week and I am totally loving it. Thanks so much.

  • P

    Hey ! thanks a lot for this….lovely!

  • Rafael John

    this is the most awesomest freebie I have ever stumbled upon!! also I am planning to make PSD site templates and would like to know if I can put the grid in my PSDs? or should I link my buyers to your site and let them download it here? ^^
    All credits to you for the cool grid ^^.

    • David Gillis

      We’d love it if you passed the link along :)

  • ben

    Another useful resource. Thanks guys.

    Have you thought about switching to Illustrator though? I’d love to utilise your templates in my AIs.

    I have been using AI almost exclusively now for the last couple of years (having been forced in to it for a project), and I’ve come to realise it is far more versatile and powerful as a UI design tool than Photoshop.

    It was a painful transition initially but if there a bunch of you doing it together you can put your heads together to solve any challenges! You can instigate a level of competition to test who is the AI master!

  • ben

    Duh! Just seen you have translated the iPhone assets in to Illustrator. Nice one!

  • Mecha

    Do you have plans for a CSS framework to go along with this? That would be great.

  • Jeremy

    @Mecha: Isn’t this already based on the 960 css framework?

  • Wieslav

    Great works, thank you very much!

  • betapixl

    the thing i was searching for a long time … i was even nearly waking up @ night asking myself “wot is the f***ing perfect baseline” … so thank you VERY much … (ps: excuse my english)

  • Dream Team

    excellent stuff, but i’ld like to ask you that is 978.gs next generation

  • gooho

    great Thanks!!

  • santosh

    i love teehanlax

  • R


  • Peter

    Great work! But one thing have occupied my mind. For me, a 6px baseline doesn’t really take account of the proportion of the font, as advocated by Tim Brown here vimeo.com/17079380. Instead, it take the overall layout as the base for the typography.

    Im just curios about your point of view? I do love your approach, but is it an industrial approach which take economics of scale in consideration? To speed-up the design process in order to manage the needs of many clients?

  • Said

    My pervy layout design pants are suddenly snug, thank you!

  • Merlijn

    Just tried it out. Works perfectly. Anyone out there that could point me to a css framework kind of thing on this?

Leave a comment

Click here to cancel reply.

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.