So it makes sense that modular scales are most effective when the inputs-the starting ratios and starting numbers that beget the entire scale-are meaningful to a project’s design, content, or both.
Double-stranded scales tend to provide more measurement options (they include more numbers, and usually fill one another’s gaps).įig 3: A double-stranded modular scale: a modular scale on the web means choosing numbers from the scale for type sizes, line height, line length, margins, column widths, and more. It has options for creating double-stranded modular scales like the one below, which require at least two starting ratios or two starting numbers to generate what amounts to two separate modular scales mashed together in sequence. I made a calculator to help us do this math. You start with a ratio (for example, 1:1.618) and a number (like 10), then multiply and divide to get many resonant numbers: Modular scales and how they apply to web design #section2Ī modular scale, like a musical scale, is a prearranged set of harmonious proportions. Finally, we’ll think about how designing with modular scales fits into current workflows, and where we might go from here. Next, we’ll dive into this example and go over my reasons for starting with certain numbers, choosing particular proportions, and and applying my scale’s numbers to specific CSS measurements. Let’s start by looking at what modular scales are, and how they apply to web design.
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.īy 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. Fig 2: Our example page, designed using a modular scale.Ī modular scale is a sequence of numbers that relate to one another in a meaningful way.
0 kommentar(er)
