Assignment 1-3: Proportions

For the next assignment you will continue to use various border widths. The new variables are the column width and height. You are free to choose widths and heights yourself. You have to make sure that the sum of all column widths adds up to a hundred percent in one row, the same applies to the heights. The one constant is the total number of rectangles should be 25 (in 5 columns and 5 rows).

Create CSS rules and apply classes to the HTML Markup

Fixed: Number 5 colums, 5 rows (25 div elements). Variables: Border weight, column width and row height.

Example CSS code: Example HTML code: result in browser:

Task: Explore layout possibilities with those new variables

Create and submit 5 final layouts.

Further Readings

Working with Constraints

Graphic designers have used modular elements to pro­duce unpredictable results. Try looking at familiar systems from a fresh angle. Given the constraints of any system, how can you play with the rules to make something new?

A child’s set of alphabet blocks looks a certain way, for example, because the blocks are made from perfect cubes. But what if alphabet blocks were made from rectangles instead of cubes? The oddly proportioned faces of the blocks at left pro­vided a framework for designing new letterforms in response to the constraints provided by the blocks of wood.

Standard materials such as laser paper are often used in generic ways. A standard sheet of office paper can be very dull indeed. Yet with creative thinking, an ordinary piece of paper can be used for dramatic effect.

Variations

Variation involves change—the vitality of transformation, in contrast to constancy —the fixity of the invariable. In music variation means the mutation of a musical idea, the transforma­tion of a theme or a mean value. Variation involves singling out a mean value and calls for the ability to put this mean value through as many transformations as possible.

The aim is to devise hundreds of arrangements while ad­hering strictly to the theme in question, and it is a good plan to sketch out these various ideas in preprinted squares. Elementary exercises like these help the typographer to develop versatility and the ability to see a given theme in a multitude of different ways and to tackle it from different angles.
—Emil Ruder

Proportions

Every means at the disposal of man in his creative activities has its value and its extent. In architecture we have the surfaces which enclose space and the volume thus enclosed. Typog­raphy is restricted to two-dimensional space. Even with a single value the problem of proportion still arises, for the rela­tionship of length, breadth and depth has to be settled. Once a plurality of means is used, the real problem of proportion must be faced: the organization of several things in a certain relationship of size.

For centuries, from the number mysticism of the Middle Ages, through the proportional systems of the Renaissance, down to Le Corbusier’s module, man has endeavoured to subject objects of different dimensions to certain rules and fixed numerical systems. These efforts have had two results: Work created out of feeling and intuition and subsequently subordinated to a numerical pattern has been erroneously placed with works constructed on a principle reached by calculation. More im­portant, however, is the fact that proportional systems based on calculation have barred the way to creative work; they have become crutches to support the incompetent. Le Corbusier’s module came at the end of a long, creative life, rich in experi­ence and insights; but for the young student of architecture the same module is a pitfall and a hazard. Ostwald’s extensive efforts to number all colours and to bring the “right” colours together has made no contribution whatever to a real colour culture.

No system of ratios, however ingenious. can relieve the typog­rapher of deciding how one value should be related to another. He must first recognize the individual value before he can work with it. He must spare no effort to tutor his feeling for proportion so that he can judge how much a given ratio can bear. He must know intuitively when the tension between several things is so great that harmony is endangered. But he must also know how to avoid relationships lacking in tension since these lead to monotony. Whether the tension should be strong or weak is a decision which the typographer must make for himself in the light of the problem he is seeking to solve. This is an argument against a rigid numerical principle such as the Golden Section of 3:5:8: 13, for this principle may be right for one work but wrong for another.

Typographical design calls for the recognition of values which become visible during the setting process and have to be organized according to the following criteria: What is the relationship between one value and another? How is a given type size related to a second or third ? What are the relations between the printed and unprinted areas? What is the relation­ship between the colour value and quality and the grey of the type matter? How do the various tones of grey compare? The proper observation of these principles is crucial for the beauty of a printed work, and for its formal and functional qualities.
—Emil Ruder