Here’s a quick rundown on how to use type like a pro on your website.

Typeface selection

There are five web-safe fonts that work on most Mac and Windows browsers. Here are the reasons you might choose one over the others:

Alignment

The appearance of type on your web page can change depending on the device, browser, screen resolution, and personal settings. Use left alignment instead of justified text for the best readability. When the browser justifies text, it inserts space in between words that cause the reader to pause or stumble when reading. Although you might end up with a ragged right edge when using left aligned type, it is still more readable. To help reduce the ragged right edge, put spaces before and after dashes so the browser puts the words before and after the dash on two lines if needed.

Column width

If your columns are too narrow, you break up your sentences into too many pieces, which slows down reading. If your columns are too wide, it is hard to move your eye from the end of a line to the beginning of the next line and you can get lost. Ideal line length for the web is approximately 12 words or 66 characters, however if a user changes the browser’s default font size, the number of words that can fit in a column changes. It’s best to use a measurement that changes depending on the font and size, such as an “em,” which is the width of a capital “M” in any given font. Setting the column width to 30 ems usually gives you the optimal column width no matter the type size.

Color

If you emphasize everything by using colors, you end up emphasizing nothing. Use colored type sparingly, only where it will help guide the reader, for example on subheads to help readers skim for the information they want. Don’t rely on color alone to convey information in case someone who is colorblind is looking at your site. Bold or italicize your type in addition.

Backgrounds

Use enough contrast between the background color on the page and the type. Colors that are too close in darkness are hard to read. Don’t put type on complex backgrounds or images with a lot of contrast or it will be difficult to read.

Smart punctuation

Professional typographers always use typographically correct punctuation on the web, including “smart” quotes and apostrophes, em and en dashes, and ellipses. Don’t use inch and foot marks, hyphens, and triple periods when you can use the real punctuation.

Amateur moves

These are web design choices that will instantly mark you as an amateur designer:

- Use of non-web-safe fonts
- Justified type
- Columns that are too narrow or too wide
- Too many colors
- Background color that’s too close to the text color
- Inch and foot marks, hyphens, and triple periods
- Two spaces between sentences
- Writing in all caps

Hopefully, this information has given you ideas about using type to strengthen your own website. Following basic rules of good typography can help produce professional-caliber results.

1. Use QR codes on printed pieces:  “Quick Response Codes” do just what they say. A user views the QR code on an ad, poster, or the back of your business card using a smartphone app and the smart phone’s browser takes them quickly to a page on the web. Provide a relevant, meaningful, beneficial experience when a mobile user gets to your landing page through a QR code:

• Direct the viewer to a mobile-optimized version of your website.
• Show a digital business card including a photo and bio.
• Let the user RSVP to an event.
• Show a video or play audio.
• Show a case study or portfolio.
• Give an instant discount.
• Let the visitor sign up for a loyalty club.

Whatever you present should be a worthwhile and robust experience. Too many QR codes lead to a home page on a website with no special “bonus” for the QR viewer. And, track results by using custom QR codes for different programs to easily analyze the effectiveness of your QR codes.

2. Personalize it: Including a personalized URL (PURL) on a printed direct mail piece (or email) is a great way to get users to visit a site optimized just for them. Make sure when recipients take the time to type in the PURLs, that you have personalized their landing page. If you’re asking them to sign up for something, pre-populate the fields with their information and tailor images and your offer to their needs. This type of direct mail is highly trackable, and using PURLs can double your response rate on direct mail.

3. Do one-on-one social media marketing: With the cost of short-run digital printing falling, it’s possible to create highly personalized, hyper-targeted pieces to interact with your fans/followers on your social media sites in the real world. Consider asking for addresses from your loyal fans, and mail something valuable with a request for a follow-up. An example of a successful piece by Jeff Becker of ClientsFirst.com was a box customized with a PURL and personalized graphics containing iPod headphones and offering an iPod if the recipient would sign up for a one-on-one meeting with a company representative. The piece drew a 22% response rate and the business generated more than paid for the cost of the program.  In a Baylor study, marketers got a 75% increase in response rate by mailing something that was bulky or in a box.

Although print is not as big a marketing tactic anymore, make the most of printed pieces to integrate your offline and online marketing. Creating a campaign that incorporates both print and digital design can improve response rates and offer engaging online user experiences.

Our client’s challenge:

Opus Solutions’ client, Good Technology, needed eye-catching materials to promote a corporate rewards program. The client sought a colorful set of materials aimed at building excitement for this sales incentive program, which would include all-expenses-paid accommodations at a luxurious resort in Puerto Rico.

The Scott Design solution:

Using imagery provided by the resort, Scott Design created colorful and elegant President’s Club promotional materials. Those pieces included a mailer, letterhead, and full-size, colorful posters.

