The Color Wheel

The concept of the color wheel was invented by Sir Isaac Newton in 1666 when he bent the color spectrum, or the range of all visible light, into the shape of a circle. It is a circular diagram used to visually show the relationships between colors and can be used to logically choose color schemes. For the purpose of this article, I am going to use a simplified version of the color wheel by John McWade of Before and After Magazine.

Creating Grids

Creating a grid is usually the first technical step of the graphic design process. Graphic designers begin with a blank page and begin dividing it up with guidelines, which can be turned on and off throughout the design process and are invisible in the final design.

Types of Grids

There are several types of grids the designer can choose from. Perhaps the simplest method is to use the rule of thirds. This involves dividing a page into thirds with two equally spaced vertical and/or horizontal lines so that important compositional elements can be placed along these lines or intersections. This method is also commonly used in photography. Another popular method uses the golden ratio (approximately 1.618)  for proportioning. This ratio has been studied by mathematicians for its presence throughout the universe and has been used for centuries by architects, artists and book designers for it’s aesthetically pleasing qualities. My personal favorite method is to divide a page into several equal sized columns, which is often used in newspapers and magazines. These types of publications also commonly use a baseline grid, which is a set of horizontal lines on a page that the baseline of all type sits on.

Anatomy of Grids

Depending on the content that they will contain, grids vary in size, shape and complexity. However, every grid is made up of the following parts:

1. Margins: The space that separates the content from the edge of the page.
2. Flowlines: Alignments that break the space into horizontal bands.
3. Columns: Vertical divisions of space on a page.
4. Rows: A series of flowlines that create horizontal divisions of space on a page.
5. Gutters: Space that separates rows and columns or two facing pages.
6. Modules: Individual units of space created from intersecting rows and columns.
7. Spatial Zones: Groups of modules that cross multiple rows and columns.

Purpose of Grids

Grids give order to graphic design. They speed up the design process by helping designers decide where content should be placed rather than where it could be placed. For example, in a newspaper with a five column grid, the designer knows to flow the text into those five columns.

Using Grids

Although grids should be used to structure content, they are only intended to guide the graphic design process, not dictate it. They shouldn’t be ignored nor should they be strictly followed. Simply flowing all the content into rows or columns can lead to a rigid, repetitive and uninteresting design. It is up to the designer to know when and how to break out of it. For example, while the main body copy may flow into single columns, some elements such as headlines, images and call outs could be extended across multiple columns or pages.

Grids aren’t visible to the audience but the use of them is evident by the alignment, spacing and grouping of elements on a page, the consistent placement of elements from page to page and across related documents.

Examples of Grids

Related Resources

• Wikipedia article on Grids
• Design by Grid
• Five simple steps to designing grid systems
• 960 Grid System
• The Grid System

Measure

Measure refers to the horizontal length of a column of type. The length of a line affects readability because  readers eyes become fatigued if it has to repeatedly read long lines of type. This is why newspapers and magazines are often split up into columns of text. A good measure for a single column of type is 40-50 characters (including spaces). For multiple columns, a good measure is 45-75 characters with 66 characters being ideal.

Serif or Sans Serif?

Serifs are the small lines or hooks on the ends of characters in fonts such as Times, Garamond or Georgia. Sans serif fonts such as Arial, Helvetica or Futura do not have serifs. Generally, serif fonts are used for large bodies of text. It is thought that the serifs help make the letters more distinctive, recognizable and readable than sans serif. There has been an exception to this rule on the web because small serif fonts don’t display as well at low screen resolutions. Sans serifs fonts are always a good choice for small amounts of text such as logos, headlines and captions.

Size

Font size is the height of typeface that measures from the top of the tallest ascender (such as the top of a “b”) to the bottom of the longest descender (such as the bottom of a “p”). A good font size for body copy is 9-12 points, depending on the audience. An older audience will likely prefer larger fonts due to deteriorating sight that usually comes with age. It should be noted that two different fonts at the same font size don’t necessarily appear the same size. A font will appear smaller if it has a smaller x-height (the height of a letter without ascenders and descenders).

Tracking and Kerning

Tracking (or letter spacing) is the adjustment of the horizontal space between a group of letters in a block of type. Tracking may need to be adjusted depending on the length of the lines of type. Loose tracking is preferred for wide columns whereas tight tracking is better for narrow columns. Exaggerated tracking in short amounts of text is also used to give typographic style.

Kerning is the adjustment of the horizontal space between a pair of characters. Tracking puts the same amount of space between a group of characters but certain letter combination’s may appear too close or too far apart (such as Il, VA or AY). Kerning is required to fix these problems to give the appearance of  consistent letter spacing. This is particularly important for small amounts of type at large font sizes (such as logos and headlines).

Leading

Leading (or line-height) is the amount of vertical space between lines of type. The default leading in page layout programs is usually sufficient but there are a few factors that may require it to be adjusted. A font may have long ascenders and descenders that touch each other between lines of type, causing a distraction. If a font has a high x-height, it reduces the negative space between lines of type that gives the illusion of tight leading. Tight leading makes it difficult for the reader to find the start of the following line of type which is particularly noticeable in long lines of type. Therefore, for wide columns of type, a generous line height results in better readability. For body copy, I usually set the leading so that the height of captital letters fit perfectly between lines of type, which is around 1.5 times the font size.

