Tag: baseline

Baseline

Base­line is a CSS typo­graphic frame­work that makes it easy to develop a web­site with a pleas­ing grid and good typog­ra­phy and uses a “real” base­line grid as its foundation.

CSS with Vertical Rhythm

This tool will help you com­pute CSS that has a con­sis­tent vertical rhythm.

Baseline Rhythm Deciphered

When this occurs, your page is said to have ver­ti­cal rhythm  —  the text is eas­ier to read than text that doesn’t line up, as it feels more cohe­sive and less disjointed.

Boks

An AIR appli­ca­tion that pro­vides a User Inter­face for Blue­print CSS’s frame­work with con­trol over grid con­fig­u­ra­tion and baseline rhythm.

Setting Web Type to a Baseline Grid

Another excel­lent arti­cle on the Dev Opera site cov­er­ing base­line grids and how they can be applied to the web.

TypoGridder

A jQuery based tool that gen­er­ates an image with a base­line grid based on the line­height of an element.

Gridmaker

An online tool where you can spec­ify the width, columns, gut­ter and base­line of your grid and then save it locally in JPG format.

Setting Type on the Web to a Baseline Grid

The main prin­ci­ple of the base­line grid is that the bot­tom of every line of text (the base­line) falls on a ver­ti­cal grid set in even incre­ments all the way down the page.

Compose to a Vertical Rhythm

On the Web, ver­ti­cal rhythm is con­tributed to by three fac­tors: font size, line height and mar­gin or padding. All of these fac­tors must cal­cu­lated with care in order that the rhythm is maintained.

Incremental leading

In edi­to­r­ial design, there is a tech­nique used for side­notes and box­outs that aligns to the base­line grid, or ver­ti­cal rhythm. It’s called incremental leading.

Syncotype

Syn­co­type is a sim­ple tool to help align your text to a base­line grid. Enter your line height and off­set in pix­els in the Syn­co­type con­trol box and click “Syn­co­type it” to over­lay a base­line grid in red.

Setting up a Baseline Grid

In this arti­cle, I will go through some sim­ple steps to acheive good clean well struc­tured typog­ra­phy in Adobe Indesign.

Baseline Rhythm Calculator

Gen­er­ate a basic CSS stylesheet with the proper cal­cu­la­tions for a consistent baseline.

About

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

Created by Antonio Carusone, graphic designer and author of the design and typography blog AisleOne. Special thanks to Duane King for his help and wisdom.

If you want to say hi or for general inquiries, send an email to: hello@thegridsystem.org

Have an article, tool, template or news you want to submit? Send an email to: submit@thegridsystem.org

Subscribe

Want to stay updated with the most recent content? Subscribe below via email for daily updates or to the RSS feed.

Colophon