?

Hello! I dont know how, but you stranded on this website :)

Let me introduce you!

1. The texts stored here, are typographical theories and essays, which delighted me while designing this side.

2. Some words are marked yellow. This means that a hidden picture is placed after the end of the paragraph. This picture visiualzes the marked word.

3. If the web version is too scary for you, you can print the texts into a book (make book)

❤ Dont forget to add your name on the front page ❤

CONCEPTING CHAOS

✎ your name

For most of my life, I considered myself a person who did not enjoy reading (at all). I just liked to look at pretty things and I had no interest in reading about them.

However, I guess it is fascinating to me to think about the ways a text can be presented. Naturally, I am more drawn to chaotic and thrilling layouts because they seem intriguing. That's why I decided to do some research on typography theory about chaos and order.

Pretty fast, I found out that if typography is too artsy, the actual content can't be delivered. So I created a goal for this project:

FULL INTRO

It should be manageable to read but also have the compelling look of chaos. So I started to conceptualize designs to find the perfect organized chaos. I tried to make it look like a board game, I used pretty colors, a dice generator to randomly set the letters, but nothing was working: It was still hard to read, and it wasn't overwhelmingly pretty.

One day, I tried to layout some paragraphs with CSS Grid and accidentally did something that made it look good. And I thought to myself: “Is this what chaos is? Something you don’t do intentionally?” So I learned my lesson: You can’t control chaos. You need to embrace it. But chaos doesn’t appear out of nothing; you need to start it somehow. I used HTML, CSS, and Paged.js as my tools, and I wanted to welcome what they can do. My websites also contain pictures that pop up through the hover effect. However, you can only look at one picture at once. If you want to see all the pictures, it's necessary to print out the website.

This effect developed through the idea that it is easy to stay online while consuming content. On websites, you can use hyperlinks or different tabs to look up a picture if you need it. In contrast to that, a book is not flexible; it’s limited to itself as soon as it’s printed. So, normally, if one has to choose between a website or a book, naturally a website would be the more valuable option. Well, not in this case. Printing out the website gives you more content than just the website itself.

It should be manageable to read but also have the compelling look of chaos. So I started to conceptualize designs to find the perfect organized chaos. I tried to make it look like a board game, I used pretty colors, a dice generator to randomly set the letters, but nothing was working: It was still hard to read, and it wasn't overwhelmingly pretty.

One day, I tried to layout some paragraphs with CSS Grid and accidentally did something that made it look good. And I thought to myself: “Is this what chaos is? Something you don’t do intentionally?” So I learned my lesson: You can’t control chaos. You need to embrace it. But chaos doesn’t appear out of nothing; you need to start it somehow. I used HTML, CSS, and Paged.js as my tools, and I wanted to welcome what they can do. My websites also contain pictures that pop up through the hover effect. However, you can only look at one picture at once. If you want to see all the pictures, it's necessary to print out the website.

This effect developed through the idea that it is easy to stay online while consuming content. On websites, you can use hyperlinks or different tabs to look up a picture if you need it. In contrast to that, a book is not flexible; it’s limited to itself as soon as it’s printed. So, normally, if one has to choose between a website or a book, naturally a website would be the more valuable option. Well, not in this case. Printing out the website gives you more content than just the website itself.

  1. PRINT. IT AIN’T DEAD YET.
  1. BODIES OF COLORS
  1. THE ORDER OF THE WHOLE EARTH CATALOG
  1. LINIE, FLÄCHE, RAUM;
  1. FLEXIBLE VISUAL SYSTEMS
  1. GRID AND DESIGN PHILOSOPHY
  1. THE IMPACT OF PRO­GRAMMING ON GRAPHIC DESIGN
  1. ARE WOMEN THE NATURAL ENEMIES OF BOOKS?
  1. Literature
  1. Impressum

PRINT. IT AIN’T DEAD YET.

Written by Jessica Helfand

Source: Blackwell, Lewis & Carson, David (2000): The End of Print: The Grafik Design of David Carson

21 March 2000

Dear Fiona:

You are turning 2 in a few weeks and I think it’s high time you understood a thing or two about graphic design. After all, you are part of Generation ABC and what are ABCs, after all, but typography?

And what is typography, you ask?

A good question.

Typography is letters (and numbers) and why they look the way they do. Sometimes letters are BIG AND LOUD and sometimes letters are small and quiet. Typography can make words look good. It can also make words look bad.

WHAT?

But the way they look — whether they’re pink or purple or big or small or quiet or noisy or happy or scary or funny or weird, well, that’s something that comes from typography.

Which is also called type.

Which is sometimes called print.

Which is a word that occasionally causes people to wrinkle up their noses and describe a time when it was customary to wear burlap shoes and sit hunched over, by candlelight, scratching painstakingly written messages to one’s friends and neighbors using quill pens. This really happened, back in ancient times. Like back when there were mummies and dinosaurs. Before television. Like when Daddy was little.

WHAT?

Printing is what you do when you write letters one at a time, as opposed to script, which is when you write letters so-that-they-connect-to-each-other-like-this. Printing is also used to describe what happens when machines (called “presses”) get hold of all those words, all that typography, and actually press the letters together onto paper.

WHAT?

Paper is a word that occasionally causes people to wrinkle up their noses and describe a time when it was customary to wear burlap shoes and sit hunched over, by candlelight, scratching painstakingly written messages to one’s friends and neighbors using quill pens. This really happened, back in ancient times. Like back when there were word processors and 8-track tapes. Before computers. Like when Mommy was little.

WHAT?

Now here’s the really confusing part. A lot of people say print is dead. Flat and not moving. Dead, like when we drive down our road and see a rabbit or a woodchuck that didn’t make it across in time. The whole concept of roadkill is something I had hoped to put off for a few years, but I think it’s important for us to be clear about one thing.

Print isn’t dead, sweetheart. It’s just sleeping.

So as you begin to learn your ABCs, remember that your mind is like a giant alarm clock that wakes those letters up so that they spell something, so that they mean something, whether they’re on TV or in a book or scratched on the side of a wall somewhere. And while you're at it, remember that S isn’t the same as 5 and L isn’t the same as 1.

