Sample Artwork - Client Velvet Rope Promotions & GIG

Choosing the Right Font: A Practical Guide to Typography on the Web & in Print

Typography is an huge field. People devote years of their lives to this ancient craft, and yet there's always something new to learn. In this article, I’ll be reviewing the major points that you should consider when selecting a typeface for a website.

Practical Typography

When you design for the web, you have to accept that the content will change. It's simply out of the question to take the time to kern (adjust space between individual letters) each title on a huge website. In other words, you give up some control.

What I'm going to be focusing on today is practical typography. For me, this means accepting that you will never have total control over the type on your websites. Choosing a typeface, deciding on a size, these are all things we as designers have a say in. Practical typography means learning how, and more importantly why, to adjust what you do have control over. Let's get started.

---

Readability

What do you do with type? Read it! So why do so many websites make it so damned difficult to do just that? Be it tiny font sizes, crammed line-height, or just plain ugly fonts, it seems that a lot of sites out there are determined to not let you enjoy their content!

By making your type readable, you immediately jump ahead of at least half of the competition, which is fortunate, really, because it's not that hard!

Typefaces

When deciding what typeface to use on your website, it's important to remember: don't over think it. I know that many designers hate using Helvetica, because it is wildly overused. I agree with this, but there's one very important piece of information this statement leaves out: why. People overuse Helvetica because it's just so damn good. It fits right in with virtually every design imaginable, it works well in small, as well as huge sizes.

While it may go against your beliefs to set your type in such an abused face, if it works, then go for it.

Your body copy is arguably the part of your design that needs to be most readable, so make sure you pick a font that works well in small sizes. What do I mean by that? If you can set your copy to 10px and you can still make out what it says, then that's a good indication you've chosen a readable typeface.

That covers body copy, but what about titles?

Readability in large titles is far easier to figure out than in body copy. If you can make out what it says immediately, then it's readable enough.

What's good about typefaces is that once you've worked on enough projects, you'll have a good idea of what works and what doesn't. From there, you'll be in a better position to make critical choices about fonts.

There's no formula for choosing the right fonts for your website. Often, the best way to decide on one is to just try out each font you think might work, and then compare. Choosing fonts is really a gut instinct, but it's important to remember that 90% of the time, a user won't be thinking about what font is used, so if it's readable, then that's often good enough.

Pairing

There's rarely (if ever) a situation where just one typeface is appropriate for use on a site. The average website has a lot of text. There's no way one typeface will work for all of them! The vast majority of well-designed websites use two typefaces: one for body copy, and one for headlines.

When choosing a pair of fonts, the most important thing to consider is how they work together. “Are they similar enough?” “Too similar?” “Not different enough?” All these are questions you should be asking yourself. I find that the best way to choose a pair of fonts that works is to just put a lot of them side by side and decide on the best. There's no way to know which is the best until you've tried all of them.

Sometimes, the most appropriate thing would be two sans-serifs, while other times, you want a sans for headlines, and a serif for body copy. It doesn't particularly matter if they look similar, what matters is if theyact similar. This of course depends on the rest of your design. Whichever fonts you choose has to convey your message strongly, and if that means having contrasting typefaces, then go for it.

Simon Collison uses font pairing excellently on his site, choosing a strong sans-serif for main titles, and a simple Serif for the other, smaller headlines, as well as copy. This partnership expertly displays the message that the website is trying to say, in a way that each font individually could not express.

Size

As a general rule, designers like to set their body copy at the very least at 12px. Most, however, chose a larger size like 14px, which is even better for readability. Font-sizing is really quite easy to decide on for body copy, but it's the titles that start to get complicated.

How big should your titles be? It depends. In my observation and creation of websites, I've come to the conclusion that a title should only be as big as it needs to be. This means that you should try out different sizes until you find one that is just big enough to draw the attention you want to it, but no bigger, unless huge text is what you're going for, in which case go right on ahead.

Hierarchy

The nature of a title is big. It's an important item on the page, so naturally it should be bigger, right? Yes and no. Yes, titles are generally bigger than other elements, but no, this is not the only way to draw attention to them. Color, weight, and placement are all equally important to establishing a clear visual hierarchy to your pages.

The key point to remember about visual hierarchy is that it's all relative. Text on your site only has to stand out compared to the other text on your site. Take Wilson Miner's site for example. His titles are quite small for how important they are, and are surprisingly close in size. However, his use of color distinguishes the most important title, and gives them more meaning.

