Cover Fonts – Evoking Emotion Through Typography

Since the explosion of self-publishing, a cottage industry of graphic designers has cropped up to create the covers that sell the books. I know, I know, you should never judge a book by its cover, but let’s be realistic here: we all look at covers as our first line of decision making. Imagine for a moment you’ve never heard of Ray Bradbury. He’s just another guy cranking out books. You come across this cover.

Booooring.

Would it catch your eye?

Probably not. To be fair, I just grabbed some clip art I had lying around and threw some text on the cover, so it’s admittedly not my best work. The font, by the way, is the default Inkscape sans-serif font, cleverly named “sans-serif”.

If you’re unfamiliar with Fahrenheit 451, drop what you’re doing and go read it. It’s an important piece of literature and that’s not something I say lightly. If you are familiar with it, you’ll recognize the element of a burning book that is central to the story.

So, okay, it’s not a good cover from really any point of view, but rather than worry about the images of the flames and the book, we’re going to focus on the fonts and the emotions they invoke. That’s right, your font choice can elicit an emotional response. And that’s a very good thing, provided you’re eliciting the response you intend to elicit.

Inkscape’s default sans-serif font doesn’t do much to evoke a response, but it probably wasn’t intended to. It’s clean and easy to read, but it’s about as emotional as VCR instructions. Fahrenheit 451 is a very passionate book and saddling its cover with a font meant for memos and yard sale posters isn’t doing it credit. This is where exploring your font choices can make a huge impact. Just like you’d take the time to find the right images, it’s extremely important to find the right fonts – and that’s where a lot of beginners take a hit.

I’ve harped on fonts and typography in general before, so if you want a bit of background (including some cool free tips on Inkscape and GIMP), check these out. This post is going to be less historical and technical than some of the past ones, but no less important in terms of effective design.

Back in 2006, the Wichita State University’s Software Usability Research Laboratory conducted a study to see how people perceived certain fonts. Attaching something as nebulous and fleeting as an emotion or a perception to a font is no easy task, but the results were interesting. Using some standard Windows fonts, the researchers asked people to associate a font with a personality trait. You can go read more about that here, but the takeaway was people associate fonts with traits, sometimes quite strongly. Interestingly enough, sans-serif fonts didn’t seem to raise any noticeable good or bad personality associations, which would explain why the cover text for our mock-up of F451 looks so bland. But they did make some interesting associations (from blog.hubspot.com/marketing):

  • Serif fonts were rated as “stable,” “practical,” and “mature.”

  • Sans serif fonts didn’t receive any particularly positive or negative personality associations.

  • Script fonts were perceived as “feminine,” “funny,” and “casual.”

  • Modern fonts were categorized as “masculine,” “assertive,” and “coarse.”

  • Monospaced fonts were called “dull,” “plain,” and “unimaginative.”

Recently, CreativeMarket.com had a font sale – a whopping 43 fonts for 21 bucks (link at bottom). Some of them I’ll likely never use, but there were enough standouts in the collection to warrant purchasing it.

Just to show how font choice can affect the tone of a word, I chose a handful of the fonts and applied them to one word: Evolution. The word itself is something that could conceivably fit almost any genre of book from sci-fi to romance to horror. Watch what happens:

Inkscape default sans-serif, not bad, but not exciting, either

Inkscape standard serif font. At least has a bit more oomph, even if it’s evocative of newsprint.

Flanela Sans. Now we’re getting somewhere. The stark, thin lines could be good for sci-fi or a thriller. There’s a certain coldness to the font. Very computer-y without resorting to the standard monotype fonts that people seem to think computers still use.

Beautiful Friday 01. A playful font that’s more evocative of harmless fun. This would definitely not work for horror or thriller; it’s too happy. Would be good for romcom or feel-good fiction.

Castrina Typescript. Maybe it’s just me, but this feels very feminine. Probably a good choice for romance or summer beach reading.

Mutiara. The harsh lines don’t speak of safety or even sanity. Mutiara has an almost sinister, slasher-like feel to it. This would be a good choice for horror, but probably not a lot else unless it’s paired with another font; it’s too rough thrillers and far too in your face for romance.

