Your website is a source of information about your product. In the hospitality industry that could be your resort, inn, hotel, or rental property. You want your viewer to have a sense of clarity, order and trustworthiness. You can achieve this with type, images and space. Typography creates a visual logic between the written word and the space it is presented in. Shape, size, color and contrast all play a part in what the viewer understands and is drawn to.
Typography for the web differs from the printed page. A person reading a magazine, for example, usually will take more time to read a headline or paragraph to understand the meaning of the type. Lines of text in several columns are generally shorter, smaller and closer together. This is not always true for the web. What is your product? If it is an Inn, the website viewer will decide whether they want to view a rooms and rates page within the first 90 seconds. The style, font, alignment, size, emphasis, color and contrast of your text will play a major role within these first few moments.
First we see shapes and color then the eye begins to pick out more specific information. Images are seen, blocks of text, then maybe a headline. An interested viewer will continue to read the text.
After viewing an image of your beautiful Inn you want to invite the viewer to discover its many distinctive qualities. Using words to convey a message you want to keep the viewer engaged as long as possible. Make it easy and quick to understand.
Contrast
Contrast is the first cue. Type that is a continuous paragraph without breaks or change in font size or emphasis has no structure. Contrast gives the viewer a sense of where to begin and where to end. Create a visual road map with contrasting blocks of text and precise placement. Usually a grid is used to visually balance these
blocks.
White Space
White space is space between elements on a page. Space can make reading text easier and gives the viewer a visual break between ideas or thoughts. It also sets a mood of sophistication and elegance. White space creates balance and harmony.
Fonts
Font. In print some may refer to it as a “nasty four letter word”. If the printer doesn’t have your font they cannot complete the job. In web design the fact that each computer and browser views a font differently is an issue that can be dealt with by only using a few fonts universally. Arial, Verdana, Times, Georgia. All computers should have these fonts. When the first is not available you can choose a second, third, forth, or generic (serif or sans-serif). Specify fonts in order of preference. These fonts will make up your headlines and body copy. Most other decorative style fonts will be images the designer will create in a program like Photoshop or Illustrator.
What you do with that font is critical. Size, emphasis, color and alignment are several ways to manipulate a font. Some fonts are more legible on screen than others. Traditional fonts like times may be easily read on printed paper but screen resolution may distort it. Fonts such as Georgia and Verdana are more suited for screen display. Larger than Times they are visually appealing to the eye and readily understood.
Emphasis
Emphasis may be given to the font. A headline might be bolded to attract the viewer’s attention to a specific topic or area of text. Italicized text attracts the eye because it contrasts with the shape of the surrounding text, stressing importance on a word or group of words within a paragraph.
Colored text may be used to create more subtle subheadings. Very often colored text is a visual cue for a link to another area of a website. Use color sparingly within the body of a paragraph, if at all.
A block of text may be aligned left, right, centered or justified. Left aligned text is used most frequently. Lists are usually presented this way. The reader’s eye is most apt to follow about 3-4 inches of text in a line. By keeping line lengths shorter the reader can swiftly view and comprehend the text and continue to the next line of text.
Kerning and leading are important also. Kerning is the space between the letters. Leading is the space between the lines. A small amount of kerning and leading make text easier to view especially on a computer monitor. The resolution of the monitor makes the letters slightly fuzzy; by separating the physical letters in relation to each other the text becomes more legible.
Headlines and body copy may or may not use the same font. Designers will generally use up to three fonts in one design. A headline could be a serif font combined with sans serif font for body copy or vice versa. A third font may be a decorative type.
CSS
CSS (Cascading Style Sheets) are a great way to ensure consistency of text font, style, and formatting throughout your site. Larger sites that have multiple pages may be a bit confusing to navigate. If the viewer sees different styles of type they could become disoriented, thinking they have left your site. Keep you text clean and orderly with CSS. Review our brief introduction to CSS for more information.
Good typography helps the reader view and comprehend the words that are used to convey ideas. The viewer has been lead through your website one step at a time by the use of shape, size, color and contrast.
The use of images near important blocks of text can also be useful to drawing the users attention to a particular piece you want them to read. When a page loads the user looks at all the images first, then proceeds to read the left hand side, usually searching for navigation if they cant clearly find what they are interested in on that page. If the text they want is there, but they cant find it quick enough, then you either need to rethink your headings or font formatting.
Also another interesting thing is that its not recommended to put images together with text in a box or something that could look like an advert. Users automatically develop ad blindness and may miss something important on your site if they think its an ad.
Thanks for the post. Another thing that I’d like to mention is the importance of vertical rhythm in type and how it affects readability. Not only, but a lot of the time you see people with horribly long vertical text, which is a horror to read. Ah well. CSS3 will be nice with their multiple text columns that flow into each other!