Typeface - Highway Gothic

One of the most challenging aspects of any design or documentation project is choosing the typefaces. The goals of the project and the target audience must be kept in mind to ensure that the chosen typeface nicely complements the design. For example, the monospace courier typeface, which was designed to simulate the output from a typewriter and is perfect for sample code in an API document, would probably not be an ideal choice for formal invitations. The spacing is too bulky.

Brand-savvy companies often allocate large sums of money to ensure that logos and marketing collateral use a typeface that promotes the company's vision. Technology companies often rely on sleek, futuristic typefaces while traditional companies (e.g. financial and newspaper companies) often rely on exquisite flowing typefaces.

The Federal Transportation Authority, which also spends a considerable amount of money on typeface, must account for more than aesthetic concerns. Safety and readability are primary concerns for transportation officials. This is especially true for the typeface that adorns most of the signs along the United States Interstate Highway System, Highway Gothic. Highway Gothic is a sans serif typeface that was designed for optimal legibility at long distances and great speeds.

This post examines the legibility, readability and "personality" of the Highway Gothic Series E-Modified typeface, which has been used on U.S. Interstate signs for 50+ years. An example of the typeface appears below:



Legibility

A good rule of thumb for determining the legibility of a typeface is to cover the top or bottom half of a word or sentence. If the word or sentence can be easily read by just looking at half of the letters, then the typeface is likely to be perceived as legible. Highway Gothic passes this legibility test. The substantial x-height (height of a typeface's lowercase x) of Highway Gothic coupled with its symmetrical, sharp lines for "straight-line letters" (A,E,F,H,I,K,L,M,N,T,V,W,X,Y,Z) ensure that all letters are easily recognized.

Readability

Readability refers to how easily a line of text can be read. Because Highway Gothic is proportional instead of monospace, the natural appearance and flow of the typeface results in high readability scores. The space between letters ensures that words can be read at great distances. The space within letters, especially the round portions of the "curved-line letters" (B,C,D,G,J,O,P,Q,R,S,U), is generous enough to avoid a sense of constriction or tightness. Also, the generous height of the ascender, which is the distance that letters extend beyond the x-height, has a positive impact on readability.

Personality

Obviously the U.S. Federal Transportation Authority does not randomly select the typeface for road signs of the interstate highway system. For safety purposes, readability in difficult situations (night time driving, fog, rain etc.) was incredibly important. Multiple typefaces were tested, but Highway Gothic was the best fit (although Clearview is slowly replacing Highway Gothic on road signs throughout the U.S Interstate system).

I think the personality of Highway Gothic is conducive to the goals of the U.S. Interstate road signs. The primary goal of the typeface is to relate information (e.g. looking for Trenton? Use exit 42 in ¼ mile), not to appeal to the aesthetics of the reader. I think the clear lines of Highway Gothic emphasize its practical nature. The typeface is straightforward and utilitarian (or workmanlike, if you prefer), not flowing and pretentious.

Independent Bloggers

Hardcopy media, such as magazines and newspapers, require long lead times for formatting and printing. Even though digital publishing solutions have made processes more efficient, daily newspapers require large-scale printing cycles. The print cycles ensure that newspapers will always report yesterday’s news. However, long lead times are partially beneficial. They allow a wide spectrum of content contributors. Reporters write and submit a story, which is then run through a variety of ‘quality control’ stations (editor, proofreader, fact checker etc.) before finally being submitted to a formatter, who finds a home for the story in the pages before printing.

Newspapers have suffered a precipitous drop in revenue throughout the 21st century, primarily because hardcopy delivery mechanisms have been supplanted by the immediacy of online content, including Web sites and the blogs. Although the instantaneous nature of blogs meets the needs of today’s 24-hour news cycle, many individual bloggers are essentially one-person publishing departments. For independent blog owners, many of the content development and ‘quality control’ responsibilities are theirs alone. Independent bloggers are arguably responsible for the following roles:

• Researcher
• Author
• Editorial/opinion
• Editor
• Ombudsman
• Legal/copyright
• Photographer/illustrator
• Graphic designer
• Web programmer

This post describes how independent bloggers take on each role listed above and compares how the blogger’s responsibilities differ from someone else doing the job in a more traditional setting (e.g. a daily newspaper).

Researcher

As with any media that is intended to be consumed either by the general public or a specific subset of the population, valid and reliable information is paramount. The media’s content must have foundation that is based on sound research. In a traditional newspaper setting, staff reporters may rely on interns or stringers to research pertinent information for a story. The reporters then combine that information with their unique style to generate stories. Independent bloggers, who should ideally adhere to the same standards for information, must perform their own research.
Most newspapers have strict policies for conducting research. If the facts of a newspaper story are incorrect, most papers issue post-publication corrections or retractions. Although independent bloggers strive for accurate research, blogs are not help up to the same editorial standards as newspapers. Errors or incorrect information in blogs is rarely retracted, perhaps due to the rapid pace and turnover of blog posts.

Author

In addition to gathering content for a story through independent research, independent bloggers are the sole authors of content that is posted on their site. In order to avoid plagiarism charges, independent bloggers must accurately cite sources or develop original material. Research is often not enough, bloggers must have the ability to distill information into coherent content that is easily digested and understood by readers. In a newspaper environment, authors often collaborate on a story and share the byline when the story appears in the paper. In independent blogs, original content is written by the blogger.

Editorial/Opinion

The blogosphere is often labeled as a democratic voice that stands in opposition to the corporate, shareholder mentality of mainstream media. In other words, blogs give each member of society a platform to voice their opinion and editorialize about almost anything. In order to be well-regarded, blogs must have valid opinions that are backed by facts. The interpretation of facts often causes friction in both the blogosphere and society. Newspapers also publish opinions, but opinion pieces are usually attributed to editorial boards. Editorial boards are groups of editors who dictate the tone and direction of a newspaper’s editorials. Independent bloggers must determine the tone and direction of the opinions expressed on their site. Also, bloggers must ensure that the opinions are backed by a valid interpretation of facts.

Editor

Newspapers often employ editorial staffs to perform content and copy edits on stories before the stories are printed. After an independent blogger writes original content, he or she must edit the material. Writing and editing the same content is often difficult, as I’ve learned from my technical writing career. After content is written, a fresh perspective is often needed to catch typos or formatting/mechanical errors. Independent bloggers do not enjoy the luxury of editorial staffs; they must monitor their own work for errors.

Ombudsman

Many newspapers employ an ombudsman, whose only responsibility is to represent the interests of the public by investigating and addressing complaints against the newspaper. These complaints are typically reported by individual readers. Although one could argue that the nature of an independent blog grants the blog immunity from community complaints, any responsible blogger should take steps to recognize such complaints. What, if anything, is done in reaction to the complaints is at the discretion of the blogger. For example, if a reader complains that a blog post is inappropriate for children, the blogger must act as an ombudsman to first determine if the complaint is valid and second, decide whether or not to delete the offending post.

Legal/Copyright

In today’s era of digital media and litigiousness, strong copyright laws protect the intellectual property of companies and individuals. Corporations, especially in highly technical industries, fiercely protect their intellectual property and confidential data. Corporations, including newspapers, are equipped with well-paid legal teams that monitor the Web for potential copyright violations. If independent bloggers wish to use images or ideas that have been downloaded or copied from the Web, then they must ensure that the images or ideas have not been copyrighted. Copyright violations that lead to litigation, though they rarely occur against independent blogs, can be costly for blog owners.

Photographer/Illustrator

Many blogs incorporate images or graphics to enhance visual appeal. Independent bloggers may rely on public domain images to populate their blogs, but they’ll have to take great care to avoid copyright issues. As an alternative, many bloggers prefer to post original photographs and illustrations on their blog. Thus we may add another facet to independent blogger responsibilities, photographer and/or illustrator.

Graphic or User Interface Designer

Corporate Web sites have large staffs of graphic designers, who dictate the look and navigation scheme of a Web site. Graphic designers may collaborate on the layout, color palette, and overall usability of a Web site. Many of these designers are specially trained in color schemas or usability, leading to visually appealing, expertly designed Web interfaces. Again, independent bloggers singularly decide on their blog’s color scheme and general layout. A blog may contain some informative content that is relevant to a large number of potential readers, but still fail if it is poorly designed.

Web Programmer

The HTML code, Content Management System and software that power most blogs will eventually have problems. The problems may be limited to certain browsers or scripting environments, but software issues will certainly appear throughout the lifetime of a blog. Independent bloggers do not have an IT staff to troubleshoot problems when they appear. Instead, bloggers must spend their own time isolating and fixing the issue to avoid blog downtime.

Video Design

Video provides designers with the opportunity to showcase a variety of visual design principles. Static media (such as single-frame digital images, painting, photography etc.) also allows designers to couple images with design principles, but the dynamic, multi-frame nature of video allows the principles to be combined in a variety of unique combinations throughout a single work.

This post will explore the design principles present in the "The Hoaxer's Door" video, which is embedded below:




My first impression of the video is tied to the typography and background, which nicely complements the theme of the video. The theme centers around a secretive hoaxer, who repeatedly reports phony emergencies to 999 (England's 911 equivalent). The calls are placed purely for entertainment value, as the hoaxer delights in covertly watching police, firemen and ambulance crews respond to his phantom emergencies. The hoaxer's anonymity is a critical aspect of the video's theme. The typography, texture and background color of the video reflect this anonymous, secretive theme. The mismatched/random font style and size, along with the stark white background and black vertical margins, bear a striking similarity to the stereotypical ransom notes that appear in movies (e.g. each character in the letter is individually cut from a magazine source and pasted onto a piece of paper to form a letter from an anonymous, untraceable author).

Despite the mismatched font sizes, which typically result in text that is difficult to read, the content is surprisingly readable. I attribute this to the rhythm of the video. As the video runs, some of the text appears one letter at a time while other text appears simultaneously as entire blocks of content. However, the intervals between frame changes and lack of background noise (e.g. the focal point of the video is always the text) creates an agreeable rhythm that allows the reader's eye to quickly scan and process the text.

The video uses words (and only words) to tell a story; text is the primary vehicle of the video, so the video is not cluttered with unnecessary images that would draw the viewers eye away from the text. Also, the color scheme is consistent. Color is used to enhance readability rather than distract from it. Black text on a white background is used throughout the video, but the use of color behind certain letters provides a nice aesthetic contrast.

The video is unified by a simple design, with text at the foreground and judicious use of white space providing a simple background in each frame. Again, this nicely complements the text-based focal point of the video.

Target Audience Ages and Website Design

Web design collateral often emphasizes that an audience analysis is a critical first step when developing or re-designing a Web site. Designers may plan, develop, and implement an elegant site, but the site may not draw traffic or founder if it does not satisfy the needs of its target audience. Audience analysis ensures that Web designers fully account for the goals of the site and select a layout/style that caters to the target audience.

Audience analyses are typically produced as part of the Web development process, but this post will perform a partial audience analysis on two existing Web sites. The analysis will focus on the age of the site’s target audience.

• http://www.noggin.com/ is the Web site for the Noggin cable television channel. Noggin concentrates on preschool programs and features original series. The target audience for the Noggin Web site is young children.
• http://www.guinness.com/ is the Web site for Guinness beer, which is a dry stout brewed in Dublin, Ireland. The target audience for the Guinness Web site is adults who are of legal drinking age (21+ in the United States).
  

www.noggin.com

The site also shows evidence that certain pedagogical concepts were incorporated into the design, such as visual and auditory learning. The visual layout of the Noggin site is certainly tailored to the target audience. A pastel color scheme with large fonts and graphics immediately grabs the attention of young children. Young children do not have fully-developed attention spans, so Web sites that target them should not include long paragraphs of text. Instead, movement and activity maintain the interest of young children. The Noggin site correctly favors playful graphics over text. Most of the graphics are animated on mouse-over, which adds an element of interactivity. In addition to visually appealing graphics, the site offers audio clips. When users drag the mouse over the character graphics, the characters “speak” to the users. Although the ideal learning situation for many young children is kinesthetic/tactile (see the popularity of Play-Doh and finger painting), such interactions are not possible on the majority of computers (discounting touch screens). Instead, the site does a great job of providing the type of audio and visual interaction that children enjoy.

The screenshot below includes some text boxes (left side in black font) and pointers (red arrows) that show the auditory and visual features of the Noggin homepage:





Since the Noggin site is for a revenue-generating television station, a valid observation is that the goal of the site is not truly educational. The goal of the site is to promote the Noggin brand and the characters that appear on the channel’s programs. The goal of users, most of whom navigate to the site with the help of their parents, nicely complements the goals of the site (e.g. most users want to see and learn more about the characters from their favorite Noggin programs).
I do think that cultural aspects play a large role in how the Noggin site is perceived by users, primarily because the Noggin channel is based in the U.S. Children from other countries, where televised entertainment perhaps does not play a prominent role in their lives, may enjoy the site, but would lack a reference point for the content.




www.guinness.com

The Web site for Guinness beer is restricted to adult audiences (or at least to adults who are of legal drinking age). This restriction is designed into the site’s initial page. The initial page includes an age check to (supposedly) ensure that users can legally purchase alcohol. Because the site must consider international users where legal drinking ages vary, a country-specific drop down box is provided. See the screenshot below:






Most users visit the site to learn about the history of Guinness, view special promotions or purchase merchandise. The target audience, as with most alcohol advertising, is young people between the ages of 21-35, depending on legal drinking age. When the site does attempt to convey information, it uses learning styles that complement the target demographic. Flashy graphics and visuals are favored over text. The layout and color scheme of the site is very modern and sleek, including a nifty interactive timeline about the history of Guinness beer (see screenshot below). Clearly, the site favors the visual over the verbal.







The roles and goals of potential users are fairly straightforward. Users are interested in learning more about the product promoted by the Web site. A certain number of users visit the site to purchase Guinness merchandise. The site does a reasonable job of accommodating shoppers, but merchandise is not the focal point of the site. If the site designers wanted to sell more merchandise, they could include prominent pictures of the merchandise on each page of the site. Instead, merchandise marketing is relegated to specific pages only.

Corporate Blogs

The generic term ‘corporation’ often gets a bum rap. When the term is preceded by a modifier, such as Campbell Soup Corporation or Adidas Corporation, people naturally project their thoughts and opinions (positive or negative) away from the term itself and towards the product that the corporation produces (e.g. “Campbell makes tasty, but salty, soups” or “Adidas makes comfortable sneakers”). Right or wrong, the standalone term ‘corporation’ is often vilified in pop culture as a litigious, profit-driven entity whose concerns do not extend beyond shareholders to the average citizen. Even Teddy Roosevelt noted that:

"Corporate cunning has developed faster than the laws of the nation and state. Corporations have found ways to steal long before we have found that they were susceptible to punishment for theft."
-Teddy Roosevelt in the New Haven Register 1909.

In a small-scale effort to modify public perception, many corporations are embracing blogs. Blogs provide an accessible face to corporations that are often viewed as faceless and impenetrable to outsiders (the reflective, black panel skyscrapers that house many corporate headquarters don’t help). Corporations are finding that blogs provide an immediate communication path between employees and customers, resulting in usable feedback from both sides. However, in order to maximize return on investment, corporations must employ a well-designed blogging strategy.
This post will leave descriptions of blogging strategies to the experts and consultants; instead the post will examine two existing corporate blogs (Intel and Turkey Hill Farms).

Intel
(http://blogs.intel.com/)

A Google search reports that Intel supports many blogs. http://blogs.intel.com/ is one of many sites that targets Intel’s vast customer base, with special bloggers who write for small, specialized audiences. Each post is tagged according to content, allowing readers to subscribe only to posts that interest them. For example, several of the posts carry the ‘multicore’ tag, which informs readers and subscribers that the contents of the post involves multicore processor technology.

According to the ‘About this Blog’ description page (http://blogs.intel.com/about), the page is a portal for several blogs that are authored by researchers and technology experts who share their opinions on industry trends and invite feedback from customers with questions about Intel technology.

Length of entries varies, but most posts are between 100-300 words. Posts are succinct, but long enough to explain concepts. Various studies show the most successful corporate blogs include postings that are not too verbose. Epic posts are rarely well-received by readers of corporate blogs.

The blog is easy to read and navigate due to an efficient use of white space, clean lines and readable fonts (Verdana, I think). The blog employs a consistent navigation bar, a search box and timestamps for each posting. A separate text box highlights the most popular posts (based on the number of comments).

The blog projects an overall corporate image of efficiency and clean design, perhaps due to the visually appealing, consistent use of colors along with judicious use of graphics. The intent of the blog is to facilitate dialogue between Intel employees and customers. The exchange of information is text-based and the blog designers did a nice job recognizing this and not cluttering the page with unnecessary graphics and avatars.


Turkey Hill Farms
(http://icecreamjournal.turkeyhill.com/)

The intended audience for the Turkey Hill blog is ice cream lovers, not necessarily those who are completely loyal to the Turkey Hill brand. In addition to plenty of marketing content about Turkey Hill, the site also includes some general interest content about how ice cream is produced.

The stated goal of the blog is to gather a collection of whimsical thoughts and stories about ice cream, particularly the Turkey Hill brand of ice cream. Turkey Hill Farms is located in Lancaster County, Pennsylvania. The blog also promotes Lancaster County tourism, including attractions other than the tour of Turkey Hill farm.

The site encourages comments on each post and often prints email responses to posted stories. The site must draw a surprising amount of traffic, as many of the posts include between 20 and 100 comments (“I scream, you scream, we all scream for ice cream” indeed). Episodic posts also include information about how ice cream is made, including Q+A sessions with a Turkey Hill food scientist where readers supply the Qs and the scientist supplies the As.

The average blog entry is 2 or 3 short, easily digestible paragraphs. The goal of the blog is to promote Turkey Hill ice cream in consumer-friendly ways. I think the site is a nice mix of lighthearted posts and interactive polls.

The design uses a clean, organized layout. Many of the posts are supplemented by cartoonish graphics and photographs of ice cream, which enhance the blog’s theme. Navigation through current and archived posts is easy, as are contact links for Turkey Hill farms. An interesting link of other ice cream blogs is a nice feature.

The site projects an overall corporate image of family friendliness and responsibility. Questions may be submitted and seem to be answered in a reasonable amount of time, showing that Turkey Hill Farms has invested the staff and capital required to maintain an active blog.

Launch - September 2008

Greetings from the first post to the Tamarack Tee Technical Writing blog!

The blog will contain original posts about technical communication and elements of visual design, including typography, color theory, user interface design etc. I will also post some FrameMaker or FrameScript topics, as I am currently designing FrameMaker templates in support of an upcoming product launch.

That's all for now.