The goal of an effective banner ad is to get a qualified click on your ad. Creating banner ads that get results is easy using a formula developed by MarketingExperiments.com:

ea = 2at + i + as

This formula for creating an effective ad (ea) is based on three objectives: attracting attention (at), generating interest (i), and asking for the click (as).

Attract attention:

In order to attract attention, your ad should stand out from the page and other ads on the page. This can be achieved through a difference in one or more of the following:

• Size: Larger ads have more visibility.
• Shape: A unique shape or irregular edge can help your banner ad stand out.
• Color: Make sure the colors used in your banner ad are different from other banners and the overall page color.
• Motion: Consider animating an image (not text) in your banner ad.
• Position: Be sure your ad is in a prominent spot on the page to get better results.

Getting attention is the most important part of successful banner ad design, so it’s multiplied by two in the equation above. But use these attention-getting tactics judiciously: If you emphasize everything, you emphasize nothing.

Generate interest:

Once you have someone’s attention, you need to build interest to make your customer decide to click on your ad. Your ad needs to answer the question for your ideal customer, “Why should I click on your ad instead of doing something else?” Your value proposition and the interest it generates depend on the following:

• Appeal: Your offer should be attractive to your customers.
• Exclusivity: You should offer something no one else offers or for a limited time.
• Credibility: Any claims you make and images you include should be understandable and believable.
• Clarity: Be clear and concise so your customers can understand your offer.

Ask for the click:

Make sure that it’s clear what you want your ideal customer to do when they see your ad, and match the “ask” to optimize the number of qualified clicks:

• Implied or direct ask: Decide whether your customer would respond better to a direct ask, such as “Order Now,” or to a more subtle ask, such as “Learn more.”
• Decision stage of viewer: Match your offer to where the customer is in the sales cycle. Someone just starting to learn about your offer might be more interested in a brief introduction to your product, while a late-stage buyer might be willing to watch a 15-minute product demo.
• Tone: Match the tone of your request to your audience and what you’re asking them to do once they click.
• Level of authentic urgency: Your statement of urgency should be honest. Say “While supplies last” if you have a limited supply, or add a deadline if the offer will run out after a certain date, but don’t include misleading or dishonest information about your offer.

You can learn more about this easy formula by watching the MarketingExperiments.com webinar on Banner Ad Design.

Personal preferences

A 2011 poll of color preferences according to gender yields more information useful when designing your website. In the first 1083 results of this ongoing survey, both men and women selected blue and green as their favorite colors, but while purple was the third-most favorite color among women, purple was the third-least favorite color among men. Differences also come up depending on age, so the color palette you choose for a site geared to children might be quite different than one designed for older adults. What’s your favorite color? Take the one-minute poll and after you vote, you can see the latest worldwide results of this color preferences survey.

Color Harmony

Selecting a palette of colors that work together is part art and part science. After you select a principal color for your site, you can actually use color theory to select the color combinations that work together, using analogous colors, complementary colors, or a color triad. More about color harmony»

Color Deficit

Color blindness occurs when there is a problem with certain nerve cells of the retina. In the most common type of color blindness, a person has trouble telling the difference between red and green, but some people have trouble seeing blue-yellow colors, and in the most severe form of color blindness, a person cannot see any color. About 8% of Caucasian men, 6% of Asian men, and 4% of men of African descent have some form of color deficit (very few women do). But, as anyone ages, changes in our eyes can cause blue colors to appear darker, making it difficult to distinguish between red and purple or green and blue. To make sure your site is user-friendly to everyone, don’t rely on color to convey information. Use shape, size, labels, textures, and line shadings instead. More about color blindness»

Cultural Differences

Certain colors have different meanings depending on the culture you grew up in, and colors can send the wrong meaning if misused on your website. For example, if you were creating a wedding site for U.S. audiences, you might use a lot of white, which in western cultures is used for brides, angels, peace, etc. In some eastern cultures, white is the color of mourning and funerals, whereas red is the color for good luck and celebration, and is worn by brides. More about color in different cultures»

Color trends

Colors go in and out of style over time, including colors used in website design. Often these color trends come from the fashion and decorating worlds, and a great way to see what the future color trends will be is to check out the seasonal Pantone fashion color reports. These reports show the colors that textile designers will be using in their upcoming collections and incorporating them in your web design can put you ahead of the pack. Remember that in fashion, one week you’re in and the next you’re out, so design so it’s easy to update colors when the next season’s looks hit the runway. Pantone spring 2012 color forecast»

You

Of course, all these rules are trumped by the specific needs of your website. If your products are ecologically friendly, you might want to use a lot of green on your site. Selling coffee? Then brown might make sense. Trying to attract a Fortune 100 audience might call for a lot of blue. Testing different colors, asking your customers, and refining your color palette is the only way to know what colors work best for you.

