The screen isn’t the same as the printed page.

It’s easy for the designer, having fallen in love with the grid’s simplicity and flexibility, to seek to apply it everywhere: “if one has a hammer, one tends to look for nails.” But Müller-Brockmann’s recommendations in Grid Systems in Graphic Design are fairly rigid prescriptions. Attempting to follow them literally in digital work — where precise control is rarely available — can be an exercise in futility.

Variability of output media

When creating printed matter, for example, the graphic designer generally knows the parameters of the final output medium — things like page size, reading distance, and print resolution. Müller-Brockmann’s advice reflects this: he encouraged designers to base grids on standard paper sizes, noting that “most printed matter adheres to [these] sizes.” His column configurations and typographic scales are rooted in the assumption that printed matter is “generally read with the eye at a distance of 30–35 cm.”

A DIN paper size illustration from Müller-Brockmann. Print designers know their output dimensions.

Digital designers can’t make these assumptions. Users interact with software on all kinds of devices — smartphones, tablets, wearables, laptops, desktops, TVs, and more. An interface design might have to be responsive to several (or perhaps even all) of these devices.

Screen resolutions aren’t standardized like paper. (Source data: Google device metrics)

Moreover, these devices vary not just in physical size, but rendered screen resolutions, physical screen resolutions, pixel densities, reading distances, orientations, and contexts of use. (For an overview of device resolution and pixel density, see Sebastien Gabriel’s Designer’s Guide to DPI.)

Variability of content and typography

A book or magazine designer knows their content before the reader sees it, so they can be sure that the grid system accommodates the specific layout needs of that content.

Digital products, though, are often built around dynamic data — the content that is displayed to the user may never have been seen by the designer. The designer can try to work with representative data, but edge cases are common. A single UI design can also have to account for content in different languages and scripts, right-to-left orientations, and so on.

Content that fits nicely into the grid in English doesn’t work so well in French.

Additionally, the full layout of the content is often not entirely visible to the user. The grid’s rationality and hierarchy may be perfectly evident to the reader when gazing upon a poster or flipping through a magazine spread. But what about on a smartphone, where most of the content is hidden behind a long, scrollable web view?

Lastly, the perfect horizontal and vertical rhythms of Müller-Brockmann’s modular grids are based on the metrics of the typography: font family, size, leading, words per line, and so on. In print, these are absolutes. But in digital, they are variables: