Web Shop Design: Font Fantastic

Fonts are the core of your site design, so using them wisely is critical. We show you how with tips and tricks for creative — not cluttered — results.

Fonts have personalities of their own and are used as decorative elements to convey a certain look and feel for products and businesses. When employed appropriately, they can be used to reinforce your message to your customers. So, for example, lawyers and doctors use conservative fonts to indicate their professionalism and graphic designers and artists use fancy fonts that reinforce the idea that they are creative people.


Editor's Picks
» Eight Photoshop Tips for Product Shots

» Picture Perfect: Blinging It Out on eBay

» Take Better Photos, Make More Money

» Prepping Product Shots for the Web

» Product Shots that Pop: It's Not About the Pixels

» Time is Money: Batch Editing Photos

However, what works in print doesn't always translate to the Web. And, with so many to choose from, using fonts on your Web site isn't as simple as it might first appear. Nothing turns off a potential customer more than arriving at a Web shop that is cluttered with clashing, hard-to-read fonts. I'll show you how to select fonts that match your Web site's message and tone and explain some issues peculiar to using fonts on the Web.


Fonts with Personality
Whatever it is that you are selling, the fonts that you use to create your logo and decorate your Web site say a lot about your product. It's important to match the fonts that you use to what it is that you want to say to your customers. For example, elegant script style fonts work well for all things wedding related, while gothic fonts are very 'in' right now for alternative arts. Use the right font and immediately your audience knows a lot about your business — mix these up and you confuse your visitors with mixed messages about who you are.


The example image shows how the personality of a font conveys a certain message about the business with which it is associated. In the top box are four fonts used for text logos for four businesses. None of these fonts are a good match for how we traditionally think about these businesses. The lawyers' names are too flowery, the wedding font looks scary,

Font Design
The fonts used in the top box have personalities that clash with the businesses they're describing. Those in the second box look more appropriate.
(Click for larger image.)

the tattoos look silly and the childrens' fashion looks too conservative.


However, if you rearrange the fonts so they better suit the four businesses, then it all takes on a much more appropriate look. The font that looked scary for a wedding works just fine for a tattoo business, the lawyers look like lawyers and the wedding business looks just as we expect it to. The font for the childrens' fashion business gives a youthful feel to the logo.


It's all about understanding who your market is and creating a look reinforced by the choice of font face and color that speaks to your market. If you're interested, the fonts are, from the top: Skeksis, Sybil Green, Chopin Script and Engravers MT.


Lost in Translation: Fonts and the Web
So now you understand how to match the font with the type of business and your clientele. How does this translate to the Web? The answer is: not very easily at all.

There are constraints in Web design that limit the fonts that you can safely use on your Web site. The problem is that when you create a page, the HTML code on the page is interpreted by a visitor's Web browser.

This means the page is rendered by the Web browser on your visitor's computer, so any fonts specified in the code must be available on your visitor's computer for them to be able to see the fonts on your page.

Font Design
Core Web Fonts.
(Click for larger image.)


If you use a special font, for example, one that you have purchased, it is unlikely that many — if any — of your visitors will have that font installed on their system. The result is that their browser will substitute another font for the one they don't have and your page won't look the way you designed it to look.


There are only a handful of what are commonly called Core Web Fonts, which are fonts that are generally contained on most computer systems.

Core Web Fonts include Arial, Arial Black, Courier New, Georgia, Times New Roman, Verdana and Trebuchet MS.

Some other fonts, such as Lucida Sans and Comic Sans MS, are often identified as Core Web Fonts but they aren't as universally available as the other fonts. Webdings, a font full of dingbat characters, is available to many users but not all.



(Continue to Page 2 for Basic Font Selection Tips and How to Use Fancy Fonts)


Comment and Contribute
* Required Field
Your email address will not be published

Note: No advertising, no spam, no keyword in name/nickname field. Thank you!

Free Resources

  • eBook
    Mythbusting the Beliefs of DDoS Protection Today's DDoS attacks are an easy way to interrupt businesses. From holding a website hostage for a ransom, to blocking access to an application to...
  • eBook
    Office 365 Adoption eGuide Microsoft made a massive push to the cloud in 2014, and as a result Office 365 is taking off. However, Office 365 is unlike any other cloud app in...

Subscribe To Our Daily Newsletter