Type on the Web
If text is your message, then your use of text is your tone. Typography is the art and technique of arranging type, type design, and modifying type glyphs. In fact, the aesthetic you create through the use of typography often goes further in creating an atmosphere of professionalism, credibility, and organization than the content of the text itself. This article and next week’s will be focused on helping you achieve better results in your designs by highlighting a few of the many aspects of typography for both web and print applications.
• Room to Expand
Many web designers lay out text in 10 point font or even smaller. Most people are comfortable reading such fonts, but baby boomers make up a huge section of the web-browsing population and a lot of these aging web surfers are going to have their browsers set to display type as large as they can. Will these viewers still be able to read everything, locate links, and so forth? Your text and your design need to be able to adapt.
It is also worth noting that different browsers can display your text in slightly different ways. In some cases these minor differences can make dramatic changes to your design by moving your text to unexpected locations if you are not careful.
• HTML Characters
Some common typographical characters such as quotation marks, bullets, and dashes display differently on the Web. Often these characters must be specially inserted into your text. Reference guides to the HTML characters can be found online, and in many books on web design. Additionally, most web-oriented text editors and WYSIWYG environments have some kind of character palette built in.
If you have Dreamweaver, there is a quick and easy way to convert all your text’s characters and formatting to HTML. First introduced on version 8, the “Paste Special” command in the edit menu will automatically convert your text to HTML.
• Sans-Serif Fonts
Serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols. Serifs date back to ancient times when stone chiselers would use them to align lines of text.
A typeface without serifs is called sans-serif. Sans-serif typefaces typically have fewer curves than serif typefaces and thus display better on screen. It is a good rule of thumb to always use sans-serif typefaces for reading text to increase maximum legibility. However, since IE 7 adapted anti-aliasing, it has become more common to see serifs on the Web.
A very common and effective technique is to pair a serif and a sans-serif typeface, using one for headers and the other for body text. Most often, the serif is used for the headers and the sans-serif for the body text.
• Never Indent
The majority of us learned from our middle school English teachers that the correct way to separate groups of text is to indent the first line of a new paragraph. While this remains the standard for print media, it is greatly frowned upon online.
Instead, the rule of thumb for separating paragraphs on the Web is to use hard returns. A hard return is achieved my pressing the return key once after the end of each paragraph. This will create a full line of blank space between your paragraphs, which can be adjusted using the paragraph formatting in most WYSIWYGs.
• Text Contrast
Pale pink text on a pale blue background might match your t-shirt, but it just doesn’t read well. In order for legibility to be achieved, a certain degree of contrast must exist between the background and the reading text.
Having said this, it is important to remember that computer screens are a projection and thus have much higher black/white contrast than the typical reflective printed page. This increased contrast can quickly cause eyestrain that can cause some viewers to ignore your text. To that end, many web designers prefer off-black type on white backgrounds.
Using white text on dark backgrounds, known as reversed text, makes copy appear heavier than traditional text and thus causes even greater eyestrain. While it can be more dramatic to set headlines in reversed text, avoid using this technique for body copy. If you insist on using reversed text for your body copy, I suggest using a very light gray instead of pure white type on dark backgrounds to minimize its negative effects.
A Cardinal Sin of Typography
• Double Spacing
As a freshman in high school I was required to take a typing class, in which I learned all the traditional rules of typing. Mrs.Bilodeau, who was about 60 years old and had spent more years on a typewriter than a computer, taught the course. One of those rules was that you’re supposed to double space at the end of every sentence before starting the next sentence.
Today, I am here to tell you that not only did Mrs. Bilodeau get it wrong, but so do millions of people every day! Sentences should be separated by just one space.
Double spacing, otherwise known as French spacing, is a common mistake. This is a carryover from printing presses and typewriters that used mono-spaced typefaces. Today’s computers have dynamic spacing that eliminates the need to double space.
Most online marketers overlook the subtleties of typography, but the wise will value the added credibility of their designs and reap the rewards of higher conversions.
Additional Resources
