Hints and tips for the styling and layout of your text content

With the vast amount of text being posted online and via social media these days I thought it would be beneficial to share this very brief tutorial for how (and how not) to style all that great stuff you’re sharing online. These tips apply anywhere you might post text—whether it be in one of our content management systems, WordPress, Facebook, Blogger or even old fashioned MS Word, these simple design principles will help insure your message gets the credibility that it deserves.

1. Learn to use <shift><enter> (Windows) or <shift><return> (Mac) to insert line breaks with no vertical spacing. This practice helps insure you maintain close proximity of related content and greatly aides in readability.
   People often just hit <enter> between lines of text which adds awkward and undesirable vertical space.

   Example using <shift><enter>	Example using <enter> only
   My mailing address: RisingLine 111 S. Broadway St STE 101 Boise, ID 83702	My mailing address: RisingLine 111 S. Broadway St STE 101 Boise, ID 83702

2. Don’t change typefaces (fonts). In fact you cannot change fonts/typefaces in our CMS text editor but many other text editors allow you to do so. The typefaces for your Website are specified in a single Style Sheet that was developed specifically for your site and insures consistency across all pages of your Website. Consistency in the presentation of your content is a cornerstone of good design.
3. Don’t change typeface colors. For a professional consistent presentation of your content the colors are controlled through the Style Sheet. Emphasis colors (such as the color of your hyperlinks) have been selected by your professional designer specifically to harmonize with the color palette of your Website.
4. Use the "font size" selector very very sparingly. Avoid at all costs using the "font size" selector to increase text size. This practice will invariably create inconsistent and amateur rendering of your content which cannot be controlled from the central style sheet. The only reason we retain the font size selector is for those rare occasions where a line of text needs to be reduced in size.
5. Avoid using "U" Underline to emphasize inline text. People will think the underlined text is a hyperlink. Rather use the "B" (Bold) or "I" (Italic) icons to emphasize a word or sentence.
   

   For professional and consistent presentation of your content…
   Do	Do Not
   News and Announcements We are extremely pleased to announce the opening of our second storefront in the beautiful city of San Jose, California. Please join us for our grand opening on April 3rd.	News and Announcements We are extremely pleased to announce the opening of our second storefront in the beautiful city of San Jose, California. Please join us for our grand opening on April 3rd.

6. Use the "Format" selector to change heading text size and create a logical hierarchy of content. Using this method allows consistent presentation for your site which is controlled by the Style Sheet.

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. Some time ago I made a blog post on perspective, in this second of two posts I’ll discuss expectations.

Expectations

Success in almost any transaction or relationship is determined by establishing and meeting a set of shared expectations between parties. A $3 meal at a McDonalds can be just as successful as a $200 meal at a Smith & Wollensky Steakhouse. The same degree of success can be realized at both regardless of the vast difference between a dedicated waiter serving dry-aged prime beef and a mass produced sandwich handed to us in a crumpled paper bag. It’s all about us getting what we expect.

When a client and developer view a project from a shared perspective, setting expectations is the natural progress of collaboration. Without the collaborative systematic development of a set of shared exceptions we risk orchestrating an iPod dance party. Both parties may participate but they’ll each be in their own world and when the music stops they will have completely different perspectives from which to determine success.

Developing a shared perspective is the responsibility of the developer and starts with listening, interrogating really (in a nice way, without the light), to the client and extracting the core business goals of a project, the details of the client’s unique value proposition, the needs and profile of their customers and other such vital information.

Provocative and challenging questions should be presented to the client in this stage to help them gain an outside perspective and the developer needs to be willing to adjust their biases so that in the end there is an unambiguous meeting of the minds about the project goals. In addition to the primary goals, there are many technical parameters that need to be discussed and agreed upon including development environments, creative parameters, branding continuity, etc.

After goals and requirements have been collaboratively determined, the developer is responsible for drafting a formal systematic development process that articulates the specific developer tasks that will be provided to meet those goals, and establishes a work-flow time frame for project completion.

All of this is not that profound or new. It’s really just common sense. But from my observation, the temptation is often great to gloss over a formal development of a shared perspective and expectations. It’s usually in the context where the client and developer develop good initial rapport and feel confident that they’re “on the same page.” Feelings are great but Web development projects are too complex and expensive to rely on luck for success.

A 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.

I 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.