The use of type is a very important tool to establishing visual hierarchy, be it through size, color, weight, or even placement.

Leading

Leading, or the space between lines of text, is an invaluable tool for readable text. Bad leading can ruin an otherwise stellar piece of copy, and good leading can make even the worst type look readable. Fortunately, it's not that complicated to implement.

Using the CSS line-height property, you can easily assign space between your lines of copy. Generally speaking, for large blocks of text, 1.5 times the size of the text is a good size. Smaller text should have tighter leading, and huge text should have a lot. It's not that complicated, really.

Tracking

Tracking is the space between characters in text. I'll admit, this one's a bit of a grey area when it comes to “Practical Typography,” in that CSS doesn't give us huge control over it. Usually, you won't have to worry about it for small text, it's only for titles that it becomes an issue. Generally speaking, adding letter-spacing: 1px; or letter-spacing: 2px; to your CSS should be enough space between the letters.

Another place it would be beneficial to add tracking to is small-caps. Here it's generally considered good practice to add an extra pixel or two between the characters, as they naturally appear larger.

Color

While not strictly-speaking typography, color is a very important part of every website's type. I'm not talking about color schemes, but rather about the contrast needed to insure readability on your site. Black text on a white background (or light background) is widely considered to be the most readable color for text.

I'm not saying you should go and set everything to black-on-white, just that when you're designing, you should be aware of the contrast of your text. It could come back to bite you if you're not careful.

The Grid

In my opinion, use of the grid is the most important idea for practical typography on the web. You can have great fonts, spacing, and colors, but if you don't have a good layout, you may as well be using comic sans.

Using a grid when you're designing with type provides a clear balance and geometric structure to your design. It isn't the magic fix to a bad design, but if you design with a grid from the start, you can be sure that at the very least, your layout will be solid.

So what does a grid have to do with typography? Put simply: everything. The grid embodies all the fundamental ideals of typography. It's geometric, consistent, usable, and above all: beautiful.

Setting your text with a grid is a key way of establishing visual hierarchy, and it's a great indicator of how large (or small) your text should be.

---

Standing Out

As I said before, if you're typography is readable, then you're already ahead of 50% of the competition, so what about the other half? If you've made it this far, then together we leave the clear, consistent rules of readability and enter the murky and mysterious world of being unique.

Fonts

You want your website to stand out? Step 1. Employ some unique typography. Presumably for you this means to use some unique fonts. But what makes a unique font? For me, it's not one that isn't used often, but one that has a message or feeling not employed by other faces.

Choosing a unique font is really about the feeling. Does this font feel different? Or does it just look different? When choosing typefaces for any projects, you should always be considering the feeling of the design. As this is totally a personal opinion, I can't help you find a unique typeface. What I can do is show an example of unique fonts.

The Design Cubicle has a very unique logo and design. It's strong yet classy, attention-grabbing yet subtle. When I look at its design, the feeling of class just oozes out of the site. It says, “I know what I'm doing.”

Be Unorthodox

How many websites do you know whose logo is as big as the content? What about an ultra-thin title? Unlike my last point, being unorthodox is about seeing what others are doing, and then doing the opposite.

The folks at Savvy Belfast are smart. They noticed the cramped look of most websites, and decided to replace all that meaningless copy with one statement.

Even if you visit their site for only a moment, you can't help but remember their name.

Match Your Design

Typography is not it's own thing. It's a part of web design just like any other. Type is important, yes, but you shouldn't forget that is is just part of what makes a web design great. You should design your type with the rest of your design in mind.

If you use a highly elaborate background texture, then maybe a nice serif would be good for your titles.

My point here is simple: Don't forget the context. Design is a huge field, and today I'm just talking about one part of it. For a successful website design, all the parts have to mesh together successful. That's the goal: to craft the experience that somebody will have on your website. You can't do that with just type, or just color, or even just content!

Emotional Type

So much of an experience is defined by how you feel: happy, sad, amused, angry, blah blah blah. Humans have a wide range of emotions, and as designers, it's our job to evoke these emotions with our designs.

Of all the things I've talked about today, this is by far the most abstract, and it's a little hard to explain. Instead of trying to explain this to you, let me show you.

When I first visited Solid Giant, I smiled. I smiled the next time I saw it, and even the next time. Immediately I felt a kinship towards the design. That big, fuzzy “G” is just too adorable to forget!

Quite frankly, I think it's genius.

There's no way to teach emotional design, it's something you have to experience, and then play with in your own designs.

How to choose the right logo...

