Fonts: Time to get personal.

Design, Fonts

Everyone suddenly has a lot of opinions about fonts. It used to be designers and artists trashing Comic Sans and Bradley Hand, after a few years Helvetica had a pop culture following. People got tattoos, it was serious. Then SNL ran a skit about Papyrus being the font for the Avatar movie logo. Welcome to our nightmare, everyone. Once you start to notice, you can’t stop.

Fonts effect the tone, the message, and the readability of whatever copy they are transmitting. It’s important to think about them, find a few favorites and have a few wildcards that you can go to. It doesn’t hurt to know some history about them. I have always been partial to Gills Sans, it is based off of the London Underground’s logo and accompanying alphabet, which Eric Gill helped develop. Now if a client asked me about the font choice they feel secure that I know what I’m doing and have a design heritage that they feel part of.

Fonts 101.

Serifs are those little flourishes you see on the ends of characters. How do you know if font is serif-ed? Upper case “T” is a good give away, serif-ed fonts have two more that two lines to make a “T” like little pedestals that end each segment. I sort of group all of these into a category in my mind labeled “Fancy Fonts.”

Sans, which comes from the Latin root “Sine” which means without. So “Sans Serifs” don’t have the flourishes. These are plainer, block-like fonts. I tend to think of these fonts as “Work Fonts.”

Script and Hand-style fonts are fonts that are meant to look more like handwriting. Not so often used in design, but they pop up more than you might think, even in the corporate world.

Web Safe Fonts. The deal here is this: you designed a whole web page with beautiful line breaks and perfectly spaced blocks of type. You chose the font for this job yourself and even had to buy the package for that font to use it. Let’s call this imaginary font “Hellyesica.” You finish the site and send it off to a friend, they ask what’s up with the weird word spacing and line breaks, you start sweating and ask for a screen shot, they send it and it’s a jumbled mess on their screen. While you can see Hellyesica, because it is installed on your computer, they can’t because their computer doesn’t have that font, so the web browser picked a font that it thought was close and replaced it. Web safe fonts save you from all that mess. 

Picking a font.

So how do you pick? There are plenty to choose from and it can be overwhelming. This will sound like a no brainer, but start with this very simple question: What is the font doing? Is it body copy that conveys information? Great, find a solid sans serif. Is it telling part of a story that needs to draw the reader in? Terrific, try out a slab serif and give it a read through. Fonts should act like your lungs, as in if they are working well you don’t notice them. The rule of thumb used to be that technical writing got san serifs and more creative writing got serif fonts. That is an old way of thinking but it helps save time if you’re stuck in font paralysis. The toughest thing a font can do is grab attention. Ideally the message should do that, and if the message is good enough then you just need a big bold font that doesn’t mince words. Arial Black, 72 point text can really pack a punch if the copy is, um, punchy.

If you are picking a font to match the tone of a design, be careful. This is the trickiest part of typography, you want something familiar, but not over used. Lobster is quickly becoming my least favorite font because of it’s overuse. Every seafood restaurant east of the Mississippi likes to pretend they are located in Cape Cod and slapped the Lobster font on everything like it was tartar sauce. Does that mean that Lobster is a bad font? No, it’s great. So is pizza, I just don’t want it for breakfast.

Resources?

Google Fonts.  This should be your go to for your work horse fonts. They are all web safe and have a wide variety of great fonts.

Dafont. My favorite source for non standard fonts. Not the best place for your body copy fonts, but if you are looking for something unique they have a huge selection.

Font Squirrel. A good mix of standard and unique fonts.

Blambot. Need something that would require a hand lettered feel but want to avoid Comic Sans or any number of awful “hand” type fonts, here you go. Blambot specializes in comic type scripts that are readable and unique without getting too cutesy or gimmicky.

Advertisements

Cut the Repetition: Image processing with actions.

Design


So you inherited a file with thousands of high res jpegs that need to be resized for web use, great. You could spend the week mindlessly resizing them one by one, or do it once and have Photoshop do the rest of them. 

The first step is to familiarize yourself with Actions. Open any of the images you’ll need to resize in Photoshop. Go to the Windows tab at the top of Photoshop and find Actions and click it open. There are some default actions already there, but you’ll need to make your own. Click the sandwich logo in the right corner on the Actions window and click “new action” it will ask you for a name (name it something that makes sense like “image resize for web” because having a menu full of untitled-95 doesn’t help anyone) and it will start recording everything you are doing. Go up to image size and resize the image to your new specs. Once your done click the stop button in the Action window and close the image you were working on, no need to save but it doesn’t hurt if you do.

Side Note: You can use Actions for anything you regularly have to do in Photoshop, I have one set up for making multiple shape layers, one set up for masking white backgrounds, one set up for resizing to a specific size, all by just clicking one button. I would recommend messing around with a few, especially if you find you have to do something over and over on multiple files.

Back to the task at hand. Go to the File tab, and go down Scripts and then to Image Processor. This block will pop up, but don’t worry, I’ll walk you through it.

In the first block it will ask you to select a file of images to use as the source, this would be your file full of too big jpegs. In the second block you are selecting where the resized images will be saved, I usually save in the same location and it will create a folder for the new files (the folder will be called JPEG, PSD or TIFF depending on the next step). Step three is what file type output you want, for this action we are only going to be saving as jpegs, but you can also save as psd if you need to keep the layers separated. The fourth box is the most important, you select the action you want to use, remember what you named that Action?

Once you get that all filled out you click the “Run” button and go make a cup of coffee. Depending on your computer and the size of the files, this time will vary. But rest assured that it will be quicker that you opening them one by one to do it manually. 

