#baseline grid

Tutorial in English and German / Anleitung in Deutsch und Englisch

English version:

Would you like to receive our tips for free in your e-mail box? Simply select FOLLOW to sign up with your e-mail address.

TIP OF THE WEEK: How to control the Baseline Grid in Adobe InDesign

1. Open Adobe InDesign and place a large photo and some text.

Courtesy of Illustration Source, New York City

2. Go to VIEW…

I released a little bookmarklet to help designers (and devs) master their vertical rhythm.

Vertical Rhythm is the spacing and arrangement between words as a user reads down the page. On the web, this is a difficult thing to get right, even with tools like Compass assisting.

The problem really comes in, when you have multiple columns of text. If you want text lines to consistently land in the same places, you really need a visual aid that you can quickly drop in at any point as a reference.

I found that this website, "24 ways: Compose to a Vertical Rhythm", was the most understandable and helpful guide to set a baseline grid to my magazine project.

It basically informed me to include the following code in my CSS style:

p {     line-height: 1.5em;     margin-top: 1.5em;     margin-bottom: 1.5em; }

I released a little bookmarklet to help designers (and devs) master their vertical rhythm.

Vertical Rhythm is the spacing and arrangement between words as a user reads down the page. On the web, this is a difficult thing to get right, even with tools like Compass assisting.

The problem really comes in, when you have multiple columns of text. If you want text lines to consistently land in the same places, you really need a visual aid that you can quickly drop in at any point as a reference.