Photoshop

S O U P 2 N U T S

The Lost Art of Typography

(By Scott Kelby, Photoshop User magazine)

notes

READ THIS FIRST: This is a weird class. Its weird in that you can read what to do (like put more space between your letters) and you can read the keyboard shortcut how to do that in Photoshop, but without being in the class and seeing live exactly why and when to add space, this particular handout wont be worth a darn. Just thought youd like to know. Also, this is a class with a lot of talking and hot much on-screen fireworks. Again, just thought youd like to know up front. However, if you do attend the class, I think youll find the session has real value because its one of those sessions that can put to work immediately for you, and see the results the very first time you put these techniques to work. In essence, it puts money in your pocket because it makes you more value and lets you create dramatically work professional work (at least as far as type goes). So now, youre fully armed, lets look at the session.

THIS SESSION IS DIVIDED

This session is divided into four different segments, each covering a different angle of the entire typography picture: (1) Typography Essentials and Photoshop This part is a look at the most important rules of typography, how and when to apply them, and how to make these all important type-tweaks using Photoshop. (2) How to Avoid Common Mistakes If you stay away from these things, youll dodge a lot of bullets. (3) Designing with Type This is the fun part, as we unveil the design principles of using type, including which faces work with which other faces (and why), how to create compelling designs using type, and some of the secrets the pros use and why they work time after time. Its fun stuff. (4) Which fonts are in high demand today. We look at which fonts are hot right now in popular culture, how theyre being used, and which ones are the real workhorses

TYPOGRAPHY ESSENTIALS
One of the things that can have the biggest effect on the overall professional look of your type is tracking. Tracking is the spacing between the letters in a group of letters, a word, or a group of words. Photoshop handles tracking from within the Character palette, and its the field with an A V side-by-side. Positive numbers put space between letters, negative amounts move the letters closer together. So....when do I do which, and why? ADDING SPACE: Generally speaking, you add space (increase the amount of tracking) for selected words in two instances: (1) You want to add an air of elegance to your type as an effect, and adding space tends to make your type look open and airy, and (2) when
ALL CONTENTS COPYRIGHT 2006 SCOTT KELBY ALL RIGHTS RESERVED

Photoshop
S O U P 2 N U T S The Lost Art of Typography

notes

space tends to make your type look open and airy, and (2) when youre creating type at small sizes for the Web. The reason you track it out (slang for open the space between letters) is because the anti-aliasing effect on small type tends to make the type look blurry and hard-toread. If you put space between the letters, the anti-aliasing Photoshop adds to the type doesnt touch each other, and therefore the type looks cleaner (this is an old Web designers trick). TIGHTENING SPACE Most of the time, youll be tightening space. Youll tighten the space to make your type look better when you create type at larger point size. Youll probably not do any tracking to fonts whose point size is 12 or lower because the spacing (tracking) for type at 12 point and lower is about right. Take at look at the type youre reading right now. Theres 0 (zero) tracking applied, yet the type look fine. If you increase the size of your type to 24 point or 30 point, suddenly this type that looked perfectly spaced at 12 point, now looks like theres too much space between the letters. If you go to 60 or 72 point, that extra space becomes really pronounced, so as a general rule youll tighten the tracking for all type above 14 points (except script fonts, which dont need tracking). OK, how much tracking (tightening) do you apply? This is a matter of personal taste, but as a general rule youll tighten a small amount (like -10) for 18 or 24 point type, and a little more for 36 or 48 point (maybe -25) and when you get to 72 point, 100 point, etc. you have easily track as much as -50 or -60. The goal (again, generally speaking) is to leave a small gap between letters at large sizes, without the letters actually touching. However, in print advertising and on TV, its not that uncommon to have very tight tracking where the letters actually touch just a little bit (they sometimes call this kiss tracking, because you tighten the letters up enough until they just about kiss). In the example shown above (the 100% Cotton Fiber text set at 60 point size) the top line has 0% tracking (the default setting). The bottom line is set with -50 tracking (as shown here), which moves the letters closer together. Youll probably agree the bottom text looks better, more professional, and thats why this is so important. Note: To tighten your type visually (which I recommend), highlight the type, then press Option-Left Arrow (PC: Alt-Left Arrow). Most people leave the tracking set at 0. A pro would never leave 60 point text with 0 tracking and this is one of the simple, yet incredibly important things that separates the pros from the goobers. KERNING Kerning is trackings hipper younger brother. Kerning rocks. Kerning is perhaps even more important than tracking, and therefore takes a little more doing, but the results are worth it. Kerning is basically adjusting the space between two individual letters, and its handled in Photoshops Character palette in the field to the immediate left of the Tracking field (shown highlighted here). You can use that field, but again I recommend doing your kerning visually, rather than by typing in numbers. To

