Authored by Primate

A rather awesome, informative
and witty blog about all things web

Antiphonal typography

No-one has fingers long enough to play this chord.

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.

Familiar devices with familiar ratios

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.)

My hierarchy plotted onto piano keys

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.

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin conversations with questions about chimneys.


Showing 6 Comments

Leave a comment
  1. Will Wright December 18, 2013 at 4:27 pm

    Hi Espen! Being a fan of golden ratio and typography, I find this approach extremely interesting and very well grounded, and will definitely try this out in a future project. All I have to do now is overcome my insignificant musical knowledge… Cheers!

    • Espen February 4, 2014 at 10:49 am

      Thanks! By all means try it – it was very fun – but like you can see in the edit, the musical maths don’t add up completely!

  2. Gordon December 20, 2013 at 2:17 pm

    So what does the Primate site sound like when you play it on a piano?

    • Espen February 4, 2014 at 10:49 am

      Following Owen’s input (see my edit at the bottom of the article) it appears the chord is a little out of sync with the typographic reality – however, ignoring that fact, it would sound reasonably nice. I’ll show you if you bring a piano to the office.

      • Johnette March 1, 2017 at 5:11 am

        Deep thinking – adds a new diiesnmon to it all.

      • aaa merced ca May 17, 2017 at 2:50 pm

        Vauxhall…. I am guessing you are from Europe and not the US? : ) In that case it will be hard to recommend cars, I don’t know what vehicles you guys have over there. Ford Escape, Nissan Murano, Nissan Rogue, are all cute 4×4′s here.

Leave a Reply