An HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
A CSS grid framework that’s based on a baseline of 1.4x the paragraph text-size, 160px columns, with gutters of 20px.
Beautifully personal portfolio by Jina Bolton that reveals the site grid and baseline grid.
Baseline is a CSS typographic framework that makes it easy to develop a website with a pleasing grid and good typography and uses a “real” baseline grid as its foundation.
This tool will help you compute CSS that has a consistent vertical rhythm.
When this occurs, your page is said to have vertical rhythm — the text is easier to read than text that doesn’t line up, as it feels more cohesive and less disjointed.
An AIR application that provides a User Interface for Blueprint CSS’s framework with control over grid configuration and baseline rhythm.
Another excellent article on the Dev Opera site covering baseline grids and how they can be applied to the web.
A jQuery based tool that generates an image with a baseline grid based on the lineheight of an element.
An online tool where you can specify the width, columns, gutter and baseline of your grid and then save it locally in JPG format.
The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.
On the Web, vertical rhythm is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.
In editorial design, there is a technique used for sidenotes and boxouts that aligns to the baseline grid, or vertical rhythm. It’s called incremental leading.
Syncotype is a simple tool to help align your text to a baseline grid. Enter your line height and offset in pixels in the Syncotype control box and click “Syncotype it” to overlay a baseline grid in red.
In this article, I will go through some simple steps to acheive good clean well structured typography in Adobe Indesign.