Photoshop
S O U P 2 N U T S

notes
Kern two letters, just click your cursor between the letters then use Option-Left Arrow to tighten the space (PC: Alt-Left Arrow) and Option-Right Arrow to increase the space between letters (PC: Alt-Right Arrow). You move between letters in a word or sentence by just using the plain ol Arrow key. You use the Arrow key to move left and right, and then when you stop between two letters that need Kerning, just add the Option (PC: Alt) key and tighten or loosen as necessary. Again, the rules are the sametry to adjust the letters visually so you have approximately the same amount of space between the letters. The Cotton Fiber example is back (as shown here) but this time focus on the word 100%. The top one has no kerning applied, and as you can see theres a big gap between the 1 and first 0. You could drive a truck through there. If the goal is evenly spaced letters, its pretty clear that the 100% on the top line isnt even spaced. In the bottom line, I clicked between the 1 and the 0, and pressed Option-Left Arrow 5-times (PC: Alt-Left Arrow) to tighten the space between just those two letters. Then I moved the cursor (using the regular Arrow key on my keyboard) between the two 0s (00). Then I pressed Option-Right Arrow (PC: AltRight Arrow) once to put a little more space between the two zeros and make them look more evenly spaced. Its oversimplifying things to say this is the art of kerning but this is essentially what you doyou adjust the space between type set at large sizes to make it look good. Good kerning is an art. No kerning is a shame. LEADING Leading is, simply put, the amount of space between lines of text. By default, Photoshop (and most every page layout application in the know universe) uses a method of applying Leading called Auto Leading. What that means is it applies 120% space against the size of your type (meaning, if you set your type at 10 point, then Photoshop applies 12 points of leading (20% more). Here in this workbook, youre looking at 9 point type with 13 points of kerning. I intentionally used more leading (more space between lines) than normal because I wanted the type to look airy and overly easy to read because the lights are fairly low in our classrooms so you can see the big screens better. See, I care. When and Why? So is Auto Leading bad? Its not bad, but its not necessarily good either. Its the default setting, meaning it wont get you in trouble, but it wont make you look like a pro either. That because any goober who buys Photoshop, launches it and sets some type will undoubtedly use Auto Leading. Do you want to be an average goober? I doubt it, or you wouldnt have come to this class. So when do you increase or decrease leading. Increasing Leading You add more space when legibility is a concern, or if you want to make your type look more elegant. For example, wedding invitations are notorious for using tons of added leading (for example, you might use 12 point type with 60 point leading). All that extra space adds elegance. It may sound weird, but try it once and youll see what I mean. For magazine, book, business report, advertising copy, etc.. My personal favorite font and leading size is 10 point type with 14 point leading. You can see the amount of Leading in the Character palette; its the field to the immediALL CONTENTS COPYRIGHT 2006 SCOTT KELBY ALL RIGHTS RESERVED

Photoshop
S O U P 2 N U T S The Lost Art of Typography

notes

ate right of the Type Size field (as shown here) but once again, serious type tweaking is best done visually, not by entering numbers into a palette, so to visually adjust the leading, just highlight the lines you want to adjust, then press Option-Up Arrow (PC: Alt-Up Arrow) to move the lines closer to each other and Option-Down Arrow (PC: Alt-Down Arrow) to put more space between the lines. How close do you make these lines? In general, you can get them pretty snug, but dont let the descenders of the letters on the top line touch any of the letters on the line beneath it (descenders are part of letters that extend below the invisible baseline that your type sits on. For example, the letter j has part of the letter falling below the line. As does a lowercase g and p and q and y. None of those descenders should come in contact with the line below it. You can make it snug, but generally you dont want them to touch. CHOOSING THE PROPER JUSTIFICATION Choosing whether your type is left, right or force justified is more than just an its my favorite choice. Each justification says something to the reader about what is being communicated in the text. For example, text that is left justified (all the type lines up on the left side, and the right side doesnt line up perfectly) is considered a very casual style, and thats why its used in so many conversational style magazines like People, Sports Illustrated, Entertainment Weekly, etc. whereas Justified Text is much more formal, and is used in many legal documents and articles in more formal magazines, like National Geographic or Smithsonian (Honestly, Im not sure either one actually uses justified, because I dont have an issue handy, but if I were the art director at either, Id probably choose justified as a signal to my readers that were serious journalists writing important articles. It may seem subtle, until you see the two different justifications side-by-side). Center justification is used for wedding invitations, flyers, business cards, and a host of other common tasks that use short lines of texts, rather than long paragraphs. Right justified type is used often in restaurant menus for pricing, where all the pricing needs to line up, or on Web site navigation bars, or when you want to create a design statement. Right justification is probably the least used form of justification. You control justification in Photoshop from one of two places: In the Options Bar there are buttons for the three basic justifications (left, centered, right), or in the Paragraph palette where you can also access more advanced justifications, including full justification (both the left and right sides are perfectly aligned, as shown here) or you can choose to have just the last line of your paragraph justified to the left, center, or right (if youre really anal about type). USING THE RIGHT DASHES In professional typography there are three different dashes, although your average goober (you know who they are) generally use one for everythingthe hyphen. This is one of those quick telltale signs that let you know if the person setting the type knows what theyre doing. Well look at all three and which one you should use when.

Photoshop
S O U P 2 N U T S

notes

Hypen: There is basically only one time you ever use a hypen, and thats to hyphenate words (like step-by-step or when Photoshop automatically hypenates a word because it was too long to fit on one line (by the way, if you want to have Photoshop auto-hypenate, you have to create a text frame first, by clicking and dragging the Type icon where you want your column. Then when you type within this column, text will automatically wrap to the next line, and if a word is too long, Photoshop will hyphenate it for you). En Dash: This is a longer dash, and you get this dash by pressing Option-Dash (PC: Alt-Dash). You use this dash primarily to indicate a length of time, like 12:00 p.m. 1:00 p.m. or for 7 10 year olds only. Notice that longer dash? Watch below as I set the time again, but the top line will have a hyphen, the bottom line the proper En dash. 12:00 p.m. - 1:00 p.m. 12:00 p.m. 1:00 p.m. See how much longer the en dash is than a hyphen. Although the proper use technically doesnt have a space on either side of the en dash, the most common use is with a single space on either side. Yes, using the En dash is subtle. But these things add up, and when you have enough right things on the page, it changes the page in a not so subtle way. When you have enough wrong things, youre a goober. Its no fun being a goober. Em Dash: This is primarily used within a sentence to separate a thought or indicate a change in thought without using a comma, colon, or a period. Something like this: The new backpacks are now in stocktheyre gorgeous! The most proper use of the em dash is right up against the word on either side of it, with no space between, however this is something youll hear type-head argue, and many large newspapers use it with a space on either side. Personally, that extra space drives me nuts, but enough people do that to where its become an acceptable usage (even though it adversely affects my psyche). Heres both: you decide: JanuaryFebruary January February By the way, in class when were talking about hyphenation, well probably also talk about setting your type in columns (as I mentioned earlier in the Hypen section). Well, theres a little trick that professional typographers often use (especially ones setting magazines and newspapers) that not only looks great, but it enables them to fit more words on the page. Then actually condense all the type (every paragraph) by 5% (which is hardly noticeable by the reader as condensed at all). This is done in the Horizontal Scaling Field in the Character Palette (as shown here) by enter 95%. The field has a wide letter T as its icon. Again, another subtle change that makes a big difference when you add it all up.

ALL CONTENTS COPYRIGHT 2006 SCOTT KELBY ALL RIGHTS RESERVED

Photoshop
S O U P 2 N U T S The Lost Art of Typography

notes

HANGING PUNCTUATION If youre creating callouts or pull quotes, and dont hang the punctuation, its another dead giveaway that the type wasnt set by a pro. Rather than explaining what hanging punctuation is, just take a look at the example shown here. Both type in both examples are in quotes, with a quote at the beginning and end (thats the punctuation part). Now, look at the top example. See how the Quote is left justified, which moves the first letter of the word over one space? Thats bad. Now, look at the one beneath it, where the quote actually appears (hangs) before the paragraph, that way the first letters appears perfectly in line, just like it should. Thats what youre looking forhanging punctuation that hangs off the paragraph). Luckily, this is a no brainerjust click your cursor within the paragraph, then go to the Paragraph palette (its nested with the Character palette by default) and from the palettes pop-down menu choose Roman Hanging Punctuation (as shown here). Now, this only works if, before you entered your text, you clicked and dragged out a type bounding box. If you didnt, we just duplicate the Type layer, highlight the opening quotation mark, press Command-X (PC: ControlX) to cut it, then we click outside our type area to create a new block of type, then we press Command-V (PC: ControlV) to Paste that quotation mark in as its own separate element. Then we switch to the Move tool and drag it right up against the letter, hanging off the left side. Its a little more work, but it works. THE SINGLE SPACE RULE If someone gives you a text file to import into Photoshop (maybe a Word document), theres about a 75% chance that the person who typed it in put two spaces between each sentence. Its because thats what people do when they type on a typewriter, where its proper to put two spaces between sentences because typewriter fonts are monospaced (meaning each letter takes up exactly the same space). However, when using fonts in typography, a capital W takes up a lot more space than a small i (it uses proportional spacing) which is one of the reasons real type looks so much better than typewriter type. Type that is proportionally space doesnt need two spaces between sentences. In fact, it looks weird, but sadly this add two spaces practice has been handed down from generation to generation. However, theres a workaround for situations where someone has included double-spaces between sentences. Just click your type in the paragraph, press Command-A (PC: Control-A) to Select All then go under the Edit menu to Find and Replace Text. Click once in the Find field, then hit the spacebar twice. Then click in the Replace field and press the spacebar once. Then press the Change All button, and all double-spaces will be replaced by single spaces. Sweet! MORE OF THOSE IMPORTANT LITTLE THINGS Weve now covered the most important big things,

Photoshop
S O U P 2 N U T S

notes

and if you do nothing but add the improvements weve mentioned thus far, your type will look far better. However, if youre serious about setting professional level type, you can take things to next level without much more work, just a little more attention to detail. Here are six little things the pros do that have an important overall impact: (1) Use ligatures. What happens when two letters collide (like the top of a small f and the dot on a lowercase i. They touch and it looks darn ugly (a technical term). Luckily, built into nearly all typefaces are special character called Ligatures which are essentially a separate character that is a perfect combination of two characters that touch, to create one beautiful character. For example, an fi becomes (as shown in the bottom example here) is you press Shift-Option-5 (PC: Shift-Alt-5). If this doesnt work, make sure that Ligatures is turned on by highlighting the text, then go to the Character palettes pop-down menu and choose Ligatures. (2) Superscript things that should be superscripted when creating type at large point sizes. For example, to set the type 1st place at a large point size, youd superscript (shrink the point size and move upward to align to the top of the letters) the st after the 1. Also, you can superscript dollar signs and cents (as in the example shown here). To superscript a charater(s) in Photoshop, highlight the character(2) then press Shift-Option-+ (PC: Shift-Alt-+) or you can manually do it by reducing the point size of the character by 50%, then press Shift-Option-Up Arrow to move it up off the baseline (PC: Shift-Alt-Up Arrow). (3) Create proper fractions. 1/2 should really be set as 12. To get there, just superscript the 1, subscript the 2, and if youre really willing to go the extra mile, theres actually a separate slash made just for fractions. To get it, press Option-Shift-! (PC: Alt-Shift-!). (4) Use proper inch and feet marks. Thankfully Photoshop now makes curly quotes for you automatically (whereas previous versions gave you inch marks for quotations and feet marks for apostrophes). But now we have a reverse problem: when you need to create feet and inch marks, instead you get quotes (like the top example shown here). To get around this, go to Photoshops General Preferences and temporarily turn off Use Smart Quotes. Then when you type in an apostrophe, youll get a foot mark (like the one shown in the bottom example). However, if you really, really want to be doing this just right, youd also italicize the feet and inch marks, as I have done in the example on bottom. (5) Dont over-indent. When indenting a paragraph, dont use the old 5-spaces rule, or create too wide an indent. All thats necessary is an indent the width of a capital letter M (or about 0.10, which you enter in the Indent First Line field within Photoshops Paragraph palette, which is highlighted in the capture shown here. If you want a slightly larger indent (I personally prefer a 0.15 indent) you can use that, but if you indent much more, it starts looking a big cheezy. Also, an
ALL CONTENTS COPYRIGHT 2006 SCOTT KELBY ALL RIGHTS RESERVED

Photoshop
S O U P 2 N U T S The Lost Art of Typography

notes

indent is designed to let the reader know here comes a new paragraph. If you dont indent, you can put space between your paragraphs to let the reader know the same thing (as Ive done here in the workbook). Either is acceptable by themselves, but dont ever do bothin-depth and leave space between paragraphs. Thats like saying it twice: Here comes a new paragraph! Here comes a new paragraph! (6) Use Small Caps and shrink punctuation at large sizes. These are pretty simple. Although its now proper to set time as 9:00 p.m., the actual proper setting is 9:00 P.M., but notice how large the P.M. is next to the 9:00. Right, its distracting. Thats why theres small capsa small version of capital letters you use in just such instances. Not all fonts support small caps, so most of the time we just select the P.M. and drop it down a few points in size, so it looks more like this: 9:00 P.M. The other tip is to simply reduce the point size of punctuation marks (including periods and commas) when setting type above 72 point because at that size, they tend to stand out too much. We generally lower them by about 30% in size. Easy enough.

HOW MANY FONTS TO USE This is easy. Two. Thats right, although youll see pros occasionally use more, generally they stick by the rule of using just two typefaces on a page, and then they generally stick to using a sans serif for headlines, and a serif font for body copy (they dont always, but generally). Heres the thing: you can make arguments for using more, but youre always, always safe using two. You can never go wrong, you can never be blamed, and no one will accuse you of being a goober. Well talk more about this in class (the type thing; not the goober thing).

HOW TO AVOID THE MOST COMMON TYPOGRAPHY MISTAKES

Were going to cover these in detail in class, but for now you just need to know what they are (youll see vivid examples in the live session). (1) Dont ever set a script font in all caps. (2) Dont underline text for emphasis. Ever. (Youll see when underlining is appropriate in class). (3) Avoid writing in all caps. If you do, lower the letter that follow the first letter (youll see). (4) When creating columns of text, dont leave widows (one word on a line by itself at the bottom of a paragraph) or orphans (one or two words that appear on the top column of a second page). (4) Never use the spacebar to align text (this works on a typewriter with monospace type, but with proportional type, youll never get your type to really line up straight. (5) When laying out a page, dont combine two serif fonts or two sans serif, unless you really know what youre doing. Use one of each.

DESIGNING WITH TYPE

First, before we go into what to do, theres one thing that amateur designers do almost without exception and its easy to get caught up inamateur designers make their type too big. If they set body copy type, its always 12 point (rather than 9 or 10 like the pros). They use their type to

Photoshop
S O U P 2 N U T S

notes

fill space, not live within it. Their headlines are too big, their subheads too large, and their body copy too big. Amateurs think Bigger is Better. Pros think Less is more. Now, on to designing with type. There is an underlying tried and true method that professionals use when creating combinations of type, and its also a main underlying principle of non-type designthe principle of contrast. Well go into this in depth in the class session, but for now think of this way: Whatever I create for my top line of type, I need to create a largely contrasting look for the line of type that will appear under it. For example, if youre creating a logo for a restaurant, and youve set the name of the restaurant in all caps in a bold typeface with type tracking, you want exactly the opposite for the description of the restaurant. You want a light face, set in all lowercase letters, with lots of spacing between the letters. In the example shown here, I did just the opposite. The restaurants name is set in a light typeface (Garamond Condensed) at a large point size and the tracking is very tight, then the Asian bistro part is set in all caps, in a heavy font (Futura Extra Bold) in a small point size and theres lots of space (tracking) between the letters. Its simple, but it works. In class, youll see a lot of different combinations of this contrast theory, including: Tight tracking with loose tracking Big type with little type All lowercase set against all caps Thick with thin (a heavy typeface contrasted with a thin typeface) Tall with short (a font with thin tall letters against a short thick squatty typeface) Italics with Roman Little caps and big caps and so on. By the end of this segment, youll totally get it and youll be able to mix and match fonts in interesting ways almost immediately.

WHICH FONTS ARE HOT, WHICH ONES ARE NOT

Heres the list of fonts I showed in class that are enjoying great popularity today. To see these fonts in action (or buy them if need be), visit Fonts.com. Meta Helvetica Neue Trajan Pro Avenir Adobe Caslon Pro Frutiger Black Univers Carpenter Futura (Medium, Extra Bold, and Light) Minion Myriad Pro Zapfino
ALL CONTENTS COPYRIGHT 2006 SCOTT KELBY ALL RIGHTS RESERVED