Baseline Grid
Download File
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:
- Simplifies the design process by removing the “chance” factor (no more questions);
- Decreases the time spent at positioning elements;
- 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
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.
Thank you. This is very useful to cut layouting time!
Thank you. This really helps me out! ;)
cool thanks! been using 960 for a while nice development on this.
Giving this a shot for a new site design today. Thanks for sharing!
Thanks a lot :D makes life much easier
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 ;)
It’s pretty handy aye!! Thanks for sharing it! :)
Greetings from Brazil!!
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 :)
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.
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 ?
Thank You for Sharing this cool Template..
Thanks!
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.
Awesome! Thanks alot!
Very nice guys, thanks.
Great template! Baseline grids are often overlooked in web design. Thanks to my graphic designer friends I am learning how important it is!
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.
Very handy indeed! Thanks bunches.
Nice one, Thanks for this. Although I don’t suppose you also have a downloadable Fireworks version?
Guys just want to say… I’ve been using this grid for the past week and I am totally loving it. Thanks so much.
Hey ! thanks a lot for this….lovely!
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 ^^.
We’d love it if you passed the link along :)
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!
Duh! Just seen you have translated the iPhone assets in to Illustrator. Nice one!
Do you have plans for a CSS framework to go along with this? That would be great.
@Mecha: Isn’t this already based on the 960 css framework?
Great works, thank you very much!
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)
excellent stuff, but i’ld like to ask you that is 978.gs next generation
great Thanks!!
i love teehanlax
Thanks!
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?
My pervy layout design pants are suddenly snug, thank you!
Just tried it out. Works perfectly. Anyone out there that could point me to a css framework kind of thing on this?