The Perfect Time Signature

Back when I was in college as a Jazz major i had a theory. Ok, I had lot’s of theories, but I had one about time signatures.

A time signature is basically the way beats are divided up in a song. 95% of songs you know are in a 4/4 time signature. This means that there are 4 quarter notes. This is really no different than a time signature of 4/8 (4 eighth notes) or 4/2 (four half notes), etc. A waltz is typically 3/4. Some really great tunes are in 6/8. A good example is All Blues.

If you do a little math you can see that the time signature 12/8 can encapsulate just about all feels. I decided then that every tune I wrote would be in 12/8. I was living in New Orleans at the time and the inspiration came from many of the Hatian voodoo rhythms being most easily transcribed in 12/8. Once I started writing stuff in 12/8 I started finding lots of ways to have interplay between straight beats and waltzes. In a way, 12/8 allowed me to have rules to experiment with rhythms that I wouldn’t otherwise use.

In hindsight, this “theory” was less about some new discovery and more about creating a structure to compensate for some of my creative deficiencies (aka, hiding behind theory).

All of that is to say that I stumbled upon a really cool CSS framework for laying out web pages.

How are time signatures and CSS related?

960 Grid System is a CSS framework for laying out a web page in a grid. This approach is all about being able to slice up the page into as many column combinations as possible. This is very similar to how time signatures are used to divide up a measure in musical notation. It turns out 960 is about common divisors in the same vein as 12/8.

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

I plan to use this as a structure to make up for my creative deficiencies.