Alignment

Alignment refers to how multiple lines of text are aligned. The four basic typographic alignments are flush left, flush right, full justification and center aligned (see above illustration). At first glance, full justification may appear to be the best choice because of the straight edges of text on both sides. However, to achieve full justification, the words are automatically spaced to make every line the same length. This often results in gaps between letters and words and “rivers” throughout the paragraphs. I personally prefer flush or centered because the consistent tracking helps create an overall consistency of the typeface.

Hyphenation

Hyphenation breaks up words that cannot fully fit at the end of a line of type. Word processors and page layout programs don’t always place hyphens in the best place. Hyphens should only be placed between consonants. To avoid awkward word fragments, there should be at least two letters left on a line and at least three on the following line. Hyphens should be kept to a minimum, never used on names and never used on two consecutive lines.

Paragraphs

A paragraph is a sentence or group of sentences about a common topic. Indents and/or line breaks are the most common methods of separating them. Sub headings are often added to briefly describe what the paragraph is about. This helps break up the content into digestible segments that can be easily scanned by the reader. Regardless of the method used, it is good practice to have concise paragraphs averaging four to six sentences long.

Orphans and Widows

An orphan is a single word or short line left at the end of a paragraph, resulting in excessive white space between paragraphs. A widow is a single word or short line at the beginning or end of a column, separating it from the rest of the paragraph. Both affect readability and can be avoided by adjusting the measure, tracking, leading or adding extra line breaks.

Emphasis

Emphasis in typography refers to changing the style of certain words in order to emphasize them from the rest of the text. Examples are bold, caps, small caps, size, color and italics – which is considered to be the best method of emphasis. Underlining is not recommended. Regardless of what method you use, overusing or combining any of them is frowned upon in typography because it overemphasizes and disrupts the flow of type.

Color

Color is a useful tool in typography. It can attract attention, emphasize, organize content, create a mood and help readability. Type is most readable in black on white but other colors can be used provided there is enough contrast with type and background. Also, fonts with thin strokes and/or serifs are harder to read when reversed out.

Hierarchy

Hierarchy in typography refers to the levels of importance given to information. This is accomplished by using different fonts, size, tracking, color, weight or style. This is mostly used to differentiate levels of headings and sub headings. For example, on the web there is a system of  headings such as H1, H2, H3 and so on. Common practice is to use the typographic scale that was developed in the sixteenth century. We are all familiar with this in word processing software.

Related Resources

• Wikipedia article on Typography
• I Love Typography
• Typography Rules
• Five Simple Steps to Better Typography
• 8 simple ways to Improve Typography in your design

Let’s take a look at a few definitions:

• Dictionary.com: The art or profession of visual communication that combines images, words and ideas to convey information to an audience and to produce a specific effect.
• Merriam-Webster Dictionary: The art or profession of using design elements (such as typography and images) to convey information or create an effect.
• TheFreeDictionary.com: The practice or profession of designing print or electronic forms of visual information, as for an advertisement, publication or website.

It may be becoming clearer to you now but I don’t entirely agree with them.

First of all, I don’t think of graphic design as art. Granted, there is a fine line between the two. Many graphic designers are artists and vice versa. Both are creative and their work may look very similar. However, art and graphic design have a different purpose. Art is produced or intended primarily for beauty rather than function. It is a personal expression or message from the artist. Graphic design on the other hand, or should I say successful graphic design, achieves communication goals, usually set out by paying clients. Therefore, graphic designers are usually communicating on behalf of their clients whether they agree with the message or not.

Secondly, graphic design is not always a profession. A profession means you get paid and unfortunately as a designer that’s not always the case. Graphic designers usually get paid for their design work but there is often pro-bono, speculative creative and personal projects that are unpaid. This means we can eliminate the profession part from the definition.

I agree with the rest of the definitions but I still find them a bit vague. With that said, I’ll combine the three definitions and take a stab at a further explanation.

Graphic Design is visual communication that uses design elements to convey print or electronic forms of information to an audience and to produce a specific effect. Visual communication occurs when any message is received through vision. Graphic designer’s are hired by clients to enhance their messages in order to achieve their communication goals. This is done by strategic arrangement of design elements such as color, images and typography. It is usually created with graphic software programs such as Adobe Illustrator, Photoshop and Quark Xpress. When properly executed, graphic design will attract attention in order to inform and even persuade the audience to take action. Examples of graphic design surround us. It is most commonly used for ads, books, brochures, business cards, greeting cards, logos, newspapers, magazines, packaging, posters, signs and websites. If there wasn’t graphic design, all the visual information in the world would look very similar and uninteresting. Graphic design helps shape our society by changing how we see the world everyday.

What do you think of my explanation? Do you agree or disagree? Is there anything missing? Leave a comment to let me know!