WEB DESIGN PRINT SERVICES CLIENTS CONTACT           back | home
     
    Articles by topic

[Graphic Design] > What is graphic design? > Carl Dair & Seven Principles of Typographic Contrast
[Web Design] >
The principles of design > 
Web Site Design Decisions

More articles will definitely be added soon!
In the meantime feel free to check out our recent web and graphic design work here.
     
    What is Graphic Design?

Graphic design basically is visual problem solving using text and/or graphical elements. Your aim is to create something that is pleasing to the eye, and gets the attention of the viewer. But things can't just look cool. They have to work as well.

-----------------------------------------------------------------------------------------------------------------------------------------------


Seven Principles of Typographic Contrast
In a seminal booklet that he both designed and wrote, Carl Dair showed how in typography, as in music, harmony and contrast are the keys to composition.

The late Canadian typographer Carl Dair was one of the great typographic designers of the 1950s and 1960s, and he may have been the best of them all at explaining the nature of typography. In coordinated projects that he both wrote and designed, he managed to describe -- and show -- the ways in which manipulating and using type make typography happen.

Dair is the very epitome of what I mean when I say "typographer": someone who designs with type, not just a fancy typesetter, but someone who uses type, in all its variations, as the principle element of design. Since type carries meaning, the practice of typography requires a designer who cares about the words themselves. It requires someone who cares enough, and is skillful enough, to make the type express that meaning, rather than serve as simply eye-catching decoration.

Carl Dair's book "Design With Type" (originally published in 1952; revised and expanded in 1967) is deservedly still in print, even though the technology that he used and described has long been outdated. The practicalities of setting type in metal are no longer the practicalities we have to deal with; but the visual relationships between letters, which Dair showed and explained so graphically in his book, haven't changed at all. "Design With Type" is still one of the best handbooks available for learning how to do exactly what the title says: design with type.
At around the same time he was revising his book, Carl Dair was producing a series of six pamphlets for West Virginia Pulp & Paper (Westvaco), which he called "A Typographic Quest." Each booklet was, naturally, printed on Westvaco paper stock; like the lavish paper-company samples produced today, this series was meant to raise the profile of the manufacturer and encourage designers to think of Westvaco when specifying paper for their printing jobs. But these were quite modest productions: little saddlestitched booklets of about 30 pages, measuring 5-1/4 inches by 9, usually printed in two colors (the first one uses three colors throughout; the later ones are two-color, although the second color may change from sheet to sheet, with all three colors used together on the covers). The first "Typographic Quest" was published in 1964; the sixth (and, as far as I know, final) came out in 1968, the year Carl Dair died. Since he was both writer and designer for the series, each of the booklets emerged as a wholly crafted object, dedicated to explaining one or another aspect of using type.

Harmony & Contrast
The heart of Carl Dair's teaching -- the thing that I keep pointing people to, and the most valuable thing I myself learned from his work -- is the subject of "A Typographic Quest" No. 5: "Typographic Contrast." In a virtuoso performance, Dair shows exactly how designers use different kinds of visual contrast to make design work and meaning pop out -- clearly and unambiguously, and with flair. To make his point, he compares typography to music.
Graphic form and musical form have a common denominator: rhythm and emphasis, harmony and contrast. "Harmony and contrast," says Dair, "are fundamental to both, and the discovery of these basic principles and their application to the design of printed matter is the object of this volume of ‘A Typographic Quest.'"



Seven Kinds of Contrast
Dair first explains the "elements of harmony" (a consistent relationship between the black strokes of the letters on a page and the space around them; and any rules, frames, or decorations being similar in style to the type), then goes on to show seven different kinds of contrast. He emphasizes that in any kind of differentiation, it's important to make the contrast obvious -- not just a slight change, an almost imperceptible variation, but a really big, obvious difference between the contrasting elements.



The first and most basic contrast is size. "A simple but dramatic contrast of size," says Dair, "provides a point to which the reader's attention is drawn. Set in the same style of type, it maintains the exact relationship of the letter to the background. It is only a physical enlargement of the basic pattern created by the form and the weight of the type being used for the text." The most common use of size is in making the title or heading noticeably bigger than the text -- but that's only a starting-point.



The second most obvious contrast is of weight: bold type stands out in the middle of lighter type of the same style. As Dair points out, "Not only types of varying weight, but other typographic material such as rules, spots, squares, etc., can be called into service to provide a heavy area for a powerful point of visual attraction or emphasis."