Remember that 1 LoV3 U isn’t the same as I LOVE YOU even though it looks cool. Remember that anything that looks cool probably won’tlook cool for very long.

WHAT?

Remember that very long means, well, probably about a day-and-a-half.

Remember that pictures may speak louder than words, but that words speak volumes.

WHAT?

Remember that sometimes typography can help you understand something or react to something or feel a certain way faster, but that it probably won’t help resolve conflicts between embittered nations or advance your capacity for reason or prevent you from getting bee stings or tick bites or chicken pox.

Remember that spelling mistakes are celebrated in email but not tolerated in literature.

Remember that literature is made up of stories that are what they are because someone wrote them down, letter by letter, word by word, intending for them to be read and remembered and retold for years and years and years to come.

Remember that this is why your father and I want you to learn your ABCs, in the order in which they were intended to be learned, even though you can, and will, mixup the magnets on the refrigerator to proudly spell words like hrldgsnoand wsigefoo and pstwe6882ge. Someday when you read the work of Gertrude Stein or look at the work of David Carson, you will make sense of such verbal and perceptual aberrations, but until then, my sweetgirl, remember that your ABCs are what helps you to read, and reading is what opens up your mind so that you can learn about anything you want.

WHAT?

WHAT?

Dad (1991) by David Carson

Turtles.

Communism.

Particle physics.

Reading feeds your brain and helps your mind to grow. So today’s Goodnight Moon is tomorrow’s Charlotte’s Web is next year’s Elmer and the Dragon and before you know it you’ll be reading Thomas Hardy and Thomas Mann and A.S.Byatt and V.S. Naipaul, just as your parents did, and our parents did and, with any luck, your children will.

WHAT?

WHAT?

WHAT?

WHAT?

WHAT?

WHAT?

WHAT?

And even though we read them printed on paper and you will very likely read them emblazoned on a screen, do you know what, Fiona? It doesn’t matter, because no matter what the typography does (or doesn’t do), and no matter what the print is (or isn’t), words are just ideas waiting to be read. And reading will never die.

Reading is your ticket to the world.

BODIES OF COLORS

Source: Greiman, April (2001): Someting from Nothing

We think of color as decorative, what philosophers call a secondary quality, as opposed to the qualities of form and matter, that exhaust the essence of a thing. Color are given to bodies, but they do not posses bodies. A chair is a chair, red or green. (...) Bodies of colors.

Kandinsky made this bodies dance to music, freed colors from the hold of forms. He gave value to color’s plastic, "floating", variable existence.

WHAT?

Komposition VIII by Kandinsky

Likewise, for Greiman, it is the very variable existence of color that gives color power. "From the Center: Design Process at SCI-Arc" , a book that includes texts and images of faculty work at the progressive architectural school, Is a showcase of what colors can do other than just color. White, the background, passive meld against which words and images receive form, here pets her equal share.

WHAT?

Fall 1985 Lecture Series poster by April Greiman's

WHAT?

Promotional poster for SCI-Arc by April Greiman

No longer just a neutral surface upon which the writing is inscribed, or images put, she is rather a physical force, a body that responds to other bodies in an environment. White hugs, and curves around images. It provides a scaffolding for texts. Sometimes white jumps into the spotlight. It becomes the color of text, against a black background, like chalk on an old-fashioned-blackboard (SCI-Arc is after all a school). All the colors in this book serve outrageous purposes.

WHAT?

From the Center: Design Process at SCI-Arc by April Greiman

They become nesting places for texts, virtual breeding grounds. Orange becomes the medium for the articulation of a line drawing. Colors collide, express tensions, extend the significance of images. They can give porosity to the text, or enclose a text in a kind of organic wrapper.

Aside from the play of colors, the question Greiman poses for herself with "From the Center: Design Process at ScI-Arc" is: can a page approximate the nature of the three-dimensional world? Can a page approach architecture?

The answer to this question appears in her radical treatment of texts. Already, from the "19th Amendment Commemorative Postage Stamp" project on, it is hard to keep Greiman’s typefaces in place. They seem to posses a kind of eagerness to play multiple roles, to dance, to be part of, as well as so much signage pointing to the action.

WHAT?

19th Amendment Commemorative Postage Stamp by April Greiman

But with "From the Center: Design Process at SCI-Arc" texts respond, form a kind of intimate circuit with the images. Sometimes they copy, sometimes they hollow out in precisely the shape ofthe architectural image they refer to. Sometimes they seem to simply generate from out of themselves their own structure giving a whole new sense to a 'column' of text.

All in all, there seems to be an exchange of information between color, text, and image. The same way, for instance, a bee and a flower form an empathic circuit.

How can we allow a door through which the observer might pass into the field, not just mentally but sensually, physically? How do we create an environment in, for, play?

THE ORDER OF THE WHOLE EARTH CATALOG

Source: Brand, Stewart (1971): The Last Whole Earth Catalog: Access to Tools

The operational word on the cover of the CATALOG is access.

WHAT?

Ultimately that means giving the reader access from where he is to where he wants to be.

WHAT?

Which takes work, work takes tools, tools need finding, and that's where we come in. A good catalog is a quick scan array of tools, where you can find what you want easily, with detailed information where you're interested. Our attempt to fulfill these requirements led touse-based section headings (Shelter, Land Use, Communications, etc.), an alphabetic index, and page-theme layout. On each page we try to have one graphic which “keys the page”, tells with a glance what's there.

WHAT?

The hardest thing we had to learn was providing simple dear demarcation between items – an unadorned line. We publish considerable detailed information – fine print. Sorting among that is aided by a consistent code of typefaces (reviews are always “univers italic”, accessis always “teeny”. Divine Right is always “bold teeny”, and so forth). The IBM Selectric Composer makes this an easy matter. Still we're not asconsistent as we should be.

WHAT?

In descending order of importance, our layout guidelines are:

accuracy

clarity

quantity of information

appearance

Glamorous white space has no value in a catalog except as occasional eye rest. I figure the reader can close his eyes when he's tired. I keep coming back to the reader/user because that's who the editor represents. I've had to feel that my obligations to Portola Institute, to staff, friends, relatives, and to myself are all secondary. So are obligations to authors, suppliers, publishers, other editors.

