ProjetUrbain.com is giving away a designer framework called Baseline. Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as it’s foundation.
“Real” baseline grid on the web
When Stéphane Curzi first started to design Baseline, he wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attributes — like type leading — kept Curzi from implementing a true grid based approach. He then decided to another look at the basic grid used in print: the baseline grid.
Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. Baseline uses the font metrics to line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout.
How to use Baseline
Baseline can be used in many different ways. Use the reset.css and base.css file as a starting point, include the type.css for typographic control or include all files to have a complete foundation to start your web project.
Copyleft
Baseline is free, it is a way to give back to the web community and promote better typography. However, it is licenses under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Reset.css and base.css are inspired by the work of Eric Meyer and David Hellsing. For the full copyright notice, see the download zip files on the Baseline Web site.
This article was last modified on December 14, 2022
This article was first published on September 9, 2009
Commenting is easier and faster when you're logged in!
