April 9th, 2012Top Story A Non-Designer's Guide to Typefaces and Layout By Adam Dachis Whether you realize it or not, you're designing every day. It might be a simple document, an updated resume, or a presentation, but either way you're making design choices, in particular about typefaces and layout. These decisions can have a significant impact that makes your work more compelling, or they can turn it into a boring, lifeless turd. Here's how you can use a few simple design principles to quickly improve the way you use type and layout in your everyday work. Before we jump into the specifics, the most important thing you need to know when making any design choices is why. Ask yourself this: "what is my goal?" All elements of design are able to invoke different emotions in the viewer and affect them in various ways. While adhering to general principals is good when you're getting started, you want to based your design choices on the impact you want them to have. That requires knowing what that impact will be. Do you want your design to attract attention to specific sections? Do you want certain words or phrases to have more impact than others? You make these basic choices like these already. When writing a research paper or a resume, you've probably bolded a section header to help with identification. If all the text on that page was the same, it would be more difficult for the reader to navigate or skim. The simple decision of emboldening text and making it larger suddenly adds greater context to the design of a document, and it's one you're probably making subconsicously. When you're thinking about design, you want to move those choices out of your subconscious and into the front of your mind. Think about what you hope to accomplish and then apply the principles you learn in this guide to the design tasks you encounter on a regular basis. Thinking a little more creatively and knowing the right techniques is all you'll need to add a greater visual impact to the design work you'll encounter on a regular basis. Know the Style of Your Typefaces Choosing a style means choosing an implication. You use italics for emphasis and bold to make text stand out. These are styles you'll find in most any typeface, but most typefaces have an inherent style already. Sure, you have your standards like Ariel and Helvetica, but take a look at fonts like Impact and MTF Cool Kid (pictured to the right). Impact is bold and blocky by nature and MTF Cool Kid sort of resembles simplistic, childlike handwriting. They both imply certain feelings. Impact wants to grab your attention whereas MTF Cool Kid just wants to have fun. Both of these typefaces have a lot of personality and clearly communicate their subtext because of how they look. What's the difference between a font and a typeface? Creative producer Norbert Florendo offers a very concise explanation: "A font is what you use, and typeface is what you see." When you're choosing a typeface, its style can be very important. Even though both Impact and MTF Cool Kid state clear messages, that doesn't mean they're necessarily great choices for your design. Sometimes typefaces with a lot of personality are a little too impactful. Even if you want to imply something silly and childlike, using a typeface like MTF Cool Kid in excess can overstate your point. Typefaces with lots of style are generally best used when paired with something on the simpler side, but we'll discuss font pairing in depth a bit later. When you're thinking about a primary font for your design you want to think more about the subtleties of its character and how that influences everything else on the page. If you have chunky headers and and graphical elements, a typeface with thin lines may contrast too much. Conversely, a thicker typeface may look out of place when there's little else on the page. In general, you'll want your primary typeface's style to match the overall style of your document. For the most part, you'll only be making a simple decision: between serif and sans-serif. What's the difference? Serif typefaces have little flourishes on most letters and closer resemble the look of a typewriter. In the examples to your right, Courier and Times New Roman are the serif typefaces on display. They have a more conservative, proper style and most people find them easier to read. Sans-serif means without serif, so you might have figured out that they are typefaces without the little flourishes on the letters. They have a more modern, minimalistic, and clean appearance. Some find them harder to read, but also more attractive to look at. If you want your design to appear more contemporary, sans-serif typefaces will almost always be the type that you choose. While style is an important choice, what can end up mattering more is how you use it. Any visually-appealing font can be mishandled to create an ugly design, so the decisions you make beyond basic styling also important. In the upcoming sections we'll take a look at other important choices when working with type. Choose the Right Color for the Right Impact The color of your text is almost as important as choosing the typeface itself. Little splashes of color can make an enormous impact, and bold uses of good color schemes can create beautiful designs. Using no color at all, or just shades of gray, can create its own message. The choice really comes down to what you're trying to accomplish, and that involves an understanding what colors tend to mean to people. For example, black generally invokes feelings of power. It's the darkest you can get, and on a white sheet of paper it offers the highest amount of contrast with the page. If you opted not to use color at all, you could emphasize certain text in black and offer up the rest in gray. The example to the right shows how the header text not only stands out because of its size but because it's noticeably darker. This is one good way to use a somewhat thicker typeface without the thickness coming across as too overbearing. Red is an intense color and can provide a lot of visual stimulation. It tends to be considered a more emotional and aggressive color that is associated with intense feeling and action, so keep that in mind if you decide to use it. It also contrasts nicely with dark text, as you can see in the example to your right. This is a good way to create an intense look and feel. If intense isn't your goal, blue can provide a calming feeling. Even though the blue is vibrant in the example to the right, when paired with gray text it's nice and peaceful. It won't get in your face like a bright shade of red, but it has a significant impact all the same. We could get deep into a psychological analysis of every major color and how people tend to react to it, but these three examples should give you a basic idea of what simple applications of color can do to your text. Before we move on, it's important to remember that colored or black type on a white page isn't your only option. Under the right circumstances, such as creating a poster, you can make a bigger impact by placing white or colored text on a colored background. As you can see in the example to the right, which combines our intense red and calm blue, this can create a nice visual effect. All this red can be overbearing in the wrong context, however, just as too much of any color or style can feel overstated. Be sure to reserve heavy uses of color for times when it coincides with the goals of your designs. Additionally, combinations of color won't always look great. Picking poor combinations can lead to messy and unappealing designs, so it helps to know the basics of color theory. You can also take a little shortcut by using a tool like Adobe Kuler to discover color combinations that work well together. Vary Sizes for Better Emphasis When you've worked with a lot of typefaces, you come to know which ones work best at small sizes, which ones sell themselves better when they're large, and which are versatile enough to handle any need. As you can see to the right, the top example (Helvetica) works nicely enough at both larger and smaller sizes, while the bottom example (Impact) works fine in a larger size but looks terrible when small. Pairing a typeface that works well large and one that works well small can yield appealing results. If you're planning on using a single font, however, you'll want to make sure it can remain legible and attractive at every size you plan to employ. As we discussed earlier on in this guide, the size of your type can be used to imply its importance. When using larger type as a header, it also gives context to where you are on the page. You know the section you're reading right now is called "Size" because there's a header with that label at the top of it. Should you want to return to this section later, you'll be able to easily find it again by looking for that larger text. This likely isn't news to anybody, but demonstrates what size can accomplish on a very basic level. Let's take a look at another way size can be used for emphasis. To your right you'll see an image I created for a post about the displayed quote. The quote is about mistakes, and so the word mistakes is emphasized in several ways. Aside from setting it apart by using a notably different typeface and the color black for added impact, the word "mistakes" is larger than anything else in the image—even the pencil. Reading the quote will take a few seconds, but just by glancing at the image you almost immediately know what the quote is about. This is one example of how size can be used as a very useful tool when you want to create emphasis and communicate more efficiently and effectively. Format Your Text and Images to Better Communicate Your Message The way you arrange your text on a page has a compelling visual impact. This doesn't only mean the placement of a block of text but rather the orientation of that text, its relation to other text on that page, how it interacts with other images, the spacing between the characters and lines, and much more. While some work will call for simple formatting standards, there are still small things you'll want to consider when placing your type on a page. Let's say you wanted to include a quote. If you kept it simple, it might look something like this: "You're going to change your mind a thousand times. That's a good thing. Only imbeciles never change their minds." ~ Anna Rascouët-Paz That's sufficient, but you can do better. In the example on the right, a simple speech box shape was created to contain the quote and the speaker's name was placed below it. A small difference in size was used to emphasize the quote over the person who said it. The color green was chosen because most people find it pleasant, it's generally easy on the eyes, and has so many varied meanings that it tends to imply whatever the related text or imagery implies. Basically, green is a safe color choice. This image demonstrates several simple and safe decisions you can make when formatting your text, but you can always opt for something a little riskier. This example takes a few more chances with the formatting of the text and the layout of the image, attempting to illustrate the quote itself: "All great experiences that engage us have an element of uncertainty at their core." ~ Aaron Dignan The image creates a red core with a question mark in the middle. The red is intense yet it offers no direct context, implying uncertainty. Around the core is the quote, placing the uncertainty at the core of itself—the idea. The outside is colored green to remain safe, but the quote tells you that greatness is within the intense, emotional, red center. It's a complex message, and every little nuance isn't going to be obvious, but each design choice had a point. Again, every decision you make in your typefaces and layouts should have a reason behind it. That way you're likelier to be successful in communicating your message and you'll know what to discuss further if you fail to do so. Pair Two Typefaces to Give Your Designs the Exact Feel You Want As a general rule, you don't want to pair more than two typefaces in a design. This is a rule you can break for the right effect, but probably one you want to follow until you really feel you know what you're doing. Pairing two typefaces isn't necessarily a matter of finding two that are similar. In fact, often times when you pair two typefaces that look a lot alike you end up with a pairing that looks kind of odd because they appear so similar that viewers won't be able to tell the difference yet still know something is off. Completely different typefaces can cause the opposite problem, in that their enormous differences can be jarring. The best pairings compliment each other using a combination of alike and contrasting features—much like everything else in life. When choosing multiple typefaces, the first thing you want to decide is the overall similarity the design shares. Your fonts will need to adhere to these similarities as well. Perhaps your goal is to have a little fun. If that's the case, you'll want to avoid stiff typefaces and go for something with a little more movement or a somewhat unique shape. If your goal is to appear intelligent and conservative, you'll probably choose a serif typeface. What you pair it with will depend on what else you want to imply. A typeface that's similar but offers a little more personality can be nice, but you may want to opt for something semi-bold but reserved if you're playing it conservative. All of these ideas can only mean so much as a discussion. To really get the hang of font pairing you need to practice. You can play around in any word processing program, but a clever web app called Type Connection is a great way to get started if you want a helping hand. It'll teach you which typefaces go well together and why, all in the context of a dating game for fonts. It's fun and is a great way to learn one of the hardest parts of creating effective designs with type. Don't Forget to Practice Design isn't easy and you're not going to become a master by reading this guide, but hopefully it has provided you with a few ideas to think about next time you approach work that can benefit from added visual appeal. Keep these principles in mind when making your choices and, with enough practice, you'll develop a knack for making your everyday work look great.

What You Want to Do Is Who You Are Augment Your Reality: Google Glass, Porn Blocking, and the Gameification of Health and Fitness Tell Your Boss: Unlimited Vacation Actually Increases Productivity How Can I Best Handle the TSA's Creepy Tactics When Traveling? A Non-Designer's Guide to Typefaces and Layout Always Get the Best Deals on Mobile Apps Follow the 20% Rule When Saving for a Down Payment on a Home More Stories on Lifehacker »

dwyld.kwu.11muchado2011@blogger.com: Change your e-mail address | Unsubscribe

Gawker Media, 210 Elizabeth Street, Floor 4, New York, NY 10012
Terms of use | Mailing List Policy