WHAT?

Usually there's no conflict, but when there is the editor has to see that the reader wins. The editor's main mechanical task is determining efficient use of production time and page space. It's like spreading hard butter on soft bread, best if you cut the task into workable chunks and distribute them evenly.

I use McBee cards, one for each item, for rough editing. I know from looking at previous CATALOGS and the new material approximately how many pages should be in the, say, Nomadics Section – 61 pp. So I take the stack of McBee cards punch-coded for that section and break them down into categories – mountain stuff, car stuff, outdoor suppliers, survival books, etc.

WHAT?

Then those subpiles are put in some sensible sequence. Then on a big table the cards are separated further into 61 little page-stacks, by pairs (the reader sees 2 pages at a time, not one).The contents of those piles are written on my desk dummy. The cards are stacked in page sequence, and I've got a section rough edited.

LINIE, FLÄCHE, RAUM;

Source: Spoerhase, Carlos (2016): Linie, Fläche, Raum: Die drei Dimensionen des Buches in der Gegenwart und der Moderne

(...) Inwiefern ist das Buch in seiner „überkommenen Gestalt“ aber ein Medienformat der Vergangenheit? Benjamin glaubt, dass sich eine „bedeutende literarische Wirksamkeit“ nun mehr ausschließlich in „Flugblättern, Broschüren, Zeitschriftartikeln und Plakaten“ entfalten könne;

WHAT?

für die „anspruchsvolle universale Geste des Buches“ - die, so ließe sich hinzufügen, von Mallarmé mit „Un coup de dés“ noch vollzogen wurde - gebe es in der Gegenwart keinen Platz mehr. ¹

WHAT?

(...) Bereits die Zeitung wird mehr in der Senkrechten als in der Horizontalen gelesen, Film und Reklame drängen die Schrift vollends in die diktatorische Vertikale. ²

(...) Die Schrift, die im gedruckten Buche ein Asyl gefunden hatte, wo sie ihr autonomes Dasein führte, wird unerbittlich von Reklamen auf die Straße hinausgezerrt und den brutalen Heteronomien des wirtschaftlichen Chaos unterstellt. ³

(...) ihm wird die unvermeidliche Zerstreuung durch ein „dichtes Gestöber von wandelbaren, farbigen, streitenden Lettern“ in der Tagespresse und im Plakatdruck sowie im großstädtischen Straßenbild insgesamt scharf kontrastiert.

(...)El Lissitzky ist einer der wenigen, die sich zeitgleich darum bemühen, einerseits das Buch von der Buchseite streng zu unterscheiden und andererseits die Dreidimensionalität des Buches theoretisch anspruchsvoll zu reflektieren.

WHAT?

Beat the Whites with the Red Wedge by El Lissitzky

(...) Zentral ist nun, dass Lissitzky darauf hinweist, dass die avantgardistische „Sprengung“ auf die typographische Seitebeschränkt geblieben sei; die plane zweidimensionale Seite (des Buchs, Plakats, der Zeitung) sei Gegenstand der theoretischen Reflexion und der (konkret) gestalterischen Dekonstruktion gewesen, nicht aber das dreidimensionale Buch. Dieses bleibe weitgehend intakt, weil bisher „für das Buch als Körper keine neue Gestalt“ gefunden worden sei.

Eine Sprengung des Buches als dreidimensionales Objekt habe garnicht stattgefunden, denn es sei die aktuelle Arbeit an der Seite „im Innern des Buches noch nicht soweit, um [ ... ] die traditionelle Buchform zu sprengen.“

(...) Dreidimensionalität (Raum) scheint als metaphorischer Spender für Zweidimensionalität (Fläche) nur deshalb in Frage zu kommen, weil die dritte Dimension des Untersuchungsgegenstands gar nicht in Frage steht. Und ist erst einmal die Dreidimensionalität als mächtige Metapher für die Zweidimensionalität installiert, lässt sich leicht übersehen, dass die Dreidimensionalität auch einen „wörtlichen“ Sinn hatte.

(...) Für weite Teile der theoretischen Reflexion über textuelle Materialität ist das Buch als bloß zweidimensionale Seitenfläche von einem Bildschirm überhaupt nicht zu unterscheiden. Um es etwas zuzuspitzen: Bis in die Gegenwart wurde das Buch theoretisch meist so diskutiert, als ob es sich auch um den Bildschirm eines avancierten "E-Book-Readers" handeln könnte.

FOOT NOTES

¹ Benjamin: Einbahnstraße, S.7: „Die bedeutende literarische Wirksamkeit kann nur in strengem Wechsel von Tun und Schreiben zustande kommen; sie muß die unscheinbaren Formen, die ihrem Einfluß in tätigen Gemeinschaften besser entsprechen als die anspruchsvolle universale Geste des Buches in Flugblättern, Broschüren, Zeitschriftsartikel und Plakaten ausbilden“

² Benjamin: Einbahnstraße, S. 28-29

³ Benjamin: Einbahnstraße, S. 28

⁴ Benjamin: Einbahnstraße, S. 29: „ Und ehe die Zeitgenosse dazu kommt, ein Buch aufgeschlagen, ist über seine Augen ein so dichtes Gestöber von wandelbaren, farbigen, streitenden Lettern niedergegangen, daß die Chance seines Eindringen in die archaische Stille des Buches gering geworden sind“.

⁵ El Lissitzky: Unser Buch (1927), S. 177: „Ja, wir haben noch heutigen Tages für das Buch als Körper keine neue Gestalt, es ist noch immer ein Einband mit Umschlag und Rücken und Seiten 1, 2, 3, …“

⁶ El Lissitzky: Unser Buch (1927), S.178. Vgl. zu Lissitzkys Buchkunst u.a. Zelinsky: Von der Staffeleimalerei zur praktisch nützlichen Dingwelt, S.111-125

FLEXIBLE VISUAL SYSTEMS

Lorenz, Martin (2021): Working without Grids (69-75)

Even if you want to work without grids, you still need visual systems. Grids are one of the most helpful inventions since communication designers had to design more than one deliverable. By limiting the options where to place text or images and in which size, so much time has been saved. Apart from being an efficient design tool, they also establish a comprehensible order that makes reading easier.

