Beautifully personal portfolio by Jina Bolton that reveals the site grid and baseline grid.
Baseline
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.
CSS with Vertical Rhythm
This tool will help you compute CSS that has a consistent vertical rhythm.
Baseline Rhythm Deciphered
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.
Boks
An AIR application that provides a User Interface for Blueprint CSS’s framework with control over grid configuration and baseline rhythm.
Setting Web Type to a Baseline Grid
Another excellent article on the Dev Opera site covering baseline grids and how they can be applied to the web.
TypoGridder
A jQuery based tool that generates an image with a baseline grid based on the lineheight of an element.
Gridmaker
An online tool where you can specify the width, columns, gutter and baseline of your grid and then save it locally in JPG format.
Setting Type on the Web to a Baseline Grid
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.
Compose to a Vertical Rhythm
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.
Incremental leading
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
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.
Setting up a Baseline Grid
In this article, I will go through some simple steps to acheive good clean well structured typography in Adobe Indesign.
Baseline Rhythm Calculator
Generate a basic CSS stylesheet with the proper calculations for a consistent baseline.