Everything you need to know and think about when considering developing a new logo and brand for your organization.

A logo is a graphical element (ideogram, symbol, emblem, icon, sign) that, together with its logotype (a uniquely set and arranged typeface) form a trademark or commercial brand.

The logo is one aspect of a company's commercial brand, or economic or academic entity, and its shapes, colors, fonts, and images usually are different from others in a similar market.

It’s important to realize, when your are choosing a logo design, that your logo is more than just the visual representation of your business name, it's will become one of your most valuable commercial assets.  Opinions about your company, its integrity, personality and reputation can be formed at a glance and with the presence of your logo on every business card, letter, advertisement, brochure, website and product that your company goes on to produce demonstrates just how vital it is to choose the right logo, the first time.

Most people hire a graphic designer or agency to design their logos and there are plenty of very qualified candidates with top-notch skills to choose from.  But it’s still down to you and your company to make the final decision.  So how do you make an informed choice?

The following will take you through the process of designing a new logo and the considerations you need be aware of when reviewing the designs so that you can choose the right logo for your company.

The brief

Before starting any project it’s essential to have clear vision. Your designer/agency will most likely ask you to brief them on the project (verbal or written) but even if they don’t its best that you have thought about how you would answer each of the following questions:

Your company:

• How would you describe your company and the products and/or services it offers?
• What are your long term goals?
• Why do you want a new logo?
• If you already have a logo - why do you want to change your logo and what do you want your new logo to achieve?
• Who are your main competitors?
• How do you differentiate yourself from your competition?
• Who is your target market?
• Do you need this logo to translate globally?

The project:

• Do you have a ‘tag line’ or specific marketing message you want to include?
• Do you have any images or image ideas you want to incorporate?
• Do you have any color preferences or existing brand colors?
• Do you have any colors that you do not want to use?
• What adjective do you want your logo to project?
• What feeling or message do you want your logo to convey?

The next step is to consider what type of logo works for your company.

Types of logos

There are typically three types of logos:

• Text logo
• Symbol logo
• Text and symbol logo

Text logoWords in their purest form ARE images. Fonts come in all shapes and sizes, which convey different impressions on the audience. A thick font conveys strength and power. A script font conveys elegance and austerity, and a slanted typeface conveys movement. Your company name thus can be your own logo, provided the font you use displays the intended qualities of your business.

Symbol logoA symbol uses an image or images that convey an actual or abstract representation of a business. Because a symbol alone is less direct than text, it leaves itself open to a wider interpretation of what the business is about. Using a symbol in your logo has several possibilities.

The symbol may be a take on a company name.  One of the most famous examples is Apple Inc.’s apple with a bite taken out of it.  Or the symbol may create an entirely new symbolic meaning. For instance, people did not originally associate the Nike "swoosh" with the company. However, due to its corporate rise and presence everywhere, people have immediately grown to think "Nike" whenever they see a swoosh. The same is true for the McDonald's golden arches.

Text and Symbol LogoA brief amount of text, or sometimes just an abbreviation, compliments the symbol and provides that extra bit of clarity of what the business is about.

Whichever style of logo you decide to follow, remember it's not just about what you want your logo to look like, how your audience will perceive your logo is even more important.   Interflora is an example of this type of logo with the word “Interflora” accompanied by a symbol depicting a person on the move carrying a bunch of flowers.

Design characteristics

There are a few design characteristics to consider:

Color
Color is considered important to brand recognition, but it should not be an integral component to the logo design, which could conflict with its functionality.  It is best practice to:

• Keep the number of colors used to a minimum - aim for a maximum of two colors (not including white) and avoid subtle tonal changes
• Avoid metallic colors as they require expensive inks/stock and don’t translate well on computer or television screens.  For example; copper will convert into a murky brown on your Web site
• Test that the colors you select still work when you convert your logo to a purely black and white version.  An easy way to do this is to print it, fax it and photocopy it

Also take note that color can symbolize human behavior and feeling. This is especially important if you plan to market your company to various countries as some colors may represent negative cultural connotations.   Typical associations are (although they will vary by country):