Having said that, you are not obliged to use them.

A visual system is nothing else than a set of rules, an instruction manual for humans and/or machines. By inventing rules, similar to the ones on the left, you can design processes that lead to distinctive visual identities.

The instructions you are giving are actually code that can be executed by humans (usually slowly) or by machines (usually morequickly). When you let these rules be executed by machines instead of humans, you gain a lot of new possibilities. Not just that your design can become more complex, you can instruct any machine that is manageable with code. Even a remote-controlled spray can installation ¹ , drone, or car can be used to visualize the applications of your system.

But not everything programmable needs to be executed by machines. The imperfection coming from humans can create interesting details a machine would avoid. Suprematism, Constructivism, and De Stijl would have been extremely boring if not painted by humans but printed by machines. Executing programs by humans also have a collaborative dynamic that can add interesting interpretations within the parameters of the rules. ²

WHAT?

The black square by Kasimir Malewitsch (Representative of the Suprematism epoch)

WHAT?

Proun 19d by El Lissitzky (Representative of the Constructivism epoch)

WHAT?

Composition with Red, Blue, and Yellow by Piet Mondrian (Representative of the De Stijl epoch)

We see and remember only the things that make sense to us. Based on our experience some things appear to be comprehensible and some don't. Not everything that is logical to us is logical to someone else, because the other person has different experiences in life.

The more people with different backgrounds we want to reach, the more universal the language we use has to be. Maths and physics are such universal languages. If you show a person from the other side of the world an animation using physics, this person will intuitively understand it because they've lived with the same physics on the same earth.

WHICH ADVANTAGES DOES USING A GRID HAVE?

While you do not need a grid, this book is full of them because grids make it easier to determine the positions and sizes of the assets. Just as the assets can react to formats, grids can also adapt to different formats by repeating or distorting its modules.

Designing with grids has several advantages:

1. Structure

Grids create a comprehensible visual structure that can help to distinguish different information types from each other. For example, three columns can be used for three different languages or the top row can always be used for headings.

2. Aesthetics

Grids can create the feeling of order and harmony, but also of dynamism. Through the interaction between positive and negative spaces or the irregular and regular placement of elements tension can be built up.

3. Efficiency

At first glance, grids look like more work for the designer. In fact, they save us a lot of work. By reducing the options for positioning assets, the number of decisions to be made when designing is also reduced. If, in addition to the grid, you have found a system for distributing the various types of information, you only have to make a manageable number of design decisions on each page. With a book of 48 pages or more, you will quickly see how much time this saves you.

4.Harmony

After a number of pages you will also see that the design decisions influenced by the grid make the book a harmonious whole, even if each page looks different you will always notice the underlying logic.

5. ldentification

In the context of this book the possibility of creating a recognizable visual language with grids is very interesting. If the grid, and / or the system on how to apply the assets on the grid, is distinctive it serves as an identifiable design element.

6. Instructions / Design Manual

The description of how something is designed is often disregarded as a non-essential part of the design process. I consider it as one of the most important phases. If a system is easy to understand and apply it will most likely be used for a long time. If a system is highly complex and there is a human applying it, it will most likely be wrongly interpreted.

A grid helps to visualize rules. Everybody understands what it means to divide the width of the format by ten and use a tenth of the format as a space around an object, as shown on the left page. The modules resulting from the division of the format help to define position and size of objects and spaces and the best thing about them, they are scalable and adapt to the size of the format.

At the risk of mentioning the obvious, I would like to point out that there is a difference between graphic and typographic grids and that these must be coordinated with each other.

While typographic grids need space in between columns and rows, also called gutter, graphic grids can work perfectly without the gutter. In fact, they are easier to manage and calculate without the gutter. When working with graphic-heavy visual systems I usually start with a graphic grid and place a typographic grid inside the sections which have text. If I am working on a book or any other text-heavy application I start with the typographic grid and place the graphic grid inside of the modules of the typographic grid.

WHAT?

Example for a typographic grid (Filling packs catalogue book by Lotte Schilder Bär and Christoph Bignens)

WHAT?

Graphic Grid without Guttter

WHAT?

Example for a Graphic Grid (Filling packs catalogue book by Lotte Schilder Bär and Christoph Bignens)

Another option would be to place a format-spanning typographic grid on top of a graphic grid, but to this date design software does not make this easy.

HOW TO CREATE A GRID WITH DIFFERENT GEOMETRIC FORMS?

Reset

Forget about the software you are working with and the possibilities they offer you at the moment, and you will see that you are very limited and that there are countless other ways to develop grids.

You only need to look at centuries old Islamic patterns. These seemingly complex patterns are based on simple grids based on different geometric shapes and their intelligent use.

WHAT?

Even the much simpler posters for Musica Viva by Josef Müller-Brockmann, designed on a grid rotated by 45 degrees, look very innovative for a today's designer adapted to today's software. Not to mention Müller-Brockmann's circular grids. All of these are quite complicated to realize with today's software.

WHAT?

Starting Points

Begin your experiments with alternative grid systems with a geometric shape that is not the rectangle. For example, take a triangle or hexagon and put them together. Use the resulting characteristics to design shapes and patterns, but also to design or arrange fonts.

Adaptation

Today's software favors the grid based on horizontal and vertical guidelines. Adapting the grid based on other shapes is complicated. This is why in this book I have worked with triangles, pentagons, and hexagons that fit into a rectangular grid.

HOW TO USE GRIDS?

There are different ways to use a grid.

You can generate shapes by filling modules or their outline. You can also use the module or outline to align text or graphics. The more unusual the grid and its use is the better it serves as a distinctive visual identity.

These couple of options give you already sheer unlimited possibilities. You can repeat the modules and use them to create larger patterns, lines, frames, or labels, depending on the need of each deliverable. Adjusting the complexity of the grid needs to be dependent on content and scale of the deliverable. Simple solutions are better suited for small applications. The larger the format, the more complex you can get.

FOOT NOTES

¹ Jürg Lehni programmed a tool to spray paint vector images to walls. He called his machine "Hektor." The perfection of vectors and the imperfection of the spray paint create an in- teresting contrast and a distinctive visual language that could serve as a visual identity.

