Golden Ratio + Modular Scaling + Responsive

For the last few years I have read quite a lot about classic book layouting. It is fascinating to see the design systems that have evolved in hundreds of years shaped the book to be what it is today. Especially the work of Jan Tschichold amazed me . So close to a perfect reading experience.

And I have been following fellow designers trying to translate these traditional design systems to the web. Some experiments where interesting, but most only scratched the surface or ended up with very print-like products. And if we talk about responsive design, there is just a big emptiness out there.

I became curious.

I wanted to create a responsive theme based on the Golden Ratio (for heights, widths, paddings and margins) and Modular Scaling (for everything typography).

And this is what I ended up with (what you see around you, btw):

I made a more visual explanation of my Golden Ratio usage:

As you can see, every height (of non-typographic objects), width, padding and margin gets defined by the Golden Ratio. I based it on 16px and used rem as unit size, so I can scale the complete site through manipulating the font size, accourding to the screen size (thanks to Media Queries).

But I still need to make layout adjustments to use the available screen size. As you can see in the above screen shot, the content area has a width of 38% and the white space left and right of it has 62% in total. This swaps around if the screen gets smaller. Now the content has 62% and the white space left and right has 38%. This is what that looks like:

Naturally, on mobile the content has 100% width.

I defined the typography using a Modular Scale of 1.33 (called The Perfect Fourth).

Both can be utilized easily using SASS and Bourbon in combination with rem. Bourbon has Mixins for Modular Scale and Golden Ratio. So your code would look something like this:

font-size: modular-scale(1rem, 1, 1.33)

or:

padding: 0 0 golden-ratio(1rem,  3)

This way you can base everything on the font size you declared on your body. If you change this font size, everything scales accordingly.

I built two themes built on these principles in the mean time. Both are available for Ghost only and you can get them on Creative Market. The first is Chiara (this blog runs on this theme) and has a more textual experience. The second is Marisa and is geared towards beautiful photography and imagery.

Let me know what you think of it.

PS: The picture used on the preview and on my other themes can be bought on CreativeMarket, too: https://creativemarket.com/Starburst1977