Lost Volution. The Gothic lines are neat and tidier than Mutiara’s, but the decorative nature of the font is still overpowering. Emotionally, this has a somewhat sinister feel to it that would work well with horror or even steampunk. Westerns could possibly make good use of this one.

Solid70 Type System. Even though this is really retro font (those of who grew up in the 70s will recognize the style) it’s been modernized enough that it could work today. It’s a playful font, but the harsh angles still give it a very technical feel. With a bit of work, this could be effective in sci-fi or cyberpunk settings. Especially a 70s cyberpunk with big, clunky, plastic phones and loud keyboards.

Just a gander at those should evoke different emotional responses. They feel different. And even though each of them spell out the same word, that word takes on a different sense of meaning based on what font is used to present it.

So, if a font can impact how we feel about a word, it’s easy to imagine how a font can change the feel of a cover. Take the Fahrenheit 451 cover above, for instance. We know it’s not a lighthearted tale, so Beautiful Friday and Castrina are right out the window. Mutiara wouldn’t work on its own (more on that later) and Lost Volution is far too fussy. That leaves the default Inkscape fonts (which we’re going to ignore), Flanela Sans, and Solid70.

Much as I love Solid70, it doesn’t fit with the rest of the cover, but Flanela Sans just might work.

Not great, but better

The problem with Flanela is the coldness it inspires with its thin lines and tall letters. It’s a good font, but Flanela alone ain’t going to cut it a book about burning books; it needs some heat.

Which leads me to another point. There is no rule that says you can only use one font at a time. Mixing fonts is a bit of an art form, but it’s not completely inaccessible. Creative Market has a bunch of infographics on how to do it and do it well.

Let’s see if we can do some mixing and evoke more of an emotional response. Rather than sticking exclusively with Flanela, I’m going to bam it up a notch with Mutiara.

Now we’re getting somewhere.

The images and the layout still aren’t spectacular, but the text is looking pretty good. Now we’ve got Flanela’s cold, sterile feel combined with Mutiara’s in-your-face passion and a title that is a hell of a lot more eye catching than the original. And bear in mind, we did it with two fonts and only white. Adding yellow or orange to the 451, especially with a faint glow effect, might make it pop even more.

FahrenheitColored

Bam.

 

You can have the absolute best image for your cover and completely blow it with the font choice. Fonts elicit an emotional response and that response has to match up with what the book feels like. Just like it wouldn’t be appropriate to use Castrina Typescript or Beautiful Friday 01 for Fahrenheit 451, using a combination of Flanela and Mutiara for Lady Chatterly’s Lover or The Girl On The Train would be a recipe for disaster. Although, I guess if you were to rewrite Lady Chatterly’s Lover and include zombies (Lady Chatterly’s Zombie Lover?), Flanela and Mutiara might work.

And, please, unless you’re designing the interface for Microsoft Bob, avoid Comic Sans.

Got any comments or other tips you’d like to add? Drop ’em in the comments. I love comments.

Get Lostvoltype’s Mega Font Bundle on Creative Market for only 21 bucks.

A couple posts about fonts and emotion.

By the way, if you’re wondering what the current cover for Fahrenheit 451 looks like, it looks like this. It’s a clean, clever play on the book and matches with a start font-set and stark color scheme that’s evocative of repressive governments everywhere. Brilliant, if you ask me.

41Cx8mY2UNL._SX324_BO1,204,203,200_

Leading, Kerning, and Tracking. Oh, My.

There are good indie book covers and there are bad indie book covers.  I pray regularly none of mine show up on Kindle Cover Disasters.  I’m also hoping I don’t wind up on Wired’s Reviews of Indie Books; they seem to take joy in poking fun at the Indie author world.

The thing is, Kindle Cover Disasters and Wired both have some valid points.  There are some crap covers out there.  There are some terribly written books out there.  But there are also brilliant stories and wonderful designs; people in the indie world are pushing boundaries and redefining the publishing world.  Needless to say the traditional publishing world is less than enthused about this turn of events; they had a lock on publishing and were quite happy to tell us what to read and what format it would be available in.  The world is changing now.

