Design Tips: Choosing and pairing fonts for a banner

*I originally wrote this post for the EBAC blog; you can find the original post here: “Design Tips: Choosing fonts for your Etsy banner“. Since many small business owners are expanding their shops into other outlets other than Etsy, this can apply to any place you need a banner.

Fonts. People get emotional over them and people get overwhelmed by them. There are so many to choose from, so where do you start? Here are a few questions to ask yourself before jumping into pages and pages of font browsing:

1. What kind of shop do I own?
2. Who is my target audience?
3. Will my banner have large or small text or both?

When trying to decide on a font for your shop, if you don’t already have a logo for your “brand” just think in terms of how you want text to display on your banner. Your shop banner on Etsy is limited to 760 pixels (width) by 100 pixels (height) — that’s really not a lot of space, but it is enough to get the job done. Typically, banners on other sites don’t give you a lot of room either.

It’s ok to have more than one font in your banner (I’d recommend sticking to one or two only), but how do you know if they match or clash? Below are some basic design rules when trying to choose “font pairs”.

AVOID HAVING TWINS
Have two fonts that look alike? Most people either won’t care about the difference between Helvetica and Arial or won’t even notice if you use them right next to each other or one on top of the other. There is no point in using two separate items that do the same job unless you are intentionally trying to annoy a designer that gets picky about that kind of minor detail (in that case, don’t sacrifice your banner for that and get mixed up in the font mumbo jumbo — you’re there to sell your work!)

helvetica-arial-boldness

This rule also includes mixing two fonts that are similar but you can still tell the difference between them — don’t, they’ll clash:

myriadcondensed-arialnarrow
KEEP IT IN THE FAMILY
There’s an easy way to avoid looking for more than one font. Use fonts from the same family. For example, Helvetica is a family of fonts; it may include three (or more) different weights such as Light, Regular, and Bold. However, if you say “Helvetica Bold”, then you are referring to only one font in that family. When you want to have two different fonts in your Etsy banner — one for your shop name and another for a brief description underneath — it’s easier to use two fonts from the same family. When you keep your fonts in the same family, it makes the design of your banner look clean and professional. And it makes life simpler.

helvetica-bolditalic-light
IT’S OK TO PAIR A SERIF AND A SANS-SERIF
Serifs are a little “brackets” or “feet” at the ends of the letters (e.g. Garamond is a serif font) and a sans-serif font is one without these little feet and hands (e.g. Helvetica or Gill Sans are sans-serif fonts). If you’re going to be matchmaking these two types of fonts, go ahead and experiment.

garamond-gillsans-1
IF YOU’RE USING A SCRIPT FONT…
Keep in mind that there are fonts that work well at bigger sizes, but not so well at smaller sizes. If you’re planning on using a script or cursive font for your shop name, and you see that it looks great at a big display size on your banner, don’t think that you’ll get away with that elegance when writing a small shop description beneath your name in the same font. The readability decreases with size for some fonts, such as scripts or decorative fonts. In these cases, if you’re planning on having a brief description in your banner, pair your script font with a serif or sans serif font.

bickhamscript bickham-trajan

 

But don’t just use these fonts in the example. While many of the fonts shown here (Helvetica, Arial, Garamond, Gill Sans, Bickham Script, Trajan) are common, don’t feel obligated to stick to these. There are much better script fonts out there to experiment with other than Bickham Script!

Love + Donuts, Mayene Design

Advertisements

Let me know what you think:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s