• WHITE:  is the color (or lack thereof) that represents purity, neutrality, sterility and youth.
• BLACK: is a multi-dimensional color that can mean classic or new, it has an ominous characteristic, symbolizing death.
• GRAY:  is a blasé color, security and reliability—two important features businesses will need to adopt in the future.
• RED: makes the heart beat faster, strikes a chord with more cultures than many other colors because of its intensity, passion and invocation of an inherent physiological response.
• BLUE: is the best color to wear to an interview - non-threatening, yet confident, stable and loyal, the color of corporate and technology.
• GREEN: will continue its rise in eco-conscious businesses.
• YELLOW: echoes the duality nature of red. Though yellow evokes feelings of happiness, when we are confronted with too much yellow, we can become annoyed or angered.
• PURPLE: in Thailand is considered to be the color of mourning. Not so in western cultures. Purple is the color of royalty and wisdom.
• ORANGE: is energy, enthusiasm, get-it-done and balance.
• BROWN: is the color of dirt, giving it an earthy, environmental quality popularly coupled with green.
• PINK: a sister of red, is a tranquilizing color, symbolizes innocence and child-like flirtatiousness.

Font
Making the right font choices for your organization's brand identity is absolutely critical to successfully capturing the image you want to project. The careful choice for fonts is very important, because fonts display emotions and bridge communications with the onlookers. For example, if you are running a financial company, you need to choose a font that brings a thick and squared looks so that it makes your logo design communicate stability and security to your target clients and build confidence and trust even before they try. Whereas, a marketing company, needs to choose a font that gives creative, trendy, and outgoing impression.

While options may seem overwhelming, fonts can be broken down into several groups:

• SERIF FONTS: connotes stability, timelessness, classicism, elegance and a sense of history. Probably the best known serif font is ‘Times Roman’. Be warned when considering the use of a serif font is that the serif fonts are designed for print and they do lose some of their subtleties when used in Web pages
• SANS SERIF FONTS: suggests a contemporary, innovative more forward-thinking brand.  Arial is a good example of this type of font.  As they are cleaner in their design than serif fonts they are good to use even at a small size
• SCRIPT FONTS: looks like handwriting, which conveys an elegant feeling.  Often found used on perfume bottles or for wedding companies
• DECORATIVE FONTS: fun and attractive.  You can find them on products for children, entertainment companies etc.

Font style is also an important consideration:

• Heavier weights project a more industrial feel; lend themselves to carrying a weightier, more solid feel to the message
• Lighter weights project a cleaner, crisper look, ideal for architects, consultants and analysts
• Italic Fonts can be more relaxed, or more graceful than other fonts. Some of the more popular italic families may suggest an image in motion, to connote aggressiveness and forward-thinking

Having chosen a suitable typeface with your designer/agency, ask them to show you how it looks in different styles. Caps, lower case, upper and lower. Look out for interesting letter pairs or combinations that can be exploited to make the logo more distinctive and memorable.

Shape
A distinctive logo (or icon) has a recognizable shape, so that it is still recognizable from its outline. Your brain loves to use shape to identify things, because it can do it very quickly- this is also the main reason why white space is important.

What gives a logo its distinctiveness? The outline should be simple, but not too simple, and clear. Also, meaningful elements should be clearly differentiated, with the use of white space where required.

Presence
Your logo has good presence if it fills much of the available space with shapes that carry meaning (e.g. words, recognizable symbols). This makes it bolder and clearer, and hence more recognizable. The more space you fill with elements that don't either help recognition or add meaning, the less presence your logo will have.

Weight
Good weight means that a logo (or icon or logotype) does not rely on fine (slim or light) features in order to be recognizable. If a logo is bold, it can be effective in more environments. The best logos have a weight of presence and are recognizable when viewed alongside other strong images.

Contrast
Contrast aids shape-recognition by making the edges between elements clearer. Good logos (and icons) have lots of contrast on the edges of meaningful visual elements. The squint test is great for checking contrast. Also consider that users may be colorblind.

Usability and suitability

A logo is more than just the individual design elements - it also needs to be reviewed as a whole.  When doing this the following will help you assess its usability and suitability to your particular company and market.

Your logo should be compatible with your image:
If you are a financial or legal institution, you will probably want a logo that is more conservative in design and color. Navy blue, maroon, and dark teal are good color selections for projecting a conservative image.

If you are an artist or a state-of-the-art computer company, you may want a logo that is more abstract and contemporary. Shapes and symbols are good choices for an abstract look. Even using black and white as colors on a unique design gives a contemporary look and feel.

Your logo design should be simpleOne reason your logo should be simple is that people process an image in their mind more readily than words alone. The other reason that your logo should be "simple" is that the simpler your logo is, the easier it will be for your graphic designer to resize and recolor it for various design purposes. Always plan beyond your initial design purposes for your logo since the ultimate goal of your business is to expand.