² Studio Moniker's "Conditional Design" workshops are a good example for programmed design, executed by humans. They imposed on themselves rules, which they then executed together. The execution of Sol le Witt's murals come to mind also, who instructed his assistants how to draw his huge murals with tiny pencils. From far the murals appear to be perfect, but from close you notice the imperfection of the human stroke.

GRID AND DESIGN PHILOSOPHY

Source: Müller-Brockmann, Josef (1981): Grid Systems in Graphic Design

The use of the grid as an ordering system is the expression of a certain mental attitude in as much as it shows that the designer conceives his work in terms that are constructive and oriented to the future.

This is the expression of a professional ethos: the designer‘s work should have the clearly intelligible, objective, functional and aesthetic quality of mathematical thinking.

His work should thus be a contribution to general culture and itself form part of it. Constructive design which is capable of analysis and reproduction can influence and enhance the taste of a society and the way it conceives forms and colours. Design which is objective, committed to the common weal, well composed and refined constitutes the basis of democratic behaviour. Constructivist design means the conversion of design laws into practical solutions.

Work done systematically and in accordance with strict formal principles makes those demands for directness, intelligibility and the integration of al factors which are also vital in sociopolitical life. Working with the grid system means submitting to laws of universal validity.

The use of the grid system implies

the will to systematize, to clarify

the will to penetrate to the essentials, to concentrate

the will to cultivate objectivity instead of subjectivity

the will to rationalize the creative and technical production processes

the will to integrate elements of colour, form and material

the will to achieve architectural dominion over surface and space

the will to adopt a positive, forward-looking attitude

the recognition of the importance of education and the effect of work devised in a constructive aand creative spirit.

Every visual creative work is a manifestation of the character of the designer. It is a reflection of his knowledge, his ability, and his mentality.

THE TYPOGRAPHIC GRID

The grid divides a two-dimensional plane into smaller fields or a three-dimensional space into smaller compartments. The fields or compartments may be the same or different in size. The fields correspond in depth to a specific number of lines of text and the width of the fields is identical with the width of the columns.

The depths and the widths are indicated in typographic measures, in points and Cicero. The fields are separated by an intermediate space so that on the one hand pictures do not touch each other and legibility is thus preserved and on the other that captions can be placed below the illustrations.

The vertical distance between the fields is 1, 2 or more lines of text, the horizontal space depending on the size of the type character and of the illustrations. By means of this division into grid fields the elements of design, viz. typography, photography, illustration and colour, can be disposed in a better way.

These elements are adjusted to the size of the grid fields and fitted precisely into the size of the fields. The smalles illustration corresponds to the smallest grid field. The grid for a 1 page comprises a smaller or larger number of such grid fields. Al illustrations, photographs, statistics etc. have the size of 1, 2, 3 or 4 grid fields.

In this way a certain uniformity is attained in the presentation of visual information.

The grid determines the constant dimensions of space.

There is virtually no limit to the number of grid divisions. It may be said in general that every piece of work must be studied very carefully so as to arrive at the specific grid network corresponding to its requirements.

The rule: The fewer the differences in the size of the illustrations, the quieter the impression created by the design. As a controlling system the grid makes it easier to give the surface or space a rational organization. Such a system of arrangement compels the designer to be honest in his use of design resources. It requires him to come to terms with the problem in hand and to analyse it. It fosters analytical thinking and gives the solution of the problem a logical and materialbasis. If the text and pictures are arranged systematically, the prioritiesstand out more clearly.

A suitable grid in visual design makes it easier

to construct the argument objectively with the means of visual communication

to construct the text and illustrative material systematically and logically to organize the text and illustrations in a compact arrangement with its own rhythm

to put together the visual material so that it is readily intelligible and structured with a high degree of tension.

There are various reasons for using the grid as an aid in the organization of text and illustration:

economic reasons: a problem can be solved in less time and al lower cost.

rational reasons: both simple and complex problems can be solved in a uniform and characteristic style.

mental attitude: the systematic presentation of facts, of sequences of events, and of solutions to problems should, for social and educational reasons, be a constructive contribution to the cultural state of society and an expression of our sense of responsibility

WHAT IS THE PURPOSE OF THE GRID?

The grid is used by the typographer, graphic designer, photographer and exhibition designer for solving visual problems in two and three dimensions.

The graphic designer and typographer use it for designing press advertisements, brochures, catalogues, books, periodicals etc., and the exhibition designer for conceiving his plan for exhibitions and show-window. displays.

By arranging the surfaces and spaces in the form of a grid the designer is favourably placed to dispose his texts, photographs and diagrams in conformity with objective and functional criteria.

The pictorial elements are reduced to a few formats of the same size. The size of the pictures is determined according to their importance for the subject. The reduction of the number of visual elements used and their incorporation in a grid system creates a sense of compact planning, intelligibility and clarity, and suggests orderliness of design. This orderliness lends added credibility to the information and induces confidence.

Information presented with clear and logically set out titles, sub-titles, texts, illustrations and captions will not only be read more quickly and easily but the information will also be better understood and retained in the memory. This is a scientifically proved fact and the designer should bear it constantly in mind. The grid can be successfully used for the corporate identities of firms. This includes all visual media of information from the visiting card to the exhibition stand: all printed forms for internal and external use, advertising matter, vehicles for goods and passenger transport, name-plates and lettering on buildings, etc.

When designing with grids, the results are often quite predictable.

Of course, designers can define the grid and therefore can use it as an individual tool to generate layouts. Depending on the subtlety of a grid,layout options can be fairly diverse. But, because of the possibilities and the complexity opened up by ever finer grids, it becomes more and more difficult to use them.

This contradicts the original purpose ofa grid: Reducing the number of options and thus improving the efficiency of a layout for a large number of pages. The designer has to weighs implicity against detail. What would a grid look like that is not overly complex and still leads to more organic and diverse-looking layouts?

lnstead of static lines defined by coordinates, it could consist of moving elements that, even if they have their origin at a particular coordinate, move between Positions and over time. Using such a grid for layouts, the probability is small that its lines are at the same spot at different points in time. The grid has become more unpredictable.

Standardised tools in graphic software, such as the grid, can only be changed within the narrow scope of a few predefined settings.