Rich Black: How to print better looking blacks.

Design, Printing

Ever print something that had a large black graphic that looked terrific on your screen but dull and grey on the print out? Time to learn about Rich Black, or how to get your darks their darkest.

If CMYK confuses you check out my previous article about RGB vs CMYK, it will help as a primer. So that black graphic, you did everything right, it is set up as CMYK for print, you designed it yourself, but it isn’t popping in the print off. Check your color settings on the black area, if the only color in there is K, you can push it more by adding the other colors. The problem with making a graphic that is plain black with the color set up of C:0 M:0 Y:0 K:100 is that you are only depending on the quality of the black ink. Rich Black is a printing trick where the color set up for black is C:30 M:30 Y:30 K:100. Some people will swear by C:50 M:50 Y:50 K:100, but really it’s up to you. The additional colors add a depth to the black and (yes I know it sounds crazy) makes your blacks blacker.

Beyond this you can even start to tweak your color formula to make cool blacks (C:75 M:25 Y:25 K:100) or warm blacks (C:25 M:50 Y:75 K:100).  Once you start to get the hang of how these formulas come out you be sure that your final product shines where others fall flat.


Things to beware of:


Nearly everyone who first learns about Rich Black does the same thing: C:100 M:100 Y:100 K:100. It doesn’t get better that that, right? Wrong, too much ink or toner will wrinkle your page, smear while printing, and take forever to dry. That’s why I prefer C:30 M:30 Y:30 K:100 over the C:50 M:50 Y:50 K:100, quicker dry time and less ink costs on big runs.

Some things should never be Rich Black, like text. Text is a very delicate thing on the page, if a color plate gets even a fraction of a fraction of an inch out of whack (which they will) your text will bleed with a halo of color. It looks sloppy and blurry and hard to read. 99% of the time text should be pure black. Same goes for fine lines and super detailed line illustrations. There are very few exceptions to this rule, the only one that comes to mind is text that is run over a color photo and you have your document set up to trap (not overlapping colors when objects are placed over them.)

Why a Bleed Costs More and When to Splurge

Printing

Ever see those slick one-sheets that are covered with a photo that runs all the way to the edge of the paper? That’s because it was printed with a bleed. A bleed is done by overprinting and then trimming back. A good minimum bleed size is an eighth of an inch (.125 in).

How do you set it up?

Ideally, you should be setting up print jobs in InDesign, when you place objects, files and photos in your document you can let them fall outside of the working area of the document.

Don’t contract the bounding boxes of the images to fit the document, otherwise, you won’t have anything to “bleed” when you export. Once you have everything set up where you want and you are finished designing it’s time to export as a pdf. In the dialog boxes, you can set the size of the bleed and include bleed and trim marks. Bleed and trim marks show the printers where to cut to make the final trimmed piece.

Bleeding Dollars

Print jobs with bleeds cost significantly more because you are adding several steps to the printing process and printing on larger paper. If you are printing a standard letter size sheet with a bleed it is actually printing at 8.75 by 11.25 inches and getting cut down to the standard 8.5 by 11. 
Something else to consider is the paper weight. Print jobs with bleeds usually cover most of the paper in ink. Paper weight is determined by how much 500 sheets of a type of paper weights. Standard bond paper, (the stuff the average office has in their copy machine) is 20lb paper. If you print a full page image or even a block of solid color over the whole sheet, you’ll notice some wrinkling. What is happening is the same thing that happens when paper gets wet, ink just wets the paper down too much.

If you are printing with a bleed I would recommend a paper that is around 60lb weight. Yes, it’s more expensive, but not as costly as running the whole job on cheap paper only to have the client not happy with the wrinkled up final product and eating some of the final cost for a reprint.

RGB vs CMYK

color

What is the difference? RGB stands for Red Green and Blue, CMYK stands for Cyan, Magenta, Yellow, and Key (Black). Here is the skinny on both of them.

RGB

RGB makes all colors with a mix of those three (red, green, blue). It is an additive color model, which really means if you add all of them together you get white, not black. This is because it is the color mode of items that emit color, not reflect it, i.e. screens. That is why RGB is the preferred color mode for digital design.

CMYK

CMYK does much the same, but with pigment. You see the colors because the pigment is not emitting light but reflecting it. It is a subtractive color model, which means when you mix all the colors they get darker, not lighter.

Because of those factors, CMYK is the preferred color set up for print. Both offset and digital printers use CMYK. Offset printers use screens, one for each color, that determines where the pigment goes on the paper. The K for Key may sound strange for black, but it serves a dual purpose.

The obvious one is that if it was CMYB some people would think the B might stand for Blue. The other reason has to do with the printing method; press techs would use the black color plate to line up the other colors since the black plate was usually the easiest to see the outlines on, therefore that plate was “Key.”

If you have ever uploaded an image to a website only to be surprised that the reds suddenly were glowing like a Christmas light and the blues were now a bright purple, you probably had the color mode set to CMYK when you saved it. Web browsers aren’t very good at decoding color, and end up interpreting them in wild, unpredictable ways. Same can be said for printing pictures that are set up as RGB.

RGB can display more colors than CMYK, even though there are only three colors, the value associated with each color goes from 0 up to 255. That is a total of over sixteen and a half million colors. That said, CMYK will always print better. There are limitations to what CMYK can produce, and you should prepare clients for those limitations; four colors can only produce so many variations and will fall short when you hit the neon end of the spectrum. I find that a little explanation and education set most clients at ease.