Web ❤ Print

For someone who has always worked on a computer, organizing textpads for screens, it is always fascinating to discover, through this video by Jen Simmons, the history of typesetting in printing, the techniques, methods and tools used at the time.

We quickly see the legacy of the printing press that has spread throughout our code and how the story continues for the digital world, especially with the recent CSS “Grid” module that finally seems to allow us to reach the degree of flexibility that the printing press enjoyed.

CSS “Grid”


From her lab (http://labs.jensimmons.com/2017/03-004.html) some examples actually show advanced possibilities, which can even be combined with responsive techniques.



“Paste-Up” and “Hot Metal”

During the video the “web technique” is superficially approached and Jen Simmons quickly summons the History of publishing and layout techniques.

She approaches a technique that she practiced herself, at the time of her beginnings in graphic design: the “Paste Up” or the assembly of the elements of the page, by hand.

Capture d’écran 2018-06-07 à 14.39.54.png

The layout was very free, simply “collage” in fact, and allowed a true release of graphic designers' creativity after centuries of “rigid” composition and in “boxes” imposed by “historical” printing techniques.

Before the advent of photography and “Paste up” the layout was heavily constrained by the printing techniques then in use: designing text blocks from molten typographic lead, arranging these blocks in metal frames, clamping, locking, and sending to the presses. This was obviously extremely “rigid” and left very few possibilities for a layout beyond the right angle.

Capture d’écran 2018-06-07 à 14.46.57.png

This revolution that printing has undergone, by passing from metal characters (“Hot metal”) to “Paste up” is similar, according to Jen Simmons, to what the web will experience by passing from a layout in “table layout” (to speak quickly) to the famous CSS grid: more freedom and more creativity.

We will add the end of the sterile print vs. web debate and especially the fact of being able to dive into the treasures of printing knowledge to bring them to the screen.


Jen Simmons is developper advocate at Mozilla (editor of the Firefox browser), which means that her mission is to keep ahead of the progress of the techno, and summarize the whole to the People of the Web whose head remains buried in the everyday flow of things. You know what I’m talking about.

Her website : http://jensimmons.com/

Her lab : http://labs.jensimmons.com/

Photo : unsplash-logoHenk Mul

🙌 Ready to go? Start your trial today

App screenshot