(208) 475.3192

GET A QUOTE | FAQS

Web design & marketing blog Email or bookmark this page

Straightforward design, marketing and technical advice for making your Website more efficient and productive.

Reach more people   Communicate more effectively   Reduce cost

Understanding Web Safe Fonts

May 26th, 2009

HelveticaA common request we get from clients is that their Website be developed using a specific font (or typeface). Unfortunately the answer is usually “no” . . . in Web publishing there is a very very small set of font choices available for text rendering.

Unlike print publishing, soft-copy (digital based) publishing relies on the recipient of a document to have the same font installed on their system as the designer. If the recipient’s system does not, a substitute font will be used that will cause the document to appear quite different from what the designer intended.

You likely have received a PowerPoint or Word document which when opened had strange spaces, line breaks and page breaks. More than likely, this document looked much better when put together, but the author failed to embed the fonts before sending off the document to your system.

Embedding a font means including the font files within the Word document (or whatever) thus allowing the recipient’s to view your publication with its intended fonts, even if they don’t happen to have those fonts installed on their system.

No embedded fonts for webpages

While embedding fonts is a great solution for insuring design integrity when emailing Word, PowerPoint and Adobe Acrobat documents, it’s unfortunately not an option for HTML coded Webpages. This means that while there are estimated to be up to 100,000 digital fonts (see: http://www.microsoft.com/typography/links/ ) there are only a handful of fonts suitable for body text; fonts that are common to 90%+ of all PC’s and Mac’s in the world. My short list of those typefaces is below:

Windows font name / Mac font name

  • Arial / Helvetica
  • Trebuchet MS / Helvetica
  • Verdana / Verdana
  • Georgia / Georgia

The good news is that deciding which font to use for your Website body text is going to be easier than you thought.

The case for Helvetica (or Arial for Windows)

The Arial / Helvetica combo of typefaces is the de facto standard for professional Web presentation. Helvetica is an icon of contemporary design that is synonymous with professionalism. It’s an undisputed fact that a majority of professional copy is presented in Helvetica typeface (or a close variation). Look at any major magazine, sign, or advertisement; the publications of design leaders like Apple and the New York Design Center; the productions of polished professional brands like Crate and Barrel, Target, Macy’s, or Nike . . . Helvetica is used in their marketing material a majority of the the time. Helvetica is so prevelenat within marketing, it recently became the subject of it’s own full length film.

Helvetica is a great typeface because it so efficiently achieves the goal of graphic design. It provides an unpretentious backdrop of credibility to your unique value message without drawing attention to itself (and thus drawing attention away from your message). Helvetica provides a great “off white” canvas on which your message can be communicated professionally and concisely.

Selectively using other typefaces as graphic elements within your Webpage

While there are only a few font choices for body text, we can selectively create text using other fonts by converting that text to a graphic and then embedding that text as a graphic in a Webpage. With a neutral body font like Helvetica, the “feel” of the featured graphic font is conveyed quite well. For example we can set the font face of headers, menu-items, front page “ads” or call-out text sections in a different typeface.

Steinham Font

Sample Graphic TextI hesitate to say that “any” font can be included with this method into a Webpage. One of the tell-tale signs of amateur design is the inclusion of too many fonts of differing styles. This is fine for personal home pages, Facebook or cottage industry newsletters but if our goal is producing professional grade best-practice publications the rule of thumb is to use as few typefaces as possible and then use those variations sparingly.

Only choose to use an alternate typeface set as graphics if you can articulate the reason this addition would add value to your design and increase the clarity of your value proposition. Graphic rendered typfaces have some downsides, namely they add to the load time of your page and the text within the graphics is not indexed by search engines.

In conclusion

Be aware that unlike other types of publishing, you really don’t have much a of font choice when it comes to the body text of your Website. Unless there is a compelling reason, Helvetica / Arial should be your default choice. The other options listed earlier (Trebuchet, Verdana and Georgia) are also viable options.

Any typeface can be converted to a graphic and included within your Webpage, however this method should be used with caution and in consultation with a professional designer.  If you have questions or comments on this article, please don’t hesitate to share them.

How to Have a Successful Web Design Project (Part 1)

May 6th, 2009

What determines the success (or failure) of a Web development project?

While there are many important factors (both on the client and developer side) there are two all-powerful prime lynchpins that will make or break even the most qualified participants: Perspective and expectations. In this first of two posts I’ll touch on perspective.

Perspective

A Website, even when built with cutting-edge technology and top-tier design, can at best only reflect the real value that your business offers.”

Unfortunately many Web development request for proposals I see are in reality an afterthought or addendum to an already established business model. A common misconception is that a Website or application is some sort of magic accessory that will improve the effectiveness of any business to which it is applied. Revenues down?  Slap up a new ecommerce storefront and watch the numbers climb. New customers declining?  Have your existing Website optimized for search engines and all will change. We refer to this as the Field of Dreams syndrome or the “If you build it, they will come” mentality and it is probably the number one cause of failure and lost effectiveness for Web development projects.

The most essential key to a successful Web development project is not about the Web at all. It’s about defining a competent strategic perspective and then determining the optimal role a Web asset should play within a business’s overall strategic business plan.

A Website, even when built with cutting-edge technology and top-tier design, can at best only reflect the real value that your business offers. Conversely, a high value solution, even when wrapped in subpar quality design and development, can be wildly successful. There’s no better example of this than plentyoffish.com which serves up an antiquated template design, a blurry logo with a tagline too small to read, and a site full of distorted images — all while earning over $10 million of year with only a staff of a few people. Plentyoffish.com focused on the essentials of business and has proved its truly unique value proposition to its market space.  (see And the Money Comes Rolling in, Inc Magazine)

Don’t get the impression that quality graphic design and Web development aren’t important . . . they’re critically important. They just have to be backed up by legitimate value. Very few sites, even those offering stellar value, can get away with sub-par design and features; sites like plentyoffish.com and craigslist.org might but they are definitely an exception. In fact Stanford University reports almost 1/2 of the new visitors to your Website will make an immediate judgment call about the credibility based on your Website’s presentation alone. So, the optimal approach is to first develop a business plan that delivers unambiguously unique value and, second, deliver that value proposition professionally including quality design and Web applications.

So for a client and developer to position a project for success, they need to both commit to intense reality therapy so they can view the project from the same, or very similar, high-level and objective perspective. This can be tough for a number of reasons. On the client side it’s often more than they bargained for and they’re not prepared to invest the time and effort into delving so deep into the soul of their business just for a Web development requirement. They may agree intellectually that it requires a thoughtful strategic approach, but succumb to the “just get it done and off my plate” urgency while fooling themselves into thinking they’ll come back and fix it later.

On the developer side of the coin, it requires a commitment to a deeper type of relationship than that of just a self-interested transactional service provider. The developer needs to define themselves first as a business advisor and secondly a service provider and then only for those services in which the developer can represent themselves as an established expert. It’s only if the developer can truly be objective, and not threatened about recommending 3rd party involvement, that a genuine shared strategic perspective with the client can be reached.

To be continued . . .

Subscribe:

EMAIL:


RSS subscription options RSS[?]

QR tag

Stream our blog on your iPhone—download Bloapp then scan the QR code above.

You are currently browsing the Risingline blog archives for May, 2009.

Recent Posts

Categories

Archives