lecture 07-color and type info 1300 21 september 2009

7/27/2019 Lecture 07-Color and Type INFO 1300 21 September 2009

1/19

Color and TypeINFO 1300 || 21 September 2009

1.

reminder: assignment (http://info130.cs.cornell.edu/index.csp?module=39&assignment=88) due

on 22 September at 11:59PM

questions regarding the assignment?

2.

color theory (HF Chapter 5)

text and typographic design (HF Chapter 7)

Much of the design guidelines that we use on the web come from earlier forms of print design. While we

cannot always translate these guidelines easily from one media to another, it is still important to

understand historical precedents in order to see similar aspects of design. Thus this lecture will not talk

about specific techniques for incorporating color and text in web design (since we have not talked about

CSS yet), but rather about some general ideas that will be useful when you start working on the

mechanics of writing CSS.

So there are two things we're going to focus on today: color theory and text and typographic design. As

we'll see, there are no hard and fast rules about how to use either, both in print design and on the w eb.

In fact, the usage of both color and typography is situated in specific cultural and historical contexts.

Hopefully by understanding the historical, social, and cultural roots you'll then be able to see the

specificity of these designs and have a better idea of when to use the various techniques.

3.

4.

Color and Type || INFO 1300 || 21 September 2009 file:///media/nomadicsounds/Users/nknouf/Docum

of 19 09/21/2009 01:54


2/19

(http://en.wikipedia.org/wiki/File:Dispersion_prism.jpg)

Newton: white light through a prism

The theory of color originally had nothing to do with art. In fact, it was more related to physics and optics

than anything else. Prior to Newton, the color "white (http://en.wikipedia.org/wiki/White#light) " was

thought to be the fundamental color of light; Newton, however, showed that white light, if passed

through a prism, could be decomposed into a set of other colors, suggesting that white light was not itself

a color, but rather was the summation of all other colors. Newton used this result, along with hisunderstanding of reflection, to support his particle theory of light.

Following Newton, then, we have two different ways of thinking about color in terms of its physical

properties:


2 of 19 09/21/2009 01:54


3/19

Additive color (RGB)

Additive color, where sources of differently colored light combine together, like in a reversal of the

prism. This is what you have on computer and television screens, which start out black, but then add

color in different proportions of red, green, and blue in order to achieve other colors.

5.

Subtractive color (CMYK)

Subtractive color, on the other hand, is what occurs on a printed page with inks and pigments; you start

out with a white page, and progressive additions of cyan (c), magenta (m), yellow (y), as well as blac k

6.


3 of 19 09/21/2009 01:54


4/19

(k) allow you to form other colors. These differences explain, then, why for web design (thus, on the

screen) we work in RGB (additive) color space, while if you are designing for print you need to work in

the CMYK (subtractive) color space. There are differences in the gamut, or possible space or numbers of

of colors, that RGB or CMYK can produce, but we will not get into them right now.

Newton's theory was not the only theory of color, however, as.. .

(http://en.wikipedia.org

/wiki/File:Goethe,_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes-

_und_Seelenlebens,_1809.jpg)

Goethe: the relationship between light and dark

...others, more based on visual perception rather than the physics of light, became important in the early

19th century. For example, Johann Goethe, in his book Theory of Colors (http://en.wikipedia.org

/wiki/Theory_of_Colours_(book)) , tried to explain our perception of colors based on ideas of "lightness" and

"darkness" and their resulting interaction. While difficult to reconcile with the ways in which color is

formed by the interaction of light waves or particles, Goethe's observations found much currency within

various artistic movements in the 19th century, as well as being partially proven by modernunderstandings of visual percep tion.

In fact Goethe was one of the first people to develop the color wheel, one of the m ost important tools used

by visual designers.

7.

8.


4 of 19 09/21/2009 01:54


5/19

(http://www.worqx.com/color/shade_tint.htm)

Color wheel; saturation

Color wheel calculator (http://www.sessions.edu/career_center/design_tools

/color_calculator/)

The color wheel in this image is remarkably similar to the one we just saw in the previous slide, created

by Goethe. This wheel additionally allows us to talk about the concept ofsaturation. Saturation is a

difficult concept (http://en.wikipedia.org/wiki/Colorfulness) to define (http://en.wikipedia.org

/wiki/HSL_and_HSV) ; we can often think of it as being related to the "strength" of a color, and talk about

saturation with terms like "light" and "dark". Thus, laser light (or light of only one wavelength) is veryhighly saturated, while a grey color has no saturation at all. In this image of a color wheel, more

saturated colors are on the inside of the wheel, while less saturated colors are on the outside.

The color wheel is often used to help us pick colors for our designs, and there are a variety of ways we

can do so. Let's use one of the myriad color wheels available online to talk about monochromatic,

complimentary, triadic, split-complimentary, and so on. (Go through examples on color wheel calculator

page)

9.


5 of 19 09/21/2009 01:54


6/19

(http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html)

Color interaction (http://web.mit.edu/persci/people/adelson

/checkershadow_illusion.html)

But colors don't exist in isolation either; they interact with each other, sometimes in very mysterious

ways. So, let's take a look at this image. Are the colors in squares A and B equal?

This illusion is based on work by the perceptual psychologist Ted Adelson at MIT. So the answer is both

yes and no; if we were to measure their color by going into an image manipulation program, we would

see that they are indeed the same color. But obviously they also look different from each other. Why is

that? Well, our visual system is trying to make sense of what we see. So in this image there is a

relationship between the pattern of squares on the board, and the way that our visual perception tries to

make sense of the addition of the shadow on the board. The explanation is due to how we make sense of

local contrast, of differences between sharp and fuzzy edges, and so on. But the important thing to

understand here is how there is an interaction between different shades of colors that leads to a very

particular visual percept that is different from the values of the colors themselves.

10.


6 of 19 09/21/2009 01:54


7/19

Johannes Itten (http://en.wikipedia.org/wiki/Itten)

Color Contrasts (http://wiki.blender.org/index.php/Doc:Books/ActionBook

/Tips/Itten%27s_Color_Contrasts)

One of the more influential theories of how colors interact with each other was developed by Johannes

Itten. Now, it makes sense to spend a little bit of time on Itten himself. Itten was one of the early teachers

at the Bauhaus in Germany. The Bauhaus is important for what we're doing here as they developed a

series of courses in design that have come to influence nearly all future art and design pedagogy. So, Itten

was the head teacher for the Vorkurs, or introductory course, that would teach fundamentals of color,

line, shape. Basically all courses in art and design since have been m odeled on the Bauhaus system,

including the course that you're taking right now.

But one of the most important aspects of his work for the lecture today is his work on color. In his b ook

The Elements of Color, Itten details a variety of different ways to use contrasts between colors for certaineffects. I won't go into detail about each one here, but I want to focus on how we can use contrast in color

to demarcate differentsections of websites.

Prix Ars Electronica (http://www.aec.at/prix_about_en.php)

So on this website, which those of you who are in my section have already seen, we have what in Itten's

terminology would be the contrast of light and dark. So rather than using line or shape to demarcate the

difference between various areas of the design, we can use the difference between colors to do that for

11.


7 of 19 09/21/2009 01:54


8/19

us. This is a very powerful technique and something that is worth studying and spending some time

working with.

color meaning

warm/cool

life/death

blue/pink

Now, you will probably hear a lot about "warm" colors and "cool" colors. Often there is a link here

between reds and oranges and a feeling of "warmth", and b lues and purples and a feeling of "cool". The re

are certain explanations (http://en.wikipedia.org/wiki/Color_theory#Warm_vs._cool_color) for this, but it is

important to understand that the relationships we have between certain colors and other psychological

traits are notuniversal. So, for example, let's take the colors associated with life and death. In some parts

of the world black is seen as the color of death and mourning, while elsewhere white is. Certain colors

are associated differently with governmental power, political parties, religious institutions, and so on.

Based on the cultural significance of different colors, then, there has been the development in various

places around the world of "color-therapy" that attempts to use color as a means of healing.

Just to stress how these colors are historically situated as well, let's take the example of blue and pink.

Which of the two colors is most associated with baby boys? Baby girls? In fact, the association of blue

with boys and pink with girls is relatively recent, occurring only in the beginning of the twentieth

century. Before that the associate was reversed. And in certain periods, such as the Renaissance, it was

customary for men to wear brightly colored clothing.

All of this is to say that the associations that we have with colors are not universal; it is impossible to

write down exact rules that exist across time periods and areas of the world. Thus it is important to think

very carefully about these issues when you are choosing colors for your website if you are designing them

for specific audiences.

12.

color wheels: complementary, triadic, split complementary, etc.

color contrast as way of demarcating different areas

historical and cultural specificity of color meaning

any questions?

Before we go on to talk about type and text, I want to highlight the main take-away points.

13.


8 of 19 09/21/2009 01:54


9/19

Advanced CSS Typography: http://zeitkunst.org/Info2300TypographyFLOSS/

(http://zeitkunst.org/Info2300TypographyFLOSS/)

It is hard to talk about detailed techniques for working with text on your web pages as we have not

covered CSS yet. So for the moment I want to talk about some basic terms that will be useful for your to

know, as well as going through some specific examples that will highlight different ways of using text. I

also want to point you to a lecture that I gave on typography on the web from INFO 2300; those notes go

over some advanced CSS techniques for working with type that might be useful for you down the line in

your project.

A lot of the examples we're going to look at come from print design. There are certain difficulties in

making any direct mappings from print design to web design; nevertheless, there are also things that we

can learn that will be helpful to us in understanding how to work with text and type on the web.

14.

(http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=CharisSILFont)

(http://www.gnome.org/fonts/)

(http://www.gnome.org/fonts/)

Different types of fonts: sans-serif, serif, mono.

15.


9 of 19 09/21/2009 01:54


10/19

Different ways of connecting letters together; ligatures.

On the left, simple ligatures; on the right, complicated ligatures in the Caslon Pro font.

Ligatures are a way of improving readability; by visually connecting certain letters together we can help

lead the eye across the page. As well, they help add a certain style to text, indicating a particular care in

the ways in which the text appears.

16.

measurement

points

ems

Most people are quite familiar with the "point": "Your essays must be in 12pt font." A point

(http://en.wikipedia.org/wiki/Point_(typography)) is an absolute measurement that has been contested over

17.


0 of 19 09/21/2009 01:54


11/19

the years, but now is set by standards (http://typophile.com/node/16929?) to be 1/72 of an inch. This

means that it is the same no matter the size of the font, and is why we speak of font sizes in terms of

points, rather than other measurements that we will come to shortly.

In contrast to the point and the pica, an em (http://en.wikipedia.org/wiki/Em_(typography)) is a relative

measurement: one em is equal to the point size of the font. So, if we have a 72 point font (which,

remember, is going to be 1 inch wide by definition), then an em is 1 inch. If, on the other hand, wehave a 12 point font, then an em is going to be 1/6th of an inch (12 pt divided by 72 points per inch).

This relative nature of things comes in very handy when we start working on the web.

Note: most people think that an em i s equal to the width of the capital "M" in a parti cular typeface. While this

might have been the case historically, it i s more often than not the case today.

Kerning

Most people don't think about it, but how much space to put between letters is a very complicated affair

precisely because of the white space that exists around them. For example, consider the combination of a

"V" and an "A". If we didn't do something special to the pair, we would likely have too much space

between them because we might align them as such:

While that appears minor, imagine it happening regularly throughout the document or webpage; it's

going to become very annoying to the flow of the text. Thus, we need to kern (http://en.wikipedia.org

/wiki/Kerning) our fonts in a process known as kerning. This is adjusting the spacemaking it bigger or

smallerdepending on various pairs of letters. As an additional example, consider this:

As you can imagine, this is a very time-consuming process to adjust this spacing m anually. Luckily, most

modern digital typefaces have kerning tables built in and that are applied automatically...such as on the

web.

Other software, such as Microsoft Word (http://robgoodlatte.com/2007/07/24/3-examples-of-bad-microsoft-

word-typography/) , is notorious for not properly kerning fonts. While we can rely on the kerning tables to

get us almost all of the way, there are other methods of kerning, such as optical kerning

18.


1 of 19 09/21/2009 01:54


12/19

(http://typophile.com/node/20455), that need to be applied at times, and that Microsoft Word (to my

knowledge) does not offer, while other software, such as LaTeX, does.

Leading

Now that we've looking at spacing within individual words, what about spacing b etween lines? Here we

need to consider leading(http://typophile.com/node/12484?) . The term references strips of lead

(http://en.wikipedia.org/wiki/Leading) that were placed between lines of type in order add spacethus, the

word is pronounced as if you were speaking of the metal "lead" instead of the verb to "lead".

Leading, or line-heightas we will see it in CSS, is an under-considered aspect of web design that can both

hamper as well as improve readability. Consider the two following examples:

19.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet justo eget

lectus. Ut porttitor bibendum ante. Pellentesque neque tellus, egestas eu, lacinia id,

adipiscing quis, orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Suspendisse sem. Maecenas metus. Nullam lorem massa, dignissim et, interdum quis,

sagittis vitae, felis. Proin vehicula nibh et neque. Quisque ullamcorper tellus. Loremipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum elementum lorem.

Suspendisse potenti.

Open leading

20.


2 of 19 09/21/2009 01:54


13/19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet justo egetlectus. Ut porttitor bibendum ante. Pellentesque neque tellus, egestas eu, lacinia id,adipiscing quis, orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse sem. Maecenas metus. Nullam lorem massa, dignissim et, interdum quis,sagittis vitae, felis. Proin vehicula nibh et neque. Quisque ullamcorper tellus. Loremipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum elementum lorem.Suspendisse potenti.

Tight leading

21.

The Elements of Typographic Style (Applied to the Web):

http://www.webtypography.net/intro/ (http://www.webtypography.net/intro/)

The focus on terms is meant to give you an idea of some of the language used by type designers so that

you can be conversant within this space and can know what to look for in various references on the web.

One of the most useful references for type design is a book called The Elements of Typographic Style by

Robert Bringhurst. This is the standard reference for information about typographic terms and their

history. Recently there has been an attempt to apply some of these concepts to web-based typography;

this is available on a website called, appropriately enough, "The Elemen ts of Typographic Style Applied

to the Web".

So now that we've talked a bit about some of these typographic terms, let's look at some specific examples

of layouts of text and graphics.

22.

23.


3 of 19 09/21/2009 01:54


14/19

(http://www.flickr.com/photos/20745656@N00/267876871/)

This is one of the most well-known event posters of the twentieth century. The poster is by the Swiss

designer Joseph Mller Brockman and began a style of design known, appropriately enough, as SwissGraphic Design. There are a number of characteristics of this style: alignment of text to a precise grid,

sans-serif typeface, precise relationships between text and images. Let's look at another example:

(http://www.flickr.com/photos/smallritual/2750398648/)

Of course this style still has cultural currency; we only have to look at a recent event poster to see:

24.

25.


4 of 19 09/21/2009 01:54


15/19

(http://www.flickr.com/photos/xmarksmyhands/2211733479/)

We can easily see grids at work on this poster (top and bottom portions, grid around the image, etc.). As

well, the continued use of the sans-serif type face.

With regards to web sites, which ones can you think of that also reflect this kind of style?

Apple.com (http://www.apple.com/)

TheMorningNews.org (http://www.themorningnews.org/)

Subtraction.com (http://www.subtraction.com/)

WilsonMilner.com (http://www.wilsonminer.com/)

Lessons from Swiss Graphic Design (http://www.smashingmagazine.com

/2009/07/17/lessons-from-swiss-style-graphic-design/)

Swiss-inspired designs are some of the most common on the web. Nevertheless, just like with color, this

style of using type is not ideologically neutral, nor is it universal. I want to look at two examples from the

26.


5 of 19 09/21/2009 01:54


16/19

beginning and the end of the twentieth century to illustrate this point.

(http://sdrc.lib.uiowa.edu/dada/derdada/2/pages/06.htm)

Dada (http://en.wikipedia.org/wiki/Dada) was an artistic and political movement active in the late 1910s

and early 1920s. While the m ovement was d iverse and internationalist in scope, there were specific

centers in the cities of, among others, Zrich, Paris, New York, and Berlin. Spec ifically, Dada wasconcerned with what they saw as the growing mechanization and industrialization of society, and were

deeply scared by the dehumanization wrought by World War I. In Berlin Dada took on a decidedly

political and social tone, dealing with the growing political unrest in the wake of Germany's defeat.

What does this have to do with typography, you might ask? While the content of the publications by the

Berlin Dadaists mirrored their social and political orientation, their design did so as well. Take a look at

this particular image from a Berlin Dada journal in Decem ber 1919. In the lower left we can see a

juxtaposition of different type faces, representing the disorientation of post-war society. Specific words are

emphasized by widely varying sizes. This b reakage with all of the standards of type and page design is

meant to illustrate the corresponding confusion felt by many.

Tristan Tzara, describing the Dada revolution with graphic describing, noting: "Each page must explode,

either by deep and weight seriousnessthe whirlwind, the vertigo, the new, the eternalby the

crushing jokes, by the enthusiasm for the princ iples, or by the manner of being printed."

(http://www.nga.gov/exhibitions/2006/dada/techniques/typography.shtm)

27.


6 of 19 09/21/2009 01:54


17/19

Let's take a look at another examp le.

(http://sdrc.lib.uiowa.edu/dada/derdada/3/pages/00cover.htm)

The Berlin Dada group is well-known for their technique ofphotomontage, or the juxtaposition of different

images together in order to produce an effect that is not congruent with the images themselves. Not only

did they do this with standard images, but they also did it with text cut out of newspapers andmagazines. We can see that in this image here, from a Dada magazine of April 1920.

This technique suggests an important aspect of their ethos. In post-war Germany supplies were scarce

and expensive, so one of the cheapest materials to use was discarded newspapers and magazines. Their

reappropriation of the detritus of a consumer society was one way that, through their DIY technique, they

were suggesting an alternative to rampant consumerism. The eschewing of standard forms of typography

was a way of illustrating how the ordered view of society---mirrored in standard book and magazine

layouts---was itself a mirage.

Now, let's look at an example from the opposite end of the century.

28.

29.


7 of 19 09/21/2009 01:54


18/19

(http://en.wikipedia.org/wiki/File:Girl_germs.jpg)

The punk rock scene involved a large number of people who made fan magazines, or fan zines. These

zines were often handmade and produced on a small to non-existent budget. Because of this, the

typographic techniques that the zine authors developed were decidedly low-tech, involving similar

techniques to those of the Berlin Dadaists. Zine authors would often cut out text and images, paste them

in a juxtaposed manner on a piece of paper, and then copy the result on a photocopier. The zines were

then distributed for free or nominal cost. The idea was to use whatever tools were available to produce

articles, reviews of releases, or interviews of bands.

30.


8 of 19 09/21/2009 01:54


19/19

lecture 07-color and type info 1300 21 september 2009

Documents