Rhythm And Proportion In Grids And Type

Posted: 29 Oct 2012 05:30 AM PDT

Last week I offered some thoughts about rhythm, specifically the rhythm of visual elements. Those thoughts were focused more on the theory. Today I want to lean more toward the practical side and talk about aspects of design we work with regularly and how we can add rhythm to our work through them.

First let’s briefly consider the connection between rhythm, proportion, and scale.

Rhythms Bluesfest — Xavier Rudd, Rhythms Q&A, Bluesfest

Rhythm, Proportion, and Scale

each musical interval can be expressed as a ratio of the wavelength frequencies of the notes; for our perfect fifth, with every two wavelengths of C, there are three of G. And what is a ratio, if not a proportion of one thing to another?

— Owen Gregory

Scale is the relative size of different elements. Proportion is the harmonious relations of these elements within the whole. It’s a harmony of scale. Rhythm is a harmonious pattern of elements. It’s a pattern of proportions.

When we talk of proportion we talk about one element being 2 times as large as another or of a column being ⅓ of the whole. We think of page headings as some multiple of the size of the main copy. Rhythm is built on proportions. As we create patterns in the scale of elements we create rhythm.

If you’re on board with responsive design (and if you aren’t you should be), you’ll have noticed a greater emphasis on proportion. Given how connected proportion is to rhythm, it’s probably a good idea to think more about rhythm and how you can add it to your designs.

Where and How Can We Add Rhythm in Web Design?

Patterns and textures will contain rhythm by definition. The space you use in and around elements can contain rhythm. Anywhere you can set different characteristics of elements you can create rhythm. Repeat a set of shapes throughout your design and you create rhythm. Vary sizes in a predictable pattern and you create rhythm.

The act of choosing a color scheme could be said to be building a rhythm of color. If you wanted to you could build color schemes thinking only of the proportions of RGB or hexadecimal values. Where music uses ratios of sound wavelengths, colors uses ratios of light wavelengths.

Grids are based on proportions. They’re rhythms in space.

Another potential area for rhythm is hierarchy. We create visual hierarchy through contrast and similarity of visual weights. The difference in visual weight from one groups of elements to the next is an interval we can create patterns over.

I wouldn’t expect anyone to mathematically determine visual weights to use, if it’s even possible given how many different things go into visual weight. And my guess is you’re still going to choose colors based on what your eye tells you as opposed to what the code behind them says.

Still it’s worth thinking about rhythm when we make these choices even if we aren’t working through the math.

There are, however, a few areas of design where we already work the math and deal in proportions so why not use more rhythmic proportions. Why not make better use of rhythm in grids and type?

Rhythm in Grids

Grids are based on mathematical proportions. They’re rhythms in space. Think of any column grid. You divide the horizontal space into 8 or 12 or 16 equal parts, which creates a regular rhythm. By varying where elements are placed within the grid and how many columns each occupies you create the variety that adds interest.

While it’s the most common option, there’s no reason why grids need to be so regular. For example you could
design a grid containing 4 columns using the following percentages for the width of each.

9.1%
18.2%
27.3%
45.4%

The above numbers aren’t arbitrary. They come from a section early in the fibonacci sequence (1, 2, 3, 5). Adding up the numbers totals 11 and 1 ÷ 11 = 0.0909 and so on. These values create a progressive rhythm based on the sequence. Any mathematical proportion can be used to build grids and create rhythms.

golden section ratio
fibonacci sequence
sine waves
musical proportions

The math may not always be fun, but truthfully it’s not that hard either. It took me a minute to come up with the fibonacci proportions above and there are tools being developed like Gridset to help you create grids visually.

You might also break out of the formal grid and use your eye and intuition to align elements. When you do you can create a hierarchical grid, which could be seen as an opportunity to create a flowing rhythm with more organic spacing.

Rhythm in Typographic Scale

Don’t compose without a scale
— Robert Bringhurst The Elements of Typographic Style

Sizing type offers us another way to create rhythm in our work. When making type choices you’ll likely answer a few questions about size.

What size should your main text be?
What size should main headings be?
What size should subheadings be?
What size should secondary content be?
What size should captions be?

In addition to the font-size of various textual elements, you’ll choose a size for line-height and how wide different measures of text should be. These sizes shouldn’t be arbitrary. They should relate to each other and and be based on meaningful proportions. In doing so they’ll appear more pleasing and legible.

One obvious question is where does this meaning come from.

We can use the same mathematical or musical proportions as we might use for grids. Sure, the math might not be much fun, but it doesn’t have to be hard. Fortunately just as with grids, others will be happy to take care of the math for us.

The former will provide values for a variety of musical intervals (along with the golden section) while the later will provide values for things like the fibonacci sequence and Le Corbusier’s modular scale.

Which scale and rhythm you decide to use is up to you, but ideally your choice will be tied to something from your concept. For example I used Tim Brown’s modular scale calculator to create a list of values for setting type here. I used the golden section as the ratio because my concept was based on the Renaissance where the golden section was commonly used.

text aligned to a baseline — Page from a book with text aligned on a baseline grid

Rhythm in Baseline Grids

It was actually a discussion of baseline grids that led me into this exploration of rhythm. A few weeks ago I was catching up on some podcasts and listened to a typography talk between Jen Simmons and Richard Rutter on The Web Ahead. Richard briefly mentioned something about baseline grids I found interesting.

Baseline grids are created in how we set 3 things.

font-size
line-height
margin or padding

Most of the time when offering tips for creating baseline grids, the advice is all about creating a vertical rhythm. You choose a unit for the baseline and then make sure all your vertical measurements are some multiple of that baseline unit. When we have multiple columns of text we might use different font-sizes in each, but we make sure the line-height remains consistent in both.

I’ve done that here. If you look back up at the top of this post you might notice that the meta information on the left lines up with the main content on the right. The font-size in each column is different, but the line-heights match.

The rhythm created this way is mostly regular with some variety added by placing non-textual elements on the baseline. This is how I’ve usually worked with baseline grids and I suspect it’s the same for those of you who work with them too.

Is this our only option?

What Richard said that I found interesting was why couldn’t the lines of text in one of the columns have a different line-height, but one based on some proportion of the first. Instead of every line of text matching between columns, what if it were every 4th or 5th line of text that matched up?

Creating this kind of variety in the baseline would create a different rhythm yet one that’s still in harmony with the whole.

Summary

Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.
— Robert Bringhurst “The Elements of Typographic Style”

As soon as we place multiple elements on the page, we’re creating a pattern and creating rhythm. There’s no reason we need to allow those rhythms to be arbitrary and random. It’s another opportunity for us to unify our designs.

Rhythm is heavily connected to proportion and with the coming of responsive design, we’re all about proportion. To move from simple proportion to rhythm we need to more consciously choose a scale.

There are many places in our designs where we can add rhythm. We can repeat and vary any characteristic of an element we like, such as color, shape, and size. Much of the time we won’t work out the math on these and instead use our eyes.

However, when it comes to type and grids, we’re already doing the math. If we’re working with both correctly, we’re choosing proportions for the division of space and the scale of type sizes. That scale and the proportions behind it creates rhythm. We can and should think more about the rhythms we’re adding to our work.

I’d like to continue the talk of rhythm a bit longer. Next week I’ll offer some examples of sites where I think rhythm is being used effectively.

The post Rhythm And Proportion In Grids And Type appeared first on Vanseo Design.