The next two kinds of contrast are the contrast of form and the contrast of structure. It's not entirely obvious where to draw a line between these two, since they both have to do with the shapes of the letters.
By "form," Dair means the distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant. He includes condensed and expanded versions under "form," and he even allows as how "there are some script types which harmonize with standard types, such as the Bank Script and Bodoni on the opposite page, and can be used for dramatic change of form." (He warns, parenthetically, against using scripts and italics together, since they are both versions of handwritten letters; they're more likely to conflict than to contrast.)



By "structure," Dair means the different letterforms of different kinds of typefaces -- a monoline sans serif vs. a high-contrast modern, for instance, or an italic vs. a blackletter. "The use of contrast of structure may be compared to an orator who changes his voice not to increase or decrease the volume, but to change the very quality of his voice to suit his words."



Put all these things together, and apply them to a block of text on a page, and you come to the contrast of texture: the way the lines of type look as a mass, which depends partly on the letterforms themselves and partly on how they're arranged. "Like threads in cloth," says Dair, "types form the fabric of our daily communication."



Dair's sixth contrast is color -- and he warns that a second color is usually less emphatic than plain black on white (or white on black), so it's important to give careful thought to which element needs to be emphasized, and to pay attention to the tonal values of the colors used.



The last of Dair's seven kinds of contrast is the contrast of direction: the opposition between vertical and horizontal, and the angles in between. Turning one word on its side can have a dramatic effect on a layout. But Dair points out that text blocks also have their vertical or horizontal aspects, and mixing wide blocks of long lines with tall columns of short lines can also produce a contrast.



Other Types of Contrast
There are other kinds of contrast, less clearly dependent on the type itself. Dair mentions "contrast by isolation," i.e., putting a word or phrase in an isolated position away from the other elements on the page, to make it stand out. (I think of this as a contrast of position.) And he suggests other kinds of non-typographic contrast, such as mixing paper stocks, embossing, and using contrasting matte or gloss inks. He also points out that illustrations, especially line art, may be in harmony with the type on the same page or may contrast with it completely.
Finally, Dair takes time to say a little about rhythm ("in typography, it consists of intervals of space") and about the power of "interrupted rhythm" ("the impact derives not from the fact that the unexpected happens, but rather that the expected does not happen").



Most of the time, we use more than one kind of contrast together, in order to make the differences between visual elements even more obvious. We can use all of Dair's seven kinds of contrast at once, if we're skillful; he refers to this as typographic "chords." (One of the chapter titles in "Design With Type" is "Multiplying the Contrasts.") But breaking them down like this into simple oppositions makes it easier to use them consciously; it keeps us from getting our layouts all muddied up through trying to change too many things at once without thinking about what we're doing. I've found Carl Dair's analysis of typographic contrast -- and especially the visual flair with which he presents it -- an invaluable tool in the practice of graphic design.


-Article by John D. Berry

-----------------------------------------------------------------------------------------------------------------------------------------------


The Principles of Design

In: Columns > Design in Theory and Practice

By Joshua David McClurg-Genevese

Published on June 13, 2005

Starting with the Basics
This column is about Web design—really, it is—though it may at times seem a bit distant and distracted. In my opinion, any good discussion about design begins with the fundamentals. Almost by definition, the primary tenets around which any field is based are universal: they can be applied to a variety of disciplines in a variety of ways. This can cause some confusion as principle is put into practice within the unique constraints of a particular medium.

Web design is a relatively new profession compared to other forms of design, due to the youth of our medium. As with any design discipline, there are aspects of the Web design process that are unique to the medium, such as screen resolution, additive color spaces and image compression. But too often these more unique details override our sense of the bigger picture. We focus on the fact that it is Web design and push aside core design concepts—concepts that can that make any project stronger without interfering in the more technical considerations later on.

How Does Web Design Fit In?
We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.
I tend to define Web design as being one of many disciplines within the larger field of design (a peer to print design, industrial design, interior design, etc.). To step back even further, I see design as a discipline within the field of art (a peer to painting, illustration, sculpture, etc.) The point is that in order to start with a discussion about the fundamentals of design as they relate to Web design we need to understand that there is a good degree of inheritance that design has received over the years from other art forms. These art forms, such as lithography, typography, painting/illustration and industrial design, evolved over many centuries, and a number of basic ideas have emerged as providing universal guidance to any artistic endeavor. When talking about fundamental concepts we inevitably look outside our discipline and adopt a slightly larger perspective.

The first three articles of this column will be dedicated to unearthing these universal gems of insight so that we may better understand our profession. In the first two articles, we will adopt a larger perspective to establish a foundation. In the third article we will tie it all together, using real-world examples to see how the basics are put into practice through the medium of the Web.

The Principles of Design
There are many basic concepts that underly the field of design. They are often categorized differently depending on philosophy or teaching methodology. The first thing we need to do is organize them, so that we have a framework for this discussion.

We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition. By comparison, the elements of design are the components of design themselves, the objects to be arranged.

Let’s begin by focusing on the principles of design, the axioms of our profession. Specifically, we will be looking at the following principles:

Balance
Rhythm
Proportion
Dominance
Unity
Balance
Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.

Symmetrical
Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.

Asymmetrical
Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.


Horizontal
symmetry
Approximate
horizontal symmetry
Radial
symmetry
Asymmetry

Rhythm
Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.

Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.

Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.

Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.


Regular
rhythm
Flowing
rhythm
Progressive
rhythm

Proportion
Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

Dominance
Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.

Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.

Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.

Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.

In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.


Unity
The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.

Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

Closure
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.


Continuance
Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.


Similarity, Proximity and Alignment
Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.


Related concepts
There are many additional concepts that are related to the principles of design. These can include specific terms and/or techniques that are in some way based on one or more of the above tenets. In they end, they add to the collection of compositional tools available for use by the designer.

Contrast or Opposition
Contrast addresses the notion of dynamic tensionÔthe degree of conflict that exists within a given design between the visual elements in the composition.

Positive and Negative Space
Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space, and the environment itself is the negative space.

Rule of Thirds
The rule of thirds is a compositional tool that makes use of the notion that the most interesting compositions are those in which the primary element is off center. Basically, take any frame of reference and divide it into thirds placing the elements of the composition on the lines in between.

Visual Center
The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height.

Color and Typography
Many would place color and typography along side the five principals I have outlined above. I personally believe both to be elements of design, so I’ll give them some attention in my next column. In addition, both topics are so robust that I plan on writing an entire article about each of them in the future.

Conclusion
In Web design it is too easy to get engrossed in the many unique constraints of the medium and completely forget some of the underlying concepts that can strengthen any design. To better discuss such concepts, we need to step back from our specific discipline and look to the history of the field. It is here we find the axioms of our profession.

In this article we looked at half of those axioms, the principles of design. The principles of design are the guiding truths of our profession, the basic concepts of balance, rhythm, proportion, dominance and unity. Successful use of these core ideas insures a solid foundation upon which any design can thrive.

In the next column, I will discuss the elements of design—the basic components used as part of any composition including point, line, form (shape), texture, color and typography. Comments or suggestions are welcome and appreciated.

Additional Resources and References
There are many resources available about all of the topics covered in this article, both online and off. The following is a small list of some of the ones I am aware of, but is by no means exhaustive.

Related Resources on the Web
Art, Design, and Visual Thinking by Charlotte Jirousek
Gestalt Design and Composition by James T. Saw
Society for Gestalt Theory and its Applications
Introduction to the Principles of Design by Jacci Howard Bear

Related Books
Design Basics by David Lauer
The Elements of Graphic Design by Alexander W. White
Principles of Two-Dimensional Design by Wucius Wong
Grid Systems in Graphic Design by Josef Muller-Brockmann
Design Principles and Problems by Paul Zelanski, Mary Pat Fisher
A Primer of Visual Literacy by Donis A. Dondis
History of Art by Anthony F. Janson
A History of Graphic Design by Philip Meggs
The Non-Designer's Design Book by Robin Williams
Geometry of Design: Studies in Proportion and Composition by Kimberly Elam

Link Partners:



Graphic Designers
FreelanceDesigners.com

Design Directory

Web Design Directory

Design Directory

Web Designers Directory Designers-Graphics

Mortgage Refinancing - Five Things You Need to Know - RefiAdvisor has the answers to your mortgage questions. Our free eZine will save you thousands of dollars on your mortgage. Get Five Things You Need to Know Before Refinancing a Mortgage.

Web Design Plaza - We find web designers so you don't have to. Submit a free quote, try our web site builder, browse our many web designer categories.

http://www.thestudyofdesign.com/

http://www.marketingtool.com

Custom Website Design - Professional and Custom Website Design services for your business. Take advantage of the Custom website design services offered by the leading Professional web design company, obu Web Technologies, inc.

Hutchens Web Design offer a web, graphic and database design services to business in Australia and overseas.

Web Design Huddersfield, Leeds, Wakefield by EyePlot Digital - A popular digital media solutions provider, with an excellent reputation for supplying top-notch website, promotional and graphic design services at the right price.

Our company specializes in Online Advertising and Interactive marketing to provide maximum exposure, ROI, and online branding.

web site hosting

Web Design Directory
DesignDir.net is an industry leading web design and development directory. We bring together the best designers and their customers.

Logo Design

Phoenix web design - Phoenix web design and web development company MCP Media provides all services related to website design and web development. -MCP Media is based in Phoenix Arizona.

Web Design Companies & Freelancers Global Directory of professional firms and freelancers specializing in Web Design, Web Development, E-commerce, SEO, and related fields.

Website Promotion at Allthewebsites Directory

Web Developers Directory where you can find a design company to build web site or do it yourself with web site templates. All categories of web design including local listings such as Texas Web Design.

Search Engine Positioning  Advertising - Articles, Resources, News and Categorized Site Listings
Web Designers Web Developer   Website   Web Design  Advertising  
Miami Web Design
Lake View Studios cutting edge web design , promotion and Internet programming. Graphic, Logo & Website Design London UK  LinkHeaven Directory  Search24 Web Directory   Answering Service  Business Web Site websitedesignerslist   Custom Web Site Design Cyberhunt.net

Austin Personal Trainer and Austin Boot Camp

Preferred firm in the Web Site Consultants category at WebsiteDesignersList.com
More Links

< back to home