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

Questions & Answers

    © 2013 GH Price

    Comments

      0 of 8192 characters used
      Post Comment

      • VirginiaLynne profile image

        Virginia Kearney 

        3 years 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.

      • Sulabha profile image

        Sulabha Dhavalikar 

        3 years 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!

      • profile image

        BarbaraCasey 

        3 years ago

        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.

      • Sunshine625 profile image

        Linda Bilyeu 

        3 years 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! :)

      • Kristen Howe profile image

        Kristen Howe 

        3 years 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.

      • ChitrangadaSharan profile image

        Chitrangada Sharan 

        3 years 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!

      • profile image

        Jaya 

        3 years ago

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

      • Tolovaj profile image

        Tolovaj 

        4 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

        Alise- Evon 

        5 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.

      working

      This website uses cookies

      As a user in the EEA, your approval is needed on a few things. To provide a better website experience, turbofuture.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

      For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://turbofuture.com/privacy-policy#gdpr

      Show Details
      Necessary
      HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
      LoginThis is necessary to sign in to the HubPages Service.
      Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
      AkismetThis is used to detect comment spam. (Privacy Policy)
      HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
      HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
      Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
      CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
      Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
      Features
      Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
      Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
      Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
      Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
      Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
      VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
      PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
      Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
      MavenThis supports the Maven widget and search functionality. (Privacy Policy)
      Marketing
      Google AdSenseThis is an ad network. (Privacy Policy)
      Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
      Index ExchangeThis is an ad network. (Privacy Policy)
      SovrnThis is an ad network. (Privacy Policy)
      Facebook AdsThis is an ad network. (Privacy Policy)
      Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
      AppNexusThis is an ad network. (Privacy Policy)
      OpenxThis is an ad network. (Privacy Policy)
      Rubicon ProjectThis is an ad network. (Privacy Policy)
      TripleLiftThis is an ad network. (Privacy Policy)
      Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
      Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
      Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
      Statistics
      Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
      ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
      Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)