THE IMPACT OF PRO­GRAMMING ON GRAPHIC DESIGN

Source: Blanc, Julie and Maudet, Nolwenn (2022): Code 〈–〉 Graphic design A ten-year relationship

The ethics of free and open source software, a profound transformation of practices

All of these programming practices have a certain ethic in common, a programming culture that is not solely technical. The place occupied by programming in the field of graphic design today cannot be fully understood without understanding its connection to the culture of free software that originated in computing.

In his 2012 text, Kévin Donnot already mentioned free software and hacking as a noteworthy aspect of programming. Ten years later, one can see that free and open source culture has spread widely through the world of digital graphic design.

WHAT?

LE LABORATOIRE DE GRAPHIQUE DE BERTIN (2021) by Kevin Donnot

https://www.e-k.fr/

One of the most important aspects of free software culture is the possibility of having access to the code of the program or software one is using. This implies a simultaneous rejection of tools and software whose mechanics cannot be inspected for the purposes of understanding both their potential and their limitations.

Thus graphic designers who work with programming often seek to use free and open source software, i.e., software whose license allows the inspection, modification, and duplication of the code. ¹

This aspect, although fundamental, is not the only role played by open source culture, which has also impacted ways of working by encouraging collaboration. In a graphic design environment that is extremely connected to the notion of the author, open source culture has encouraged the development of collectives.

We have already mentioned a number of them: Open Source Publishing (OSP) — a pioneer of open source graphic design, already mentioned ten years ago in Graphisme en France — is certainly one of the most familiar. Though its members have evolved in the meantime, the collective is still active and continues to pursue its approach.

WHAT?

Other collectives have also emerged, such as Bonjour Monde, and Luuse. The use of programming facilitates both collaborative and simultaneous work, in particular through the use of Git version management software .

WHAT?

Workshop FerroCal, EnsAD, Paris

https://bonjourmonde.net/en

WHAT?

Harry Studio (2023) designed by luuse

https://harrystudio.com/

In computer science, version-control software allows to store files and all of the modifications that have been made to them. These are very efficient tools for managing the collaborative writing of source code, which, although not really adapted to graphic work ² greatly simplifies collaboration.

This facilitation is all the more surprising as the classic Adobe suite still struggles to allow collaborative editing of documents. At the same time, the open sharing of source code for projects created by graphic designers on platforms such as GitLab, or GitHub, clearly shows a willingness to be adopted and modified by others.

WHAT?

Git is a free and open source distributed version control system designed to handle small or large projects efficiently.

https://about.gitlab.com/

https://github.com/

For example, the typeface Avara, initially created by Raphaël Bastide, was explicitly designed to be reworked.

WHAT?

Get the font here:

https://raphaelbastide.com/­avara/

https://gitlab.com/velvetyne/­Avara/

https://velvetyne.fr/fonts/­avara/

The possibilities of versioning, simultaneous work, and reworking of source code used in programming are then new approaches for graphic design. They can influence ways of working, and even graphic forms themselves, which are impacted by the possibility of observing the work of others at different moments in the design process.

Today, in the field of graphic design, the amount of resources available and shared under open source licenses on the Internet is considerable, ranging from pictograms to illustrations. However, it is more specifically the field of typography that has contributed primarily to the spread of free and open source culture among graphic designers, mainly in France and Belgium. Many typefaces are distributed under a free license, just like open source software, that allows them to be reused and modified. ³

The adoption of royalty-free typefaces has thus strongly developed in schools and in professional practices, especially since 2010 and the foundation by Frank Adebiaye of the now-famous Velvetyne foundry. Nevertheless, it is regrettable that this enthusiastic use often occurs in the context of a consumer relationship, where fonts are chosen because they are freely available, without any real understanding of the issues at the heart of free and open source culture.

WHAT?

https://velvetyne.fr

This question is similar to the ones that are quite familiar, and widely discussed throughout the programming world, and that are unavoidable for graphic designers: though many consume open source software, the number who actively contribute to it is much smaller; what then of the spirit of community and autonomy of production advocated by free culture?

This culture, with its strong ethical dimension, also raises other questions. The rejection of non-open source tools can sometimes reach the level of mimicry when it comes to the culture of certain programmers, to the point of a paradoxical rejection by graphic designers of graphic interfaces and thus DTP software.

WHAT?

Desktop-Publishing (Softwares like InDesign or Word)

Among other things, this contributes to aggravating the rupture between graphic designers who program and others who don’t. It is utopian to imagine that every graphic designer could code, despite the issues of open source culture being increasingly present in educational discourse. It is still necessary to invent a repertoire of intermediary tools that incorporate various modes of interaction (textual and/or graphic) and that make it possible to respond to the development of increasingly hybrid practices.

The Web introduces specific issues for graphic design. It now seems that the Web, in its hybrid position of both publishing tool and medium, sits at the junction of specific issues that exist within a landscape of graphic designers who have adopted coding practices, and yet, at the same time, this is rarely the subject of discussion. Over the last ten years, the increasing diversity of digital devices has led to the multiplication of both sizes and types of screens upon which web pages can be displayed (computers, tablets, smartphones, but also projectors, televisions, etc.).

The conditions of consultation of any given site therefore vary considerably from one reader to another. One of the main characteristics of the design of a website is to adapt the design (functionalities, interactions, and layouts) to the different parameters or characteristics of the device on which the site will be displayed, as well as the environment in which it will be consulted.

The most familiar principle is the need to adapt the graphic design to the size of the screen, but it is theoretically possible that readers themselves could define their own display styles, something that has been possible since the early days of CSS. Thus, readers now have some control over the display of content, if only by changing the window size or by setting a “dark” mode on browsers. While graphic designers have become accustomed to having complete control over the final printed form, these different points mark a radical change in their approach to their discipline.

In order to respond to this multiplicity of displays, the Web is based on a principle of separation of content and form between HTML and CSS, which we have already mentioned. Elements coded in HTML do not change, and it is in CSS that the way they are displayed according to the size of the screen is defined. The same information is consulted from one device to another, but its formal components are organized differently so as to make navigation ergonomic, and reading optimized, in all circumstances.

WHAT?

WHAT?