I can’t really help with the writing side of things other than to say, “Find a story and tell it.”  Heck, I can’t even really help with the design side of things other to show off a few tricks I’ve picked up over the years.

A little while back I put up a post about choosing the right font for the job.  The post was ostensibly about Comic Sans, but there’s a very important lesson hiding in the background: your font can make or break your cover.  Comic Sans catches a lot of crap but that’s just because it’s used in so many places where it doesn’t belong that people have begun to see it as a bad font.  This is double plus ungood logic.  The utilization of a thing – especially when it’s not being used for what it was designed for – does not determine whether or not that thing is a good thing.  After all, it’s just a font.  If you were to try off-road racing in a Lamborghini you might come to the conclusion that they’re terrible cars because you just bottomed out on the first bump; but that’s not what Lamborghinis were designed to do.

Well, except for this one, but it’s the exception rather than the rule.

Lamborghini_LM002_Gen1_Type129_1986-1993_1988_frontleft_2013-03-17_U

Ever wonder where Hummers got their looks from? LM002.

So, choose a font that looks right.  Read up a bit on fontography, experiment with various fonts, and always – always – pay for the fonts you use in your design.  Spend a bit of time reading about design and see some examples of what can be done and you’ll save yourself a lot of headache later on.  How Magazine is a pretty good resource and I’ve been known to peruse them from time to time.  Even a Google Image Search for best book covers will show you give you some great ideas.

Let’s say you’ve got your font picked out and you put something together and it still doesn’t look quite right.  It’s that little tingle in your design senses telling you “This is nice, but it could be better.”  That’s where playing around with your typography can work wonders.  Take, for instance, this.

HenchmenArialPlain

Henchmen in Arial, default kerning

This is the title for Henchmen in Inkscape‘s default Arial font.  The word just lays there a bored hooker.  The font in this case is partially the culprit.  There’s nothing fundamentally wrong with Arial; it’s a great font.  It just doesn’t have much oomph when it comes to titles.  You can use Arial Bold or Black or any of the other myriad variants on Arial, but it’s still not the greatest font for what I intended.  So, stage one is to pick a more appropriate font.  After some serious futzing with fonts, I settled on Impact for Henchmen and Arise.  This is where it kind of comes down to your preferences; I like Impact, some others don’t.  You’ll never please anyone so go with something that looks good.  I felt Impact had the weightiness I was looking for.  For Henchmen and Arise, it’s a perfect font in my mind.

HenchmenImpactPlain

Henchmen in Impact, default kerning

It still needs a bit of work, though, to make it really pop.  This is where adjusting the kerning and tracking can come in handy.  Kerning and tracking adjust the amount of space between letters and can radically alter the feel of a word.  The two terms describe basically the same thing, it’s the application that separates them.  Kerning adjusts the space between two letters, tracking adjusts the space between a string of letters.  Here are a couple examples of tightly and loosely kerned text.  I guess if I wanted to start getting technical, I’d say tightly and loosely tracked text, but the end result is pretty much the same.

HenchmenImpactKernedLoose

Henchmen, Impact font, loosely kerned.

HenchmenImpactKernedTight

Henchmen, Impact font, tightly kerned.

The amount of white space between the letters does two things: it adjusts the legibility of the word and it adjusts the darkness of the word.  Of the two examples, the tightly kerned word is darker and harder to read, but has a more desperate or rushed feel to it.  The loosely kerned text is much easier to read, feels quite a bit lighter, but also has a more sterile or menacing feel to it.  Your results may vary on how the word feels to you, but you can’t deny the two examples have a markedly different feel to them.

You can even vary by letter, which is really what kerning refers to, the previous examples are technically tracked.

HenchmenMixedKerning

Henchmen, Impact font, mixed kerning

Mixing the distance between the letters  yields a very different feel.  In this case, I adjust the kerning to call out the MEN part of the word.  Add a touch of color (red would work) and you get a two words in one.  That would pretty much go against the grain of the book since a couple of the major players are women, but it’s a nice example.

