Cell PhonesComputersConsumer ElectronicsGraphic Design & Video EditingHome Theater & AudioIndustrial TechnologyInternet

Graphic Design: Using Fonts

Updated on July 29, 2013
Source

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:

  1. Is the text legible?
  2. Is the text in a good position?
  3. 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!"

Do all of these fonts make you think of something that might be funny? I didn't think so!
Do all of these fonts make you think of something that might be funny? I didn't think so! | Source

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

In my opinion, the font choice on the right is a poor one. Sure, gothic fonts are awesome, but does this one convey the sentiment of the image? No.
In my opinion, the font choice on the right is a poor one. Sure, gothic fonts are awesome, but does this one convey the sentiment of the image? No. | Source

A Few Fonts for Different Feelings

Humor
Romance
Terror
No-Frills
Funny Kid
Trufla Words
Face Your Fears
CWG Sans
Ka-Blamo!
Janda Elegant
Feast of Flesh BB
Coolvetica
Miss Smarty Pants
Pinyon Script
Cold Night for Alligators
Big Noodle Titling
Chicken Butt
Loverboy
Zombified
Chunk Five Six
Organic Fridays
Sweet Love
Dead Font Walking
Sanchez
Most of these fonts should be free to use. I think you can find most of them at DaFont.com.

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!

In this image, I wanted the bird to be what attracted the eye. In my opinion, the bottom center is the best place for the text because it doesn't detract from the image or look oddly placed.
In this image, I wanted the bird to be what attracted the eye. In my opinion, the bottom center is the best place for the text because it doesn't detract from the image or look oddly placed. | Source
This should explain font size, spacing, kerning and leading.
This should explain font size, spacing, kerning and leading. | Source

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.

Just simply tilting the text a little makes it more noticeable and less generic.
Just simply tilting the text a little makes it more noticeable and less generic. | Source

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.

Poor pug! I bet you almost didn't even notice there was text in the first example! See what a couple of  layer styles can do? This is just "drop shadow" and "stroke."
Poor pug! I bet you almost didn't even notice there was text in the first example! See what a couple of layer styles can do? This is just "drop shadow" and "stroke." | Source
It is possible to make an image using only text. I made this sample book cover with no photos or artwork, just text and a few blocks of color.
It is possible to make an image using only text. I made this sample book cover with no photos or artwork, just text and a few blocks of color. | Source

Do you think that text only images can have a good impact?

See results

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

This is a word cloud desktop wallpaper I made at Wordle from the Dylan Thomas poem Do Not Go Gentle Into That Good Night
This is a word cloud desktop wallpaper I made at Wordle from the Dylan Thomas poem Do Not Go Gentle Into That Good Night | Source

© 2013 Georgianna Lowery

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Alise- Evon 3 years ago

      Thank you. This was very well-written and useful. I will probably review this info periodically.

      One thing I always wanted to know was how to make a word cloud.

      Voted interesting, useful, and shared.

    • Tolovaj profile image

      Tolovaj 3 years ago

      Guilty of overusing Arial! I think it is very important to include every one involved in final product (i. e. book) to understand the basics. Writer should know a lot about illustration and design, and designer should understand text as well.

      Publisher can be too cheap, writer or designer can have too big ego, illustrator can be too lazy ... You name it, I have seen it.

      There are a lot of failures where one of participants in the process didn't do the homework and results were unreadable.

      Too flashy fonts, as you already mentioned are the problem number too in my opinion.

      Sometimes this lack of communication is so obvious, it actually screams from the shelf in the bookstore.

      Great to see somebody actually cares so much to explain the basics, all new designers (and many experienced) need this. Thanks!

    • profile image

      Jaya 2 years ago

      Thanks for sharing this. Searching all over the web just confusing, but reading this get me to the right direction :)

    • ChitrangadaSharan profile image

      Chitrangada Sharan 20 months ago from New Delhi, India

      Congratulations for the HOTD!

      This is really very helpful and informative. Everyday we learn something from the Internet and thanks for being my teacher today. Thanks for the useful tips and suggestions. Pinned and shared!

    • Kristen Howe profile image

      Kristen Howe 20 months ago from Northeast Ohio

      Georgie, great hub. This is very interesting to know, even if it's for your website or book trailer. Very useful, too. Congrats on HOTD! One nitpick: The I in Internet should be capitalized.

    • Sunshine625 profile image

      Linda Bilyeu 20 months ago from Orlando, FL

      I get so obsessed with which font to use that I could literally take hours just to pick the right one, I usually end up using the first font I selected. It's torture, I tell you, pure torture! :)

    • BarbaraCasey profile image

      Barbara Casey 20 months ago from St. Petersburg, Florida

      One of the early lessons I learned was to embed my fonts. Most of my clients didn't have the same font collections I did, so everything reverted to Arial or Courier instead of looking like the cool graphic I created. Congrats on HOTD. This is a very helpful hub.

    • Sulabha profile image

      Sulabha Dhavalikar 20 months ago from Indore, India

      Dear Georgianna,

      This hub should definitely help me & my husband.

      I will certainly keep you posted if I achieve success in making cards.

      Thanks a lot! And God bless you!

    • VirginiaLynne profile image

      Virginia Kearney 20 months ago from United States

      Interesting information and ideas about how to use text effectively. What is hard, in my opinion, is that you usually have so many choices to play around with that I end up spending too much time! Thanks for the well presented article.

    Click to Rate This Article