Layouts based on chromatic proportions

There's an overview of common page sizes on page 146 of the fourth edition of The Elements Of Typographic Style. On the web pages don't have a fixed size. The size of our browser windows is variable. On this webpage I experiment with these sizes. Is it possible to force the layout on webpages into these strict paper sizes? That's the question I'm trying to answer here. And the answer is yes. In fact, it's pretty easy. It can be done by using min-aspect-ratio media queries, and by defining the width of the body based on the height of the viewport. Like so:

@media (min-aspect-ratio: 3/2) {
	body {
		width: 150vh;
	}
}

Why?

Why would you want to do this? There is no real good reason, but there is a very geeky one: the width and height of your browser window rarely correspond exactly to one of the common ratios for paper sizes described by Robert Bringhurst in his book. Since the web is not made out of paper this shouldn't be an issue. And that's correct. Yet still, these are not some random ratios. These are ratios we see in nature, and these are ratios humans've been using for ages in art forms of all kinds. Like architecture, sculpture, paintings, music and proportions of books. In other words, we like these ratios. They look good

On this page I use four ratios. The octave with a ratio of 1/2, the fifth with a ratio of 2/3, and the fourth with a ratio of 3/4. The other ratios I use are created by doubling them: 1/1, 4/3, 3/2 and 2/1. If you resize this page you'll see that the white canvas always looks good. It always has a proportion that's pleasing to the eye. If you like classic layouts you might like what I did here.

Downsides

There are some downsides. First of all, the width of this white canvas is defined by the height of the viewport. This means that breakpoints for the content need to be defined based on the height. Which is weird. And this is hard. I had to write some disturbingly complex mediaqueries to make sure that the content doesn't break on small browser windows.

The other downside is the fact that I don't use the whole canvas. But that can be seen as an upside as well. Personally I like the fact that we don't have the constraints of the paper size on the web. But I can understand that others are not charmed by that chaotic flexibility.

Alternatives

There are many more excellent ratios though. And they all look good. I created a version of this page that contains all of them. Again, no matter what size your browser window is, the white canvas will always look good. There's a thing though. You'll notice it when you resize that page: there's almost no purple background visible. The conclusion I draw from this little experiment is that every rectangle that's approximately the same as one of the excellent ratios looks good. Which is, to be honest, any rectangle.