HenchmenImpactMixedKernColor

Henchmen, Impact Font, mixed kerning, colored.

The final design I came up with was an attempt to harken back to some older bolder designs.  I stuck to Impact, loosened the tracking slightly, and slanted the text.  The end result, while it may not appeal to everyone, is simple and bold; two things I like in a design.

HenchmenGuyRevBSmall

I’ve redesigned this cover so many times I forget which revision this is, four or five, I think.

Since I wanted Arise to have a similar feel to Henchmen, I went with a very similar design and immediately ran into a problem: Henchmen has more characters than Arise so the design looked all wonky.  The solution?  A wee bit of tracking changes in Arise allowed me to keep a similar feel without having the title completely overrun the cover.  When I kept the same tracking in Arise I wound up with a huge text block when I scaled it up.

AriseGuyRevBSmall

Note the tracking differences in Henchmen and Arise. Arise is spaced wider, but not so much it looks too off.

That’s kerning and tracking.  Sure, most of the examples were tracking more than kerning.  Kerning can be used to make a line of text seem strange, or pull out a hidden word, or just to make it look like the word is falling apart or exploding.

Clever kerning can also be used to imply movement

Clever kerning can also be used to imply movement

But what about leading?  What the heck is that stuff?  Well, kerning and tracking are horizontal spacing; their good buddy leading handles the vertical spacing.Again, just like with leading and kerning, it all comes down to controlling white space.  Most of the time we tend to think of this as line spacing in blocks of text, but leading can be really useful for design elements as well as large blocks of text.  Take this for example:

Arial, 1.25 line spacing

Arial, 1.25 line spacing

Again with the Arial.  Again the text lays there like a bored hooker.  In this case, though, the problem isn’t necessarily the font; it’s what’s being done to it.  Arial works pretty well for things other than titles and headlines.  Times is kind of like that, too.  Just like with kerning and tracking, leading changes can have a drastic effect on the text.

WrongThingPlainArialTightLeading

Tight leading: .85

 

WrongThingPlainArialLargeLeading

Loose leading: 2.5

The leading numbers are based on baseline heights, which are derived from x heights.  X is considered a standard letter, so the term x-height is used to refer to the baseline height.  The default leading was 1.25, meaning 1.25 x the X-height.  The tight leading is set to .85 and the loose leading is set to 2.5.

The tightly leaded lines lose white space, and that creates a darker effect.  The loosely leaded lines feel lighter.  Same text, same font, different results.  It’s even possible to drop the text on top of itself and use color to differentiate the lines for the eye.

WrongThingPlainArialTightLeadWithColor

A little Christmas-y for my tastes, but it works as an example.

With a bit of experimentation, you can combine tracking, kerning, and leading.

Tracked and leaded.

Tracked and leaded.

The font was changed to Arial Bold, I used bold italic and color changes for wrong and right.  Suddenly boring old Arial takes on a new feel.

So, step one is to choose a good font.  If I switch the above text to Comic Sans, I get crap.

Holy bad font choice, Batman!

Holy bad font choice, Batman!

But this isn’t what Comic Sans was meant for.  Comic Sans had a very specific intent in mind when it was designed and fancy design wasn’t it.  If you have to pay for a font, do it.

Step two is to adjust the tracking and kerning.  You’re creating or removing white space and the effect on the text can be dramatic.

Step three – and this one doesn’t apply to book covers as much – is to work with the leading.  Again, you’re creating or removing white space.

Once you can combine all those elements together, you can make the text on your cover much more exciting.  Don’t settle for just throwing some text on top of a picture and calling it good.  If you’re going to take the time to modify and enhance the background image, shouldn’t you also take a little time to play around with the text?  Remember, the cover is the first thing people see.  If the cover sucks, no one will read the book no matter how good it is.  I’m far from blameless here, too.  The first few Henchmen covers were crap.  Live and learn and see what can be changed to make it better.  That’s one of the beautiful things about indie publishing; if you feel like making changes you can just do it.

