measuring system

Visual representation of a typographic measuring system—inspired by Bröckman


Much has been written about the benefits of using a Typographic Measuring System, e.g. Modular Scale. What is described here demonstrates how some of that knowledge can be adapted for web use.

A printed page is finite and does not change, with this in mind a designer may take the measurements and understand, from the dimensions and content, how a layout should be constructed. In this context a page is the starting point for calculating font size, Grid System; and ultimately the layout.

In the web browser some of these principles still apply; yet differently. For instance, Responsive Web Design introduces a unique design problem; the “page” dimensions can change, be infinite, and viewed on a myriad of devices. Another major difference is that the nature of a web page is by default more like a scroll.

Therefore, how do we begin to calculate the proportions of a layout? The vertical axis can’t logically be the starting point, as content could update regularly or—worse still—be of an unknown quantity; anyone can be a publisher.

Without font-size, line-length can’t be established, without line-length column-width can’t be determined, unless the column-widths are understood the overall layout width is an unknown quantity—hence why this is the first step.

Choosing a suitable system

Picking font sizes can be trial and error, the process may involve viewing examples of text on a range of devices, making adjustments where needed.

To make the most use of a Typographic Measuring System; the <html> element can be scaled using percentages. This provides a level of granularity enabling fonts to be scaled proportionately whilst aligning to a range of vertical grids.

The percentage used alters line-height—which depending upon the size of the font will have an effect upon legibility.

All font sizes chosen were done so to work with the columns provided by the Grid System.

Computed pixel (px) font sizes, and rem units.
Computed px size at a scale of 75%, set using rem units, Helvetica Neue.


Plan for the measure

Providing an optimal line-length for reading—the measure—is key to typographic layout. Selecting a range of font-sizes, which aid legibility when combined with the column widths chosen for the Grid System, was the goal.

I have intentionally made line-length static, otherwise the measure will be fluid; and constantly change. By introducing layout widths, which restrict the amount of columns, combined with a range of font-sizes used for spanning as many columns as needed, I was able to define a suitable measure of roughly 7-10 words per line.

Take it to the baseline

To aid my decision making I chose a suitable range of font-sizes and set them on a baseline grid (using HTML and CSS) so I could view the typography on mobile device/s and make adjustments.

The sizes I chose work with a variety of line-height applied across a series of layout widths, in other words; that work across a multitude of screen sizes or even device types.

The correct spaces between letters and words and the length and spacing of lines conducive to easy reading, does much to enhance the impression created.

Use for design

Once the desired legibility is established, the system can be transferred to Illustrator, or Sketch et al. to use with designs. I eventually made my way back to the browser. Following this process ensured my designs were accurate. I laid a solid foundation which I was able to return to; safe in the knowledge of it already being tried and tested.