What’s YOUR favorite color?

Take a one-minute survey and let us know what your favorite and least favorite colors are, plus take a look at what others around the world have said so far. Click here to take survey»

Scott Design earned a Gold Davey Award for its work on an Amazon.com application that helps Adobe customers select the best products for their needs. The Adobe-Amazon.com Product Selector is hosted on Amazon.com in the Adobe Store.

Scott Design received a Silver Davey Award for the Santa Cruz Chamber of Commerce website. The redesigned site has become the trusted source for information on local Santa Cruz businesses, services, news, and resources.

The Davey Awards competition is sanctioned and judged by the International Academy of the Visual Arts, an invitation-only body consisting of top-tier professionals from media, advertising, and marketing firms.

Scott Design received a Silver Award in the 2011 W3 Awards competition. The W3 Awards honor outstanding websites, web marketing, web video, and mobile apps created by some of the best interactive agencies, designers, and creators worldwide. Website entries were judged on creativity, usability, navigation, functionality, visual design, and ease of use.

Scott Design was honored in the Innovative/Experimental Media category for its work on the Adobe/Amazon.com Product Selector app.

The 2011 W3 Awards generated more than 3,000 entries from ad agencies, public relations firms, interactive agencies, in-house creative professionals, web designers, graphic designers, and web enthusiasts.  The W3 Awards are sanctioned and judged by the International Academy of the Visual Arts, an invitation-only body consisting of top-tier professionals from media, interactive, advertising, and marketing firms.

For the latest information about Scott Design’s recent awards, visit our Design Awards page.

Our client’s challenge:

The Santa Cruz Chamber of Commerce had a long-term goal of redesigning and reorganizing its outdated website to better connect the Chamber businesses with the people who work, live, and visit Santa Cruz. The Chamber sought a new logo and brand identity that incorporated both the history and modernity of this local institution. New exciting and creative risks are taking place within the organization and the Chamber wanted to capture the spirit and imagination of its membership, and deliver more member benefits and results than ever before.

The Scott Design solution:

Scott Design redesigned the entire Chamber branding, from the logo to the website to the e-mails, and gave collateral a fresh, upbeat look. The site was updated to include new functionality, a cleaner navigation, and valuable SEO-optimized content. The site has become the go-to source for local Santa Cruz business news and resources, with visits to the site and page views more than doubling since the previous year. The new website, e-mail campaigns, and collateral have all helped attract new members.

Awards:

• Outstanding Achievement Interactive Media Award  — Non-Profit Website
• Award of Distinction, Communicator Awards — Association Website
• Silver Davey Award — Association Website
• Bronze Award, Horizon Interactive Awards — Non-Profit Website

Our client’s challenge:

Genesis Creative Group’s client, Network General, needed to put together materials to promote a corporate awards program where high-performers won a trip to Costa Rica. Imagery would need to be repurposed for use in a variety of online and printed materials.

The Scott Design solution:

Scott Design created colorful Network General President’s Club event materials featuring the natural beauty and adventure sports of Costa Rica. Deliverables for this high-profile incentive program include the concept and artwork, e-mail templates, banner ads, stationery, an animated screensaver, and a full-color printed brochure to introduce the campaign.

Awards:

Silver Award, Silicon Valley ADDYs — Special Event
Silver Award, Summit International Awards — B2B Print Campaign
Silver Award of Distinction, The Communicator Awards — Internal Communications

Our client’s challenge:

LogLogic sought an overall rebranding, including a redesigned website, to more effectively promote its market leadership in Log Management and Intelligence. Beyond requesting a fresh, innovative look, easy-to-use navigation, and well-organized structure, site requirements included worldwide appeal to Enterprise and Mid-Market audiences and the inclusion of customer and partner video testimonials.

The Scott Design solution:

Scott Design developed a new web design and site organization that incorporated the vibrancy of a consumer site with the structure of an enterprise site to accurately present LogLogic as an innovative, fast-growing company and to help site visitors find information quickly. Scott Design also developed an online Flash demo to highlight product features and benefits. The content enables visitors to understand the LogLogic story in minutes and encourages them to dive deeper to learn more.

Awards:

• Award of Distinction, The Communicator Awards—Computer Hardware
• Silver Award, Silicon Valley ADDYs—B2B Website
• Bronze Award, Horizon Interactive Awards—Business to Business
• Silver Award, W3 Awards—Best Structure and Navigation
• Silver Award, W3 Awards—Computer Hardware
• Silver Award, Silicon Valley ADDY Awards—B2B Interactive Media
• Bronze Award, Summit International Awards—Product Demo
• Silver Award, Horizon Interactive Awards—B2B Website
• Bronze Award, Horizon Interactive Awards—Flash