In the end, choose the right tools for the job.  Spend as much time choosing your fonts as you do your images.  Keep the Lamborghini for GT racing (except the LM002, those things are boss and bodacious.) and use a dedicated rally car for off-road use.

BTW, I use Inkscape when I’m working with text and GIMP when I’m working with images.  I’ve tried doing text work in GIMP and Photoshop and found it to be more of a pain than it was worth.  If anyone’s interested, I can put up a quick explanation of how to do that.

Resources:

Some really bad book covers

More bad book covers

More technical description of kerning, leading, and tracking

Another description of kerning, leading, and tracking

Cover design made easy

Edit Jan 10, 2016. The final designs for Henchmen, Arise, and The Clock Man are displayed in the Get Your Copy of … widgets. This post was written before The Clock Man was done and before I got crazy and re-re-re-redid the other two.

Cover design hasn’t come easy for me.  I’m a relentless tinkerer with just enough design skills to be dangerous.  I have zero illustrative abilities, though.  In college I took draphic design and illustration classes; I did fairly well in graphic design but passed illustration by the skin of my teeth.  My first cut of the cover for Henchmen was so bad it never saw the light of day.  That one was revised into my Henchlife logo, which also didn’t make the cut, although I might still get it as a tattoo.

Yuck.

Yuck.

 

The first design I used was weak at best, but good enough for jazz and government work.

HenchmenUSFlag

A little too American Flag-y and pretty boring but okay enough.  Never settle for okay enough.

 

it went through three more revisions before I settled on the current cover.

What was I thinking?

What was I thinking?

HenchmenCoverFix

First iteration of the crop circle cover

 

May cause unexpected awesomeness in readers

May cause unexpected awesomeness in readers

© 2015, Eric Lahti Background image: ID 30553123 © Pixattitude | Dreamstime.com

© 2015, Eric Lahti
Background image: ID 30553123 © Pixattitude | Dreamstime.com

The final version kept some of the comic book feel that was much of the inspiration for the book, but added a bit of realism.

A lot of the problem I ran into was I had the book done when I started the cover.  I don’t know if this is the traditional way to do it or not but, as you can see, it didn’t exactly work for me, I was just too antsy to get it published.  Truth be told I’m still not 100% satisfied with the final cover but I’ve been forcing myself to slap my own wrists when I think about changing it.

For the upcoming Clock Man I started early.  Back in January as I recall, and have been tweaking and changing and modifying it as I had the time and the inclination.  For the most part, I’m happy with it now, but I’ll probably do a bit more tweaking before it goes out.

In the interest of everyone else who’s stuck designing their first cover and wonder just what in the name of Almighty Odin they’re going to do, let me give a few tips.  It’s possible to do it yourself and make it look decent, but it does take time.  The first thing you’ll need is a vector drawing tool and an image editing tool.  Microsoft Paint won’t cut it; you need some tools with some horsepower and you might need to set aside some time to learn how to use them.  I currently use GIMP and Inkscape, two powerful (and free) open source image tools.  By the way, links to all this stuff are at the bottom of the post.

Once you’ve got the tools you need an idea.  Find something about your book that can be translated graphically and start scrounging up what you’ll need.  In the case of the Clock Man I had a pretty good idea of where the story was going before I even started it.  Since it’s the title piece in the group I started looking around for gears, clocks, and other mechanical looking things.  At one point, I was going to build the logo around the Prague astronimical clock and found some good clip art to use, but ultimately abandoned it.  It came out looking steampunky and that wasn’t what I was going for.

I do most of my image searching on Dreamstime.com, a stock image warehouse of sorts.  They have multiple plans and costs for images but what I do is buy the $40 package that lets me get any five images I want.  I then proceed to download the biggest versions I can find, usually the big .tiff files.  Always get the biggest files you can find and verify the dpi is 300+.  Everything I’ve found on Dreamstime has fit the bill, but it’s still worth checking.

I stumbled across this and knew it would work with some editing.  This image is resized and converted to .jpg.  The original tif image is 6882×3903 and weighs in at 77MB.

