fbpx

Type Hype: Tips for Typography and Design

The purpose of this article is not only to help our Clients and other Designers to adhere to proper typography guidelines but to also relieve the stress on my own eyes. My eyes are not perfect, but I am constantly bombarded by ads and images that literally make them ache.

While some of these tips can be considered subjective, they can be very valuable when it comes to creating marketing materials that will win over customers and please skilled printers. While typos and grammatical errors are obvious items to curtail while designing, typography and color use are sometimes overlooked—or not fully understood.

“An illegible type, set it how you will, cannot be made readable. But the most legible of types can be made unreadable if it is set to too wide a measure, or in too large or too small a size for a particular purpose.” (Dowding 1957, p.5; in Lund, 1999)

Every Design Is An Art Show

Great graphic design can help communicate your message with power by using color, illustration, typography, and photographs. It is important to make the best impression with high-impact printed materials and online designs. An ad created without at least the basic guidelines applied can have a negative effect on your image and reputation. Each viewer of any design is a silent critic; however, their criticism can become apparent when it comes to generating sales and repeat business.

What The Font Did You Do That For?

Font choice is the most obvious of ingredients in any ad, whether online or in print. While a logo can have a specific style of font; text that is to be read by the general public should be clear and gentle on the eyes. When it comes to fonts, less is definitely more. Using more than three types of font in an ad, if not done carefully, can confuse the viewer and loosen the image being portrayed. It can also look amateurish. Keep the weights and typefaces unified and your copy will get your message across nicely.

Centered Is Not Always Justified

The only time that centered text is really useful is on restaurant menus and invitations. The overuse of centered text can create a shape that the creator did not intend. It can also appear dull and boring. It is okay to use text that is justified to the left, right, or center if it enhances the graphics around it.

Leading Down the Wrong Path

The vertical space between lines of type is called Leading (pronounced as ‘ledding’). Proper leading enables viewers to read the lines of words in a smooth flowing manner. It helps readers visually remember what line they are on in a paragraph. The spacing is typically measured in points from the bottom of one line of text to the top of the next line of text. When there is improper leading, the type can appear constrained and strain the eyes of the reader.

Similar to leading, skilled tracking can definitely help align groups of letters for proper printing. Application uses of tracking can help or hinder the flow of type and the weight of a block of text. Tracking can enhance readability in text that is capitalized, helps logo adjustments, and can strengthen the look of main headlines. While most programs have default or standard settings, it is best for designers to adjust their own spacing in small increments to make the best layout for characters in an ad to be printed.

With many new custom or special fonts, the preset leading and tracking are not standardized. Do keep this in mind when using uncommon fonts in your design layouts.

A Kernel Of Truth

When the spacing between individual letters of text is measured and adjusted, it is called Kerning. On typical computers, kerning is performed automatically with the use of a kerning table. It is common for designers and desktop publishers to move letters farther apart or closer together, depending on the effect and impact they wish to portray. With fonts and type, kerning too close can jumble the text, and farther spacing can lose the viewer’s attention. Improper kerning can make printed items turn out poor. To improve legibility, track kerning is used to alter the letter spacing within a block of text.

Want to test your own kerning skills? Here is a fun game to practice with: KERNTYPE: A Kerning Game open-in-new-window-icon

Long Lines Are Short-Sighted

Short attention spans and limited time means ad text should be concise, to the point, informative, and catchy all at the same time. The length of typed copy ultimately depends on the type of ad (whether printed or online) and the allowable size.

Think K.I.S.S. (Keep It Simple Stupid)

Sans Serif Sheriff

Sans serif fonts are a category of typefaces that do not use serifs or the small lines at the ends of letter characters. The popular consensus is that serif fonts are great for use as text in books while sans serif fonts are best for online use.

There has been much debate over whether sans serif is more or less readable than serif fonts. The results are still not fully definitive.

In fact, Alex Poole reviewed over 50 empirical studies in typography while earning his master’s degree and shares his findings in this article: Which Are More Legible: Serif or Sans Serif Typefaces? open-in-new-window-icon

The use of serifs depends on the style and mood of your design; however, the two styles should not be mixed in blocks of text. I can say, however, that unless you are writing a cartoon caption, avoid the comic sans font.

Comic sans is considered one of the most overused and annoying fonts ever. Since it was unleashed into the World there have been multiple calls by designers for the font to be abolished completely.

Take the pledge to not use Comic Sans here. open-in-new-window-icon

Drivin’ Color Blind

Bad design drives ‘em blind. Remember art class in grade school? Remember the color wheel? No? If you are not familiar with how colors interact with one another and with a viewer’s eyes, you should not be designing anything. Period.

For professional printing purposes, avoid any reversed-out text printed onto less than 50% tints. The attempt to print similar color values on top of one another just causes a blurry muddy mess that hurts the eyes. Pay close attention to color interactions. Look at how primary red reacts next to pure blue. Ouch.

Can You Read Me Now?

Just because it is big, does not make it good. Keep in mind how text on a monitor screen looks much different than text that is printed. Before unleashing that ad with 12 point text, consider how much more concise and pro you could make it with a bit smaller font. If you are writing a children’s book, big text is fine. If you are designing a magazine ad, it would look rather garish in the body of the text. While large text in headlines is fine, try to avoid using such large text in your online promotional copy. If the viewer needs to read using a huge type, they can simply adjust their monitor settings.

