Vertical Layout and Typography Part 1: Modular Scale

January 3, 2013

Tweet

I’m currently working on a framework for my team at Suits & Sandals to use as a basis for our projects. Using SASS (with Compass as a base) my goals with this framework is to use OOCSS and DRY best practices to create semantic and organized style sheets that can be adapted by my team to suit any project. I am a developer by trade and have a very minimal design background. However, in order for my framework to succeeded it’s become apparent that I need to brush up on my design knowledge. What code is a style framework if it doesn’t allow the designers to preform at their peak?

While I am quite proud of my always evolving responsive grid system (the Siren Grid), which provides a good base for horizontal layout I’ve recently found that my preparation for vertical layout is lacking.

I’ve heard the terms vertical rhythm and modular before but sadly brushed it aside until now. Below are several links to resources I am using in my process of incorporating modular scale into my framework.

More Meaningful Typography by Tim Brown

Tim Brown’s masterfully written treatise on the importance of typography and modular systems in creating great web design. I can’t do him justice so instead here’s a small preview:

A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using the golden ratio, for example, we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arrive at the next number down.

By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers.

THE SASSY WAY: Sassy Modular Scale

This Compass extension will form the backbone of my framework’s font sizing system. Based on work and writings by Tim Brown , the Sassy Modular Scale provides @mixins and functions that help you determine values based on specific ratios. The ratios were gathered from Brown’s “Modular Scale Calculator” (see below).

Modular Scale Calculator

Created by Tim Brown, the Modular Scale Calculator provides an easy way to help you determine values. It provides a wide choice of natural ratios, many based on music theory.

THE WEB AHEAD, Episode 30: Typography with Richard Rutter

Listening to this episode today led me to my current quest to perfect my framework’s vertical rhythm and modular scale. In this episode Jen Simmons interviews Richard Rutter about typography’s ever growing role in web design. While the segment of vertical rhythm and modular scale captured my attention the most this episode is full of great tips that both designers and developers should take to heart. I also highly suggest listening to The Web Ahead in general since Jen Simmons is amazing and all.

Layout, Typography, Web Design and Development