This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Understanding irrational ratios

Last week Nathan Ford published an article on A List Apart about shaping your content with grids based on ratios, instead of shaping it with grids based on columns. Since I have no feeling about what’s beautiful and what’s not I love articles like this one. They give me theory I can play with. By playing with this theory I might, one day, understand beauty. And I really want to understand beauty, so I started playing with the theory.

In the article Nathan mentions twelve excellent orthogons: rectangles with ratios that are so fine that, according to some, nothing excels these proportions. I decided to write a script that could show me what layouts with ratios based on these different orthogons look like. I reused some code from previous experiments with colour and shape, and added some extra code for the maths. The result is a long page with one hundred random coloured three column layouts of randomish proportional widths.

Another thing I wanted to learn is flexbox. Flexbox is perfect for creating these kinds of layout, since it’s based on ratios, and not on absolute values. I understood the theory behind flexbox but I had never really played with it. I had to dive pretty deep into the theory (and there’s still lot to learn!). It turns out that columns can disappear on smaller screens if you forget to set the flex-basis of each column proportionally. Flexbox is very well supported. You should probably start playing with it right away, if you haven’t already.

Did I learn anything about beauty?

If you look closely you’ll see that I adjusted some typographic properties too. Line-height, font-size of the header, padding around the text, they’re all based on the same ratio as the layout.

The differences might not seem vey obvious if you simply scroll though the different layouts, but they are actually pretty dramatic. For instance, take a look at these two layouts, both based on a 1:2:3 ratio. The layout with a 1:2:3 ratio applied to the trion orthogon results in three columns of almost the same width. If we use this ratio with the doppelquadrat orthogon the results are dramatic. But maybe this page isn’t the best way to show this difference. It’s a work of art, not a tool to help the viewer understand how proportions work. I think Type Scale is much better at explaining that.

Nathan’s doesn’t write about creating random grids in his article. On the contrary. He writes about giving shape to your content with these grids. That’s something else, and it’s something I ignored completely in this experiment. But now that I’ve seen how these proportions work I think I understand which one to pick for different types of content. An informative page with rather boring but important content might be perfectly served with a less outspoken ratio like the trion. More sensationalist content might need a dramatic ratio, like the Auron or even the Doppelquadrat.