Graphic Design: Using Fonts
Although many people don't have the patience to learn graphic design, those of us who earn our livelihoods on the internet through the use of our creativity can definitely benefit from the knowledge. Whether you're a writer, a web site builder or a budding graphic designer, it definitely pays to learn these things!
One of the most important elements of graphic design is text, or fonts. These are the words that you put on your images to educate others or to make a simple point. There are literally thousands of different fonts and the number of ways in which we can use them are infinite.
Here, you will learn how to use fonts to your advantage - to make your graphics be all they can be!
This article is not going to teach you how to use specific software. Although I do prefer Photoshop, I have used Paint Shop Pro and even Gimp with great results. The following information is, for the most part, usable for any of those three programs.
I've gone over the basics of fonts in a previous Hub. In my opinion, there is a three point checklist that you will need to follow before saving your finished image:
- Is the text legible?
- Is the text in a good position?
- Does the font match the theme of the image?
Here are what I believe are the best ways to make the answer to each of those questions a resounding "Yes!"
Choosing Your Fonts
Choosing your font is going to be the most important part of this process. This is also one of there areas where many beginning designers fail. They see pretty or flashy fonts and say to themselves "I want that!"
Unfortunately, what looks great on DaFont might not look so hot on your image. I can't possibly tell you how much time I've lost struggling with just the right font to use on an image.
What you want to do is to either use a font that looks great on virtually anything (like a good Serif font) or you want to find a font that matches the idea or concept you have for your image. Say, if you're making a book cover for a horror novel, you pretty much don't want frilly, swirly fonts with hearts all over them!
Unfortunately, there is no tried and true way to know which font is going to be the best to use, it's pretty much going to be trial and error. I would caution you to not over-use any particular fonts and this might be difficult when you find a great font that you really like and want to use over and over. We've seen this a lot over the years. In my opinion, the three most overused (and outdated!) fonts are Papyrus, Comic Sans and Scriptina. There is a list of the ten most overused fonts in graphic design at Johnny Flash Productions. Unfortunately, they're mostly fonts that come with your computer! Please don't use these!
Also, for web designers, don't use any of these flashy fonts that you can download for free on the internet for the text portions of your website. Very few folks will likely have the Chicken Butt font installed so their computers will revert to a default font and all of your hard work will be for naught. Stick to the fonts that came with your computer for the displays of text on your website!
Matching Font to Images
A Few Fonts for Different Feelings
Face Your Fears
Feast of Flesh BB
Miss Smarty Pants
Cold Night for Alligators
Big Noodle Titling
Chunk Five Six
Dead Font Walking
Centering text in Photoshop
If you use Photoshop, centering your text to the image or a specific part of your image is a snap. Just use the select tool and select the area on which you want your text centered, making sure your text layer is active. Then go to the top to Layer -> Align layers to selection -> Horizontal centers.
You can also use this to align left, right, top, bottom or vertical.
Positioning Your Text on an Image
Where you put your font can be almost as important as the font you choose to use. One mistake that I see a lot of design beginners make is putting text in terrible places on their graphic.
You should never "write" over top of your image, unless you're a quirky person doing something, well, quirky. This completely negates the point of using an image! I certainly don't want to play "Guess what's behind the text" when I'm viewing a graphic!
Also, while sometimes you might want your text to be the first thing that catches someone's eye, it doesn't necessarily need to be at the top of your image. Although it may be a little out of the box, so to speak, try positioning your text in different areas of your image to see how it looks there. You may find that your words look better in the top right or bottom left corners of your graphic. Don't just plunk your font down and forget it!
Centering text, to me, makes the image just look neater. There may be times where I don't do this, but it isn't often. When I make graphics, I like for everything to be symmetrical and neat, maybe it's an OCD, but a line of text just a few pixels off will drive me insane. So, unless I have a specific need to have my words to what amounts to off-kilter for me, I usually center the text. You may find you have other preferences - just do what looks good!
The Numerical Aspects of Using Fonts
When you've decided what font you want to use and where you want to place it on your image, there are a few other things you need to think about before you consider yourself done for the day.
The first, obviously, is the size at which your font is displayed. Font size is measured in points. There are 72 points in one inch. This is divided into pica, though this isn't something you will usually have to deal with - and there are twelve points in one pica, six pica per inch. Many graphics designers will set their images at 72 pixels per inch because this makes using text somewhat easier. The higher the resolution they need their image to be, however, the higher the pixels, or dots, per inch (DPI) their image should be.
I wish I could tell you that font size is industry standard with font makers, but it isn't. One font at 36 points may be very small and another at the same size will be too big for your page because fonts are created at different DPI. All I can tell you is to play with different fonts at different sizes to get the effect you're looking for.
There are two other things you'll need to understand and experiment with also. Most graphics editors (Photoshop, Paint Shop Pro, Gimp, etc.) do allow for changing these specifics.
- Leading - This is the vertical space between the lines of your text. If the number is too small, your text might look jumbled together. If it's too far apart, it could be distracting and will take up too much room on your image. Whenever you change your font size, you should adjust your leading number also.
- Kerning - Kerning is the space between characters. Obviously, the smaller the number, the smaller the space will be. Altering this makes a lot of sense for several things. You may have several different lines of text at different sizes or some with less characters than others. Changing the kerning can help you to make each line of text the same width. You can also accomplish this by justifying your text but, to me, it's easier to adjust the kerning.
There are all kinds of other adjustments you can make to your text, but font size, leading and kerning are the basics and you should try to practice with all of them before attempting any big graphics jobs.
Making Text Pop!
There are about a million different ways you can make your text come alive, no matter what graphics software you use (with the exception of, maybe, MS Paint... Eek!).
- Drop Shadow - This is exactly what it says it is - a shadow that displays behind your text. Most editors give you the ability to play with the size and direction of the shadow, just make sure that it jives with anything else you have used this filter on in the same image. It wouldn't do to have your pug's shadow going one way and your text's going the other.
- Outline - Most editors will allow you to put a "stroke" either inside or outside your text to make it stand out more from the image underneath it. I just used a two pixel stroke in a dark brown shade on the pug picture below.
- Glowing Text - I like glowing text. You can likely use filters to produce effects to either make your text glow or to put a glowing effect behind your text. I will tell you to use this sparingly, however. Some folks seem to think that text that looks like it has floodlights behind it is awesome. Me? Not so much. It screams "AMATEUR!!"
- Filters - I mentioned filters and most graphic design and photo editing software come with them. You can use them to apply all different sorts of effects to your text to make it pop in interesting ways.
One thing that I fairly frequently do is to transform, bend, turn or twist the text.This is fairly easy to do, most editors use a rotate tool that will allow you to turn your font. The rest you can Google for tutorials. This is worth your while to learn if you have the time!
I also like to make a line along the side of an image to make the text follow it the way a road would hug the curve of a mountain. This is a great way to make your image differ from the rest of the crowd. Google your software and text path, or some variation thereof. Photoshop Essentials dot com has a great, easy to follow tutorial for how to do this in Photoshop.
Do you think that text only images can have a good impact?
Text Only Images
Sometimes you may only want your words to make an impact and you may choose to make an image using no photos or artwork at all. This is not done often but, when done well, can be every bit as powerful as a beautiful image.
Think about the Beatles White Album or Metallica's Black Album (though this one does have a snake on it). Those two records did not use images to convey their point at all and were very successful and are, in fact, still talked about years later. I know because I just mentioned them!
A lot of writers choose text only images for the covers of their books. Here is a short list of books with text only or very minimal images for their covers:
- Palo Alto by James Franco
- Burn This Book by Toni Morrison
- The Great Brain Suck: And Other American Epiphanies by Eugene Halton
- Eating Animals by Jonathan Safran Foer
- Extremely Loud & Incredibly Close by Jonathan Safran Foer (has words written on an image of a hand)
- Against Happiness by Eric G Wilson
- No Country For Old Men by Cormac McCarthy
- Me, The Me I Want to Be by John Ortberg (this cover has a word cloud - see below)
- Everything is Illuminated by Jonathan Safran Foer
I could go on all day with the book covers, but I wont. I'm sure you get the point!
Another neat thing that you can do with text to make an image is a word cloud. It is essentially randomly placed words that make an image. Very complicated ones can make a recognizable image, like the word "Me" on the cover or John Ortberg's book Me, The Me I Want To Be. While not the exact definition of a word cloud, that image has words placed carefully to form the word "Me." An ordinary word cloud simply looks like a randomly placed grouping of words. If this seems like something that might make you pull your hair out, you can make and save a simple word cloud at Wordle.com, which is where I made the wallpaper pictured below.
Word Cloud Image
© 2013 Georgianna Lowery