Type that keeps the beat
Written by on December 18th, 2006 in Ajax News.
| Ryan S. |
random design tidbit…
|
| Ryan S. |
i’ve been delving in my typo/design books lately, and i learned a concept i didn’t know before
|
| Ryan S. |
the idea of type being “in phase”
|
| Ryan S. |
the idea is that for a column of type, you choose a line-height
|
| Ryan S. |
and if every line locks into that grid, the lines are “in phase”
|
| Ryan S. |
for example.. here’s a regular set of lines…
|
| Ryan S. |
12 pixels for the type and then 7 pixels between lines of type:
|
| Ryan S. | 
|
| Ryan S. | 
|
| Jason F. |
I’m not sure I understand. Wouldn’t setting the type size and line-height always put the column in phase?
|
| Ryan S. |
here are some different blocks that are in phase together:
|
| Ryan S. |
|
| Jason F. |
Ahh, phasing together. I see now.
|
| Ryan S. |
if the space between paragraphs was different, you’d get something like this:
|
| Ryan S. | 
|
| Ryan S. |
here’s the type correctly in phase without gridlines:
|
| Ryan S. | 
|
| Ryan S. |
super clean
|
| Ryan S. |
The Elements of Typographic Style explained phase like the beat in music
|
| Ryan S. |
setting a rhythm up and down the page
|
| Ryan S. |
anyway, just sharing something i thought was neat
|
| Jason F. |
I got it now. Nice thing to know about.
|
Related
Add and delete vertical space in measured intervals [The Elements of Typographic Style Applied to the Web]
Compose to a Vertical Rhythm [24ways]: “The basic unit of vertical space is line height. Establishing a suitable line height that can be applied to all text on the page, be it heading, body copy or sidenote, is the key to a solid dependable vertical rhythm, which will engage and guide the reader down the page.”
Source: Signal vs. Noise
Original Article: http://www.37signals.com/svn/posts/159-type-that-keeps-the-beat