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.

Paper sizes on the web

According to Bringhurst there are a few ratios that look fantastic. These ratios have been used for ages for things like sheets of paper and books, but you can also find them in architecture, paintings, sculptures and in nature. And even in music. These ratios look pleasant, they sound good, and they make sense in a mathematical way, so we should probably use them. So I wondered, can we create and use them on the web?

Yes, we can

We can create a canvas within our viewport that has one of these ratios. It’s really not that hard to do. For instance, if the ratio of the viewport is more than 1/1 (wider than the height) we can force the body to be 100vh, which is exactly as wide as the height of the viewport. Our content is now laid out on a square canvas, and you can pick the ideal page margins for this kind of canvas if you like. The page now looks like this

If the ratio of the viewport is bigger than 3/4, but smaller than 1/1 we can create a nice looking canvas by making the width of the body 75vh, which is 75% of the height of the viewport. Looks good, right?

You get the point. If you read this on a browser you can resize freely, here’s a working example of this idea. In this example I only use the ratios 1/2, 2/3, 3/4, 1/1, 4/3, 3/2 and 2/1. But there are many more perfect ratios.

More ratios

Here’s a working example with all the so called chromatic ratios Bringhurst describes on page 146 of the fourth edition of The Elements of Typographic Style. When you resize this page you’ll notice that most of the time there’s not much of the purple background visible. There are so many perfect ratios, you might wonder if there are any rectangles that are not perfect? Any rectangle with any ratio approximates one of the perfect ratios. And here’s an example with all the ratios that can be created with a square, a pentagon, a hexagon or an octagon.

Does this make sense?

If you only like a few ratios, this idea of creating fake, but ideal canvasses within the viewport makes sense. But if you can’t really choose, and you like all perfect ratios, you can just as well not bother and simply use the whole viewport as your canvas. It’s much, much easier to work with, and it looks almost perfect on any screen. And since we’d like to go home early instead of debugging an insanely complex layout system, I’d advice you to ignore this whole post.