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

37 Comments

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

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

  • WPSPY

    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

    Thanks!

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