Fonts that are too small can be an obvious problem also. Often used for the fine print of contracts and pamphlets describing prescription side-effects, tiny text is basically saying that you don’t really want the reader to have an easy time with it. A general standard is to use font sizes of 7 points or more for most common applications.

Jump The Border

A border can enhance a design as a frame or a design element, however, the overuse of borders can detract from what you are trying to convey. Embrace the space around your design. Often an image or words can have much more impact if there is ample space around it. A clean white background can often make the contents appear to have greater importance.

Logos that represent well-known businesses will often have guidelines on how their logo is to be used. The allowable space around a logo and the approved sizes vary from company to company. YouTube, Google, and Facebook logos are often used improperly by novice designers when creating ads. Take the time to learn their proper use. You would want the same respect given to your designed logo, wouldn’t you? Not following the posted logo rules makes your layout look unprofessional to other designers, marketing professionals, and advertising gurus.

Check out these links to learn about the popular ones mentioned above:

http://www.youtube.com/yt/brand/using-logo.html open-in-new-window-icon

http://www.google.com/permissions/using-the-logo.html open-in-new-window-icon

http://www.facebook.com/brandpermissions/logos.php open-in-new-window-icon

Drop It Like It’s Not

For every time and place that requires a drop shadow, there are a million times and places where there should be none. Too often folks will become addicted to the cliché emboss tools and drop shadow options

that came with their design program. Unless you are making a yard sale sign for a neighbor, or a poster to find a lost pet, quit it!

The blurred confusion created by the overuse of drop shadows, reflections, rainbow gradients, and lens flares has created a hideous environment indeed. Quit it. This goes for comic sans fonts as well. Drop it.

Quit Skewing Around!

If your dots, periods, and O’s are oval instead of round like the font style meant them to be, you’ve gone and skewed things up again. It’s noticeable.

Text that is skewed too tall or too wide hurts the eyes and screams, “Amateur!” louder than comic sans in all caps.

Skewing text often occurs when the design maker attempts to make a block of text – or lines of type – fit into the constraints of the design or ad. They have taken their mouse, grabbed a corner, and proceeded to ‘eyeball’ their way into making it fit.

An awesome set of tools for any budding typographer are typographic grid systems. A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axis used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy-to-absorb manner.

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems.

Visit The Grid System – The Ultimate Resource In Grid Systems website here. open-in-new-window-icon

Be Case Sensitive

WHY ARE YOU YELLING?!

Typing in only capital letters not only seems like you are visually shouting at your audience, it also makes text more difficult to read. This is because readers can recognize a word not by its letters, but by the shape of the whole word. When text is in all caps, every word has the same shape so a viewer’s eyes must read every letter by itself. All caps are fine sometimes, but instead, try using bold text or use a different typeface.

When it comes to graphic design, the use of capital letters becomes a conscientious decision made by the designer. The letters of a logo, for instance, become a graphical shape and part of an image that signifies a brand. Capital letters are to be used as a design element rather than to start a shouting match.

On the opposite side, the use of lowercase type can signify a more whimsical or softer tone. Lowercase letters are an optimal choice for some business logos to create a friendly and homespun image.

Don’t Cringe At Critique

Like all art, design is subjective. Every design is an art show which communicates a particular message or meaning to the viewer.

Accepting critique within the right context can be very advantageous. Attitude can make all the difference.

While each individual has their own tastes and opinions formed over time and experience, it is important to try and look through the filters of your audience rather than through your own eyes. Criticism between peers is to be expected and should be the most revered. If a professional in your field – or a similar one – offers their objective opinion to you, it can prove to be very valuable. Respond courteously and professionally. Attitude is everything and goes a long way.

Consider the objective of the work that you have been critiqued on. Will it be posted only online or printed? What other ads or works will be placed around it? Who is the target audience? Is it within the required specifications? Does it follow standard design and printing industry expectations?

Be open to constructive criticism. Most importantly, learn from it.

The Eyes Have It

My business partner, Chris, is a professional Graphics and Website Designer. He is also my husband. I am an artist and writer. I also work in sales, customer service, and bookkeeping for our small business.

Over my years employed by other companies, I have had to be as picky and stringent as my customers. I still am.

The customer accounts I have managed during my career include Sony, Sun Microsystems, HP, Philips, and Microsoft. These huge clients had very detailed Statements of Work to follow. The ISO-certified companies that employed me manufactured items such as: Floppy Discs, CDs, DVDs, Cable Harnesses, Fiber Optic Assemblies, Thermoformed Plastics, Instruction Manuals, Operating Procedures, and Packaging Materials.

Every order and product had to be exactly perfect from the written text to the printed colors. One error could cost the company hundreds of thousands of dollars!

At GINGALLEY, Chris and I have combined our years of experience in art, business, marketing, and our inherent attention to detail. The ultimate objective of each project we complete is to make our customers have a public marketing image that increases their revenue and grows their business. We properly follow the protocols of professional advertising standards, and we stay on top of the current trends and newest technologies.

In all of our years looking at art, ads, commercials, and websites; we have encountered the good, the bad, and the ugly. Oh, the stories my eyes could tell! The color carnage! The typos and errors and unreadable fonts!

I implore each of you to get out there and design and type away—just think about the guidelines and tips above. Most importantly, think about all of the eyes that will see your work.

Even more… Here is a very comprehensive and informative article about typography: A Beautifully Illustrated Glossary Of Typographic Terms You Should Know open-in-new-window-icon