Ever heard of Antiphonal Typography? Me neither. But having seen Owen Gregory’s inspirational talk on Antiphonal Geometry in March this year I decided I wanted to have a stab at it. Or, more accurately, I made it up.
First of all, what the hell is antiphonal geometry? In short, antiphonal geometry is concerned with the relationship between musical harmonies and geometric proportions. It argues that certain shapes, or the proportional relationships that are found within them, are pleasing to our eyes for the same reason musical harmonies are pleasing to our ears; that there are ‘magic’ proportions in both sound waves and geometry that our senses interpret as harmonious.
Consider the screen ratios of some well known devices: the iPhone 4 corresponds to 2:3, the iPad boasts a predictable 3:4, whilst the Nokia Lumia goes out on a limb with a daring 3:5. Now, it *just so happens* that 2:3 corresponds to the pitch ratio in a perfect fifth musical interval (more easily described as the relationship between, for example, a C and a G), 3:4 corresponds to a perfect fourth and 3:5 corresponds to a major sixth, and there are, of course, many more. Just a coincidence?
Owen thinks not, and nor do I.
Adding typography to the mix
Now if pitch ratios in music corresponds to visual aesthetics, is it possible to base typographic hierarchy on a musical chord? That is the question I asked myself when redesigning the Primate site earlier this year. I wondered if the proportional harmonies in geometric shapes could be translated to the hierarchical relationship between different font sizes.
Using 18px (or 1.125 ems) as my base font-size I started to experiment with header sizes that would not only look right, size-wise, but also match complimentary musical harmonies. For example, I found that I could make my H1s 7:1 in proportion to the body text, which corresponds to the pitch ratio of a 7 octave interval on the piano. A visually strong proportion of 3:2 between intro text and body copy matches the pitch ratio of a perfect fifth. And so on.
The result was a somewhat unusual chord, but I’d like to imagine it would sound alright on a piano:
H1: 127px / 7:1 (Seven octaves, C7 on the piano)
H2: 54px / 3:1 (Perfect twelfth, G2 on the piano)
H3: 36px / 2:1 (One octave, C2 on the piano)
H4: 23px / 5:4 (Perfect third, E on the piano)
big p: 27px / 3:2 (Perfect fifth, G on the piano)
p: 18px / 1:1 (C on the piano)
small p: 16px / 8:9 (Major second, D on the piano)
(Note that all values are in pixels for clarity, but were duly converted to ems in build.)
Now my musical theory may not be completely accurate (musical nerds: feel free to tell me off in the comments), but even as a rough notion I find this quite astonishing: what works visually as a typographic hierarchy can also sound harmonious on a piano.
Of course, this is mostly a bit of fun and most designers won’t – and needn’t – go to this length in order to establish a harmonious scale. Whilst I enjoy and recommend experimenting with ratios, it’s important to remember that mathematical (or musical) perfection isn’t a silver bullet and the final decision on typographic hierarchy should be made based on what *looks right*, even it that means bending the ratios a little.
Edit: Owen Gregory himself has pointed out to me that the pitch ratio of a 7 octave difference is indeed not 1:7. It appears the ratio doubles with each octave, ie 1:2 = octave; 1:4 = double octave etc. This means the ratio on my case would be an astonishing 1:128, which would obviously not work typographically. I guess it’s back to the drawing board for me.