running words around
design education and visual communication
authored by chris m hughes

Muller-Brockmann reworked in CSS3

Saturday, 8 October 2011

It's important these days that trainee graphic designers can work in print and digital formats, and encouraging this integration can be problematic. I've been devising some new exercises to help students familiarise themselves with the wonders of CSS3 on the web, and at the same time demonstrate the control and beauty of print as exemplified in the International Style.

The idea is to take a classic poster with a format that doesnt traditionally fit in a web layout, and reconstruct it completely in CSS3 and html. In the example we've gone with a classic Joseph Muller-Brockmann -

The two CSS3 properties that will be needed are the transform property, which can rotate elements, and multi-columns, which breaks text blocks up into columns inside a containing block.

The result will work in mozilla, opera and webkit browsers, and the workflow will require a deconstruction of the image into its constituent parts. These are then measured and incorporated into an html structure, and then the css is added to control everything.

Establishing the div structure
1. An image of the poster is placed in Illustrator in an A4 canvas (A4 will sit nicely inside a 1024 X 768 screen when it is converted to pixels, and the resolution of the image is irrelevant).

2. Transform the poster by rotating it until the type is horizontal. This gives us the angle of rotation, which in this case is -28 degrees.

3. Now we can use the rectangular grid tool and uncover Muller-Brockmann's awesome grid for this poster. The poster features a five-column text block, and an empty column to the right of it - so we need six columns. In the vertical aspect, we can also identify six sections, based on grouping two lines of headline type together. And hey presto - a classic 6X6 grid. The grid is divisible by three, giving us a rule-of-thirds guide, and the grid cells help determine the pointsize of the headline text, and the sizes of our containing divs.

4. With the grid in place, we can draw boxes over the design elements to identify the blocks, and then remove the poster - and it will look something like this-

Measure the block elements
Set Illustrator's units to pixels and select the boxes and note down the dimensions. All of this gives us the following results -

angle of rotation - 28 deg
innercontainer - 828px by 668px
headline divs - 74px high
headline font size - 74px
horizontal grid cells - 111px wide
text block section - 560px wide

One further container will be needed, because we are rotating the content 28 degrees to the left, and will require something unrotated in which to house everything. This container will have the same dimensions as the inner container.

Create the html
<div id="outercontainer">
<div id="innercontainer">
<div id="first"/>
<div id="second"/>
<div id="third"/>
<div id="fourth"/>
<div id="columns"/>

The css for a horizontal layout
For this we can style the divs and create a single class for the headline text, set at 74px font size. Everything is then positioned based on our horizontal measurements. The grid cell width of 111px allows us to create the padding for the offset starting point of the lines of headline type - for example, 'Stadttheater' starts two grid blocks in from the left, which gives us 222px of padding. The way each word lines up vertically will be controlled in this way.

Intuitive Guesswork

I chose a letter-spacing of -4px to try and emulate the tight tracking of the original. I'm also using Helvetica, whilst Muller-Brockmann used Aksidenz, and have reduced the div heights from 74px to 70px to mimic the tighter leading in the poster.

Adding the CSS3

We'll rotate the innercontainer by -28 deg and break the text block into 5 columns with guttering of 20px. No widths are needed - the container block controls this.

#innercontainer {
-ms-transform:rotate(-28deg); /* IE 9 */
-moz-transform:rotate(-28deg); /* Firefox */
-webkit-transform:rotate(-28deg); /* Safari and Chrome */
-o-transform:rotate(-28deg); /* Opera */

#columns {
-moz-column-count: 5;
-moz-column-gap: 20px;
-webkit-column-count: 5;
-webkit-column-gap: 20px;
column-count: 5;
column-gap: 20px;
overflow:hidden; /*for any extra lorem ipsum*/

Here is the final result as a screenshot -

And here is the block and topological information, using Web Developer in Firefox -

To make the most of this exercise, I would select a dozen or so posters from the likes of Muller-brockmann, Armin Hofmann and Emil Ruder, each with varying degrees of difficulty in terms of css3 reworking, and ask each student to select three works and replicate them using the technique. CSS3 can also render opacity, curves, shadows, skew and perspective, so the options are wide open, and the results can look really impressive.

View the webpage
Download the css