Your logo should be unique and quickly recognizableThere are two reasons you need a unique logo. First, you want people to see a visual representation of your company or business. When people see your logo, you want them to immediately associate that logo design with you and no one else. You don't want your logo to be a piece of clip art because someone might associate that clip art with your competitor. Using an image or a typeface that is all too common defeats the purpose of having a logo, and can even have a negative backlash among your audience who would view your company as unimaginative.

Second, a unique corporate identity is important because you don't want to violate any copyrights or trademarks of other companies. If your logo is too similar to another company's logo, it is in your best interest to modify or redesign the logo. What it would cost you in time and money to have it redone would be very small compared to winding up in court for a copyright violation.

If your logo is simple and unique, and if people visit your web site repeatedly, people will associate your logo with your company. When done properly, a logo is one of the simplest ways to make a brand name recognition impact.

We will explore the legal considerations around trademarking in greater detail later shortly.

Flexibility
You can use you logo virtually anywhere and under any circumstance to spread its positive message.  It can appear on every email, letter, business card, envelope, promotional item and advert to name just a few instances.  So you need to be confident that your final decision is going to still be as strong in each appearance.  Here are some tests to see how flexible yours will be:

• Does it work well in black, reversed out and in full color?  Make sure that when you take out the color you don’t lose the concept too
• Does it work well in various sizes? It should work well in both large and small sizes
• Is it adaptable?  It needs to be able to work both horizontally and vertically
• Is it ‘vector-ized’? Logos should be created using vector-based software which gives the ability to save the logo as various file formats and makes it scalable
• Readability? Not only does the logo need to work at various sizes but so does the text

Legal tips

Once a logo is designed, there are two things you or your designer/agency need to do. 

Firstly, make sure your design/brand hasn’t already been trademarked by someone else.  If it has been and you try to use it you can be sued in court for damages and may be required to pay compensation.

If no one has then you need to do so quickly as some trademarks go on to be worth millions.  The value of your logo can only be ‘locked in’ by actually protecting them by trademark registration.

Trademark registries and application processes vary from country to country so it’s advisable that you (or ask your designer/agency to do so on your behalf) contact the appropriate Trademark Office/Bureau for assistance, such as: 
* The United States Patent and Trademark Office (USA)
* The Trademarks Bureau (Europe and the UK)
* IPA Australia (Australia)

If working with a designer/agency, make sure the copyright ownership is documented and signed by both of you.

Final files

The following is a list of deliverables to ask from your designer/agency once the final logo design is approved.

File formats:

• eps - for business cards, brochures, advertisements and anything else to be printed in high quality (make sure it’s a vector eps)
• jpg and gif - Websites, on-line adverts and banners, email marketing and digital signatures and anything Web related
• tiff - Microsoft Office programs and standard printing for common use (i.e. invoices, letterheads)
• Other - If they have used software such as Adobe Illustrator or QuarkXPress to create the logo as vector artwork, in addition to the above file formats you should also ask for the ‘originating file format’. So for example even if they have exported the above file formats for you from Illustrator, also ask for the Illustrator (.ai) file and the same if they have used QuarkXPress (.qxp). This way you can be confident that you or another designer/agency will be able to edit or manipulate the logo in the future. As an example say you want to do a promotional video and the video company would like to produce some video animation around your logo. Having the source file would make this much easier.

Sizes
You’ll need to work out specific sizes that you need but in order to get you started make sure you have a good spread of sizes for the bitmap formats i.e. jpg, tiff and gif files. This is because when you scale these formats up or down you will lose quality. So it’s better to make sure the exact sizes you require are created directly from the originating software.

Colors:

• Full color:
  - CMYK ( eps and tiff file formats)
  - RGB (jpg and gif file formats)
• Black and reversed

Also ask for a “Favicon”.  It’s a ‘little logo’ that appears in the corner of the address bar in a Web browser.  It’s a great way to compliment your logo on the Web and it should only take them a few extra minutes to create (in most instances)

Logo usage guidelines
Something that’s extremely useful to have is a set of guidelines for how your logo should be used. This is something you can also ask the designer/agency to create for you. The usage guidelines will cover such information as the exact colors used within the logo, how much white space should be around the logo, which logo to use depending on the background color of the document it is going onto. This way if someone else has to use your logo for example in an advert or on a third party Web site, you can provide the logo (in different formats) and the usage guidelines to make sure they represent your brand correctly.

And when you have all of this...

Don’t be shy! Make sure that it appears on everything possible as familiarity creates trust. Go on - stamp your brand with confidence!