Design is now marked by a paradigm shift for graphic designers who must describe the possible behavior of elements using a range of principles proposed in web languages: templates, contextual style sheets, semantic structuring, the notion of flow, etc. However, the tools available today for designing visual prototypes for publication (Sketch, Figma, Adobe XD, Webflow) lack most of these principles because they are too closely modeled on DTP layout software dedicated to print and/or fixed media.

WHAT?

Only the mastery of the technical aspect of the Web, and thus of these languages, makes it currently possible to understand its potential, and propose adapted and creative graphic forms.

Graphic designers must therefore accept a certain lack of control over the forms they produce in order to suit the intrinsically fluid and open character of the Web. This design of graphic formatting, which forces one to think outside the limits of the page format, has profoundly transformed recent practices, while at the same time reviving ways of working on formatting that predate the appearance of DTP software, where graphic designers could only work from templates and style sheets. In a recent article published in the magazine Design Arts Médias, this hypothesis was formulated as follows:

WHAT?

“The notion of style sheet that gave rise to the name CSS is defined as ‘a set of rules that associate properties and stylistic values with the structural elements of a document, thus expressing the way in which the document is presented’.

This is a definition that is entirely compatible with the production of printed books. It reminds us that before the advent of DTP, the work of designers and typographers consisted in providing the printer (lead typesetting) or the operator (phototypesetting) with a set of stylistic rules and constraints that defined the template of a book and the characteristics of the blocks of type. Coding in CSS consists of providing this same information to the web browser”.

WHAT?

WHAT?

In a second article in this same publication, we argued that in this sense, the DTP era was ultimately just a parenthesis in the history of graphic design, a specific moment during which there was no longer a strict separation between page layout and text layout.

Current programming practices, particularly when it comes to web technologies, therefore invite us to write a new page in the history of graphic design, rooted in the long history of its technical evolution.

Whereas ten years ago, code practices were relatively rare in the landscape of graphic design in France, they are much more present today, focusing on specific registers. Some of the projects cited in this text have now formed a school of thought, and the practices of OSP, LUST, and G.U.I. are widely cited by art school students as references.

Thus, in recent years, a community and a culture of graphic design who use programming has formed, one that is relatively specific to Western Europe, with a real and growing synergy between France, Belgium, Switzerland, and Holland. While they experienced difficulties when it came to establishing a place in this landscape, web design and web-to-print now find a particular echo in these communities, forging a movement recognizable by its attention to “artisanal” practices supported by the challenges of open source culture, and those specific to the fluidity of the Web.

So graphic designers code in order to be closer to the mediums for reading and communication with which they work. They contribute to extending the field of practices of graphic design, pursuing a movement that began in the era of phototypesetting and that already signaled “the gradual enlarging of [the typographer’s] prerogatives far beyond the simple management of the typographic sign, to the very extensive field of graphic design, associated in the second half of the century with a global mastery of visual communication, and the multiple forms of encounter between text and image”. ¹⁰

At the same time, these coding practices contribute to overcoming approaches arising from graphic interface software, which led graphic designers to adopt computers as their main tool in the early 1990s. However, outside of the Web, this culture of programming in graphic design is struggling to develop, as it has a very limited audience.

Apart from the aforementioned examples of Prototypo and TexTuring, programs and tools dedicated to a specific project or task are difficult for non-programmers to appropriate, as they remain attached to the direct manipulation that graphic interfaces allow. In order to open up digital culture to a greater number of graphic designers, it is therefore necessary to consider hybrid approaches that allow the relationships between code, tools, and graphic design to be understood in a collective manner.

WHAT?

WHAT?

FOOT NOTES