42949420 © Skypixel | Dreamstime.com

42949420 © Skypixel | Dreamstime.com

It had essentially what I was looking for, but would require some fixes to make it work.  The first step was to isolate the face I wanted and get rid of the rest of the picture.  GIMP made that part easy.  When I make the print cover, I’ll have some more work to do, but for the ebook cover this will work well.  The edit gave me this.  This image is sized correctly for Amazon publication.  They recommend 1563X2500 or larger.  That comes out to a .6252 ration of width to height.  As long as you’re working in that range you’ll be fine.

ClockManCoverMainImage

At first I thought about cropping out the white space at the top and working with a full face for the image, but that proved unworkable since my text would obscure the face.

Already has some color correction done on it.

Already has some color correction done on it.

The problem with not using the full face was the damned white space at the top of the image.  Early cuts of the cover left that intact, but it just didn’t look good with the text over it.  The first thing I tried was converting the white to another color.  There’s just enough fuzz around each of those gears that I would have to create a masking layer by drawing around each one and converting the lines to a selection.  Had I gone that route I would have spent about a year drawing the selection manually around the gears and then wound up with a large chunk of <other color> space.

It still would have been rubbish.

The solution was to select the white with a color selector tool, invert the selection, copy it, and paste it as a fresh layer on top of a transparent background.  Then, I selected a portion of the gears that didn’t have the face, turned them 180 degrees and pasted them under the main image.  The effect worked nicely because the image is busy enough the seam doesn’t show very much.

Then, flatten the image, copy it and paste it three times.  Each pasted layer got a little work.  One had an edge detect filter run on it then that layer’s opacity was set to 50%.  This brought out some of the lines in the image.  The next layer was pixellated and faded to 55%.  This softened the image.  The final layer had video lines rendered onto it and was faded to 20%.  The whole effect kept the face visible but softened the image.

ClockManFixedImage

 

So, I’ve got the background, but it’s terribly busy so any text is going to have to stand out and stand out well.  This is where Inkscape comes into play.  I set up a document in Inkscape and embedded the background image in it.  You can do font work in GIMP but it’s a terrible PITA; stick to the vector programs for font work.  Rather than falling back on Impact, I wanted something different so I set out to search for a font with no real parameters other than I wanted it to look cool.  I settled on Lakmus; it has an almost 70s sci-fi charm to it.  With a bit of playing I finally got the look I wanted.  BTW, if you’re looking for a way to do the glow background in Inkscape, it’s actually two layers.  Get the font the way you want it (the final image’s Clock Man logo consists of five different parts, each layered on a different five parts), copy and paste it.  For the pasted image look in the stroke properties  Get a thick stroke and blur it.  Then layer the main font over the blurred font: voila! Glowing text.

The Chinese font is Noto Sans CJK SC Black.  That’s the font Google uses when you use their English to Chinese translation.  Once I had the translation I wanted and the font downloaded, Inkscape handled the Chinese characters quite nicely.  The big Yin/Yang symbol that makes up the O is a vector I found on Vectorstock.com.  I prefer to work with vectors whenever possible because you can scale them and manipulate them so easily.  It cost a dollar.

A bit of tweaking, add the author name, the “and other stories” line, and a reminder of what else I’ve written and I came up with this.

Clock Man cover design rev 6.  ©2015, Eric Lahti.  Background image © Skypixel

Clock Man cover design rev 6. ©2015, Eric Lahti. Background image © Skypixel

Like I said, there will likely be more mods before it gets published, but I’m liking it so far.

So, if you’re staring down the barrel of having to create a cover on your own, it’s not exactly rocket surgery and it doesn’t need to cost a fortune.  All told I spent $9.00 on the images and software necessary.  The cover for The Clock Man might not win any awards, but I have to admit I think it looks pretty cool.

Next time we’ll take a look at the guts of formatting a manuscript for upload to KDP using MS Word, Calibre, and Sigil.

Lakmus Font

Google Fonts

Google Noto Fonts

VectorStock

Dreamstime

GIMP

Inkscape