¹ On her website, graphic designer Amélie Dumont explains, for example, that she has “a very special interest for [...] experimenting with code” in her projects, and that she has “only been working with free software since 2016”, as these two things go hand-in-hand. (https://www.amelie.tools/)

² Anthony Masure, “Visual Culture. Open Source Publishing, Git et le design graphique”, strabic.fr, 28 November 2014, (http://strabic.fr/) OSP-Visual-Culture,

³ Frank Adebiaye, “Licencier ès lettres”, Back Office, no 1, Paris, Édi- tion B42 and Fork Éditions, 2017.

⁴ Eric Schrijver, op. cit.

⁵ Alexandre Leray and Stéphanie Vilayphiou, “About: Alan Kay, ‘A User Interface: a Personal View’”, Considering your tools. A reader for designers and developers, 2013, online, http://reader.lgru.net/texts/­about-alan-kay-a-user-interface-a-personal-view/

⁶ Miriam Eric Suzanne, CSS is Rad. Resilient design on an infinite canvas, 2020, online, https://www.miriamsuzanne.com/­speaking/css-rad/

⁷ Håkon Wium Lie, Cascading Style Sheets, doctoral thesis, University of Oslo, 2005, p. 77

⁸ Julie Blanc, “Si Jan Tschichold avait connu les feuilles de style en cascade : plaidoyer pour une mise en page comme programme”, in Kim Sacks and Victor Guégan (dir.), Design Arts Medias, “Systèmes : logiques, graphies, matérialités”, August 2022, online, https://journal.dampress.org/­issues/systemes-logiques-gra- ­phies-materialites/ si-jan-tschichold-avait-connu-les-feuilles-de-­ style-en-cascade-plaidoyer-pour-une-­mise-en-pagecommepro- gramme.

⁹ Nolwenn Maudet, “Une brève histoire des templates, entre autonomisation et contrôle des graphistes amateurs”, in Sacks and Guégan (dir.), ibid., https://journal.dampress.­org/issues/systemes-logiques-graphies­-materialites/une-breve-­histoiredestemplates-entre­-autonomisation-et-controle-­des-graphistes-amateurs.

¹⁰ Olivier Lugon, “Le graphisme, ‘activité totale’: typographie, photographie, exposition”, in Collectif, Design graphique, les formes de l’histoire, Paris, Éditions B42 and Cnap, 2017, p. 79

ARE WOMEN THE NATURAL ENEMIES OF BOOKS?

Written by Anne Lyon Haight

Source: Fanni, Maryam; Flodmark, Matilda and Kaaman, Sara (2020): Natural Enemies of Books: A Messy History of Women in Printing and Typography

In my search for knowledge about lady bibliophiles I climbed the library ladder and among the books on collecting saw "The Library", by Andrew Lang, London, 1881. Confident that I would find some charming and sympathetic essay on the subject, I took it down and turned to the index, but evidently I had forgotten Lang's prejudice, for to my horror the startling lines "Women the natural foes of books" met my eye.

They were classed with the other enemies of books; damp, dust, dirt, book worms, careless readers, borrowers, book stealers, book-ghouls, etc. so I hastily turned to the page and read

"Almost all women are the inveterate foes, not of novels, of course, nor peerages and popular volumes of history, but of books worthy of the name. It is true that Isabelle d'Este and Madame de Pompadour and Madame de Maintenon, were collectors; and, doubtless, there are many other brilliant exceptions to a general rule. But broadly speaking, women detest the books which the collector desires and admires.

WHAT?

WHAT?

WHAT?

First, they don't understand them;

second, they are jealous of their mysterious charms;

third, books cost money, and it really is a hard thing for a lady to see money expended on what seems a dingy old binding, or yellow paper scored with crabbed characters.

Thus ladies wage a skirmishing war against booksellers' catalogues, and history speaks of husbands who have had to practise the guile of smugglers when they conveyed a new purchase across their own frontier. Thus many married men are reduced to collecting Elzivers, which go readily into the pocket for you cannot smuggle a folio volume easily."

Poor man, his experience with the fair sex must have been a very unfortunate one. Perhaps he had been disillusioned by reading of the sixteenth century abbess of the convent of Rumsey in Hampshire, whom Dibdin tells about. She was bibulously rather than bibliographically inclined and bartered the books of the abbey for strong liquors and consequently was accused of immoderate drinking, especially in the night time when she invited the nuns to her chamber to participate in these excesses.

But fortunately the women whom Lang describes in his diatribe are really the rare exception to the rule and only lack of space prevents my writing a folio volume about the many famous women collectors who have been friends not foes to books throughout the ages.

It is true though that the female of our species has never been as susceptible to the malady of book madness as the male, possibly because she has not had the same opportunity.

Unless a woman is economically independent there are many demands upon her allowance and consequently she must really want a book very much to buy it instead of a new hat or something else that is dear to her heart. She is not as apt to buy for speculation or because a book is one of the conventional collector's items, but is more independent and adventurous in following her personal taste, although the spirit of a true collector of books is the same whether it be possessed by man or woman.

Strange to say, the first bibliophile on record is a woman. She was a Benedictine abbess named Hrotsvitha who lived in Saxony in the tenth century, and not only had books written for her convent, but wrote plays and translated Terence.

WHAT?

WHAT?

Her example was followed in the next century by the lovely and intelligent Countess Judith of Flanders, who, wherever she followed her warring English husband caused the most exquisite illuminated manuscripts to be made. She continued her interests on the continent when she later married the Duke of Bavaria.

WHAT?

Four of her manuscripts, magnificently bound, are now safely housed in The Pierpont Morgan Library where "though they are books worthy of the name" their beauty may be appreciated by women who are not even "the brilliant exception to the general rule" of collectors.

WHAT?

WHAT?

(...)

One of the most learned lady bibliophiles of this century in America was Miss Amy Lowell of Cambridge, Massachusetts.

WHAT?

Her books and manuscripts, including her collection of Keats, are being preserved for posterity in the Harry Elkins Widener Memorial at Harvard. She always enjoyed smoking a good cigar while writing or carrying on her sparkling conversations as she thought it made her thoughts flow more easily.

WHAT?

WHAT?

ne could not write of women in connection with books without speaking of two distinguished custodians of famous libraries, scholars, who are as well known abroad as in America; Belle Da Costa Greene, the brilliant Director of The Pierpont Morgan Library,

WHAT?

and Miss Ruth Sheppard Granniss, the Librarian of The Grolier Club and sympathetic friend of all bibliophiles, male or female.

WHAT?

They, of course, come under Lang's category of exceptional examples.

But what of the many other exceptions?

Would Lang have thought that Miss Lowell could not understand books?

or that Diane de Poitiers could be jealous of their mysterious charms?

WHAT?

or that Catherine of Russia would hesitate to spend what money she could procure to satisfy her passion for them?

WHAT?

What could his lady friends have been like to be classed with the enemies of books and such enemies at that?

It would appear that book collecting is a truly feminine pastime, containing many elements which appeal to their sex; romance, intellectual curiosity, love of the beautiful and the quest of something difficult to obtain.

But feminine collectors should beware of pitfalls, for sometimes this mania arouses the baser instincts such as envy, extravagance, and self-indulgence.

Wives have even been known to spend their marketing money on books instead of daily bread and to waste hours reading book catalogues instead of attending to their housewifely duties.

Book collecting, however is a common denominator of all ages and a medium through which the minds of both sexes may meet with pleasure and therefore greatly to be recommended as a delightful occupation.

  1. Literature
  1. Blackwell, Lewis & Carson, David (2000): The End of Print: The Grafik Design of David Carson.
  1. Blanc, Julie and Maudet, Nolwenn (2022): Code 〈–〉 Graphic design A ten-year relationship
  1. Brand, Stewart (1971): The Last Whole Earth Catalog: Access to Tools
  1. Fanni, Maryam; Flodmark, Matilda and Kaaman, Sara (2020): Natural Enemies of Books: A Messy History of Women in Printing and Typography
  1. Greiman, April (2001): Someting from Nothing
  1. Lorenz, Martin (2021): Working without Grids (69-75)
  1. Müller-Brockmann, Josef (1981): Grid Systems in Graphic Design
  1. Spoerhase, Carlos (2016): Linie, Fläche, Raum: Die drei Dimensionen des Buches in der Gegenwart und der Moderne

Impressum

Concepting Chaos

Gestaltung: Amalia Gärtner

Schrift: Justin Bihan, VG5000-Regular,

https://velvetyne.fr/

Das Projekt entstand im Kurs “Other Books and Code”, betreut von Prof. Heike Grebin, Jan Dufke, Simon Thiefes

HAW Hamburg, 2024

Instagram: _schnallo_