Being Creative by Example. Typography | WebReference

Being Creative by Example. Typography


Another aspect where artistic sites are often strikingly different from untutored business sites is the typography, that is, the choice and use of fonts.

Most people's notion of the art of fonts is simple and, at a first glance, quite reasonable: For headings and logos one may employ decorative or stylized typefaces, while body text, to avoid distracting the reader, should be limited to conventional serif and sans serif fonts such as Times or Helvetica.  In a way, this is true;  but no less true is the fact that when a font is believed to be dull and unimaginative, it behaves exactly so.


Link 4:  typoGRAPHIC: Simple fonts that really stand out
No wonder, then, that what often sets apart a work of a professional designer is creative use of basic typefaces.  It's not easy to find an "artistic" site with headings set in something but a plain sans serif or serif font.  For an example go visit typoGRAPHIC, a beautiful educational site which is very instructive in its tasteful use of fonts.  

 Of course the word "plain" should be used with quotation marks here.  Even the ubiquitous Times that is considered boring by nearly everyone is actually no more plain or simple than Mona Lisa's smile.  Every typeface which is in wide use now has its own unique soul and deep roots in the history of typography, and to reveal this soul requires a lot of insight and training on designer's side.

Typography is probably the most esoteric of all visual arts.  So the only advice I can give you regarding the choice of fonts is to spend as much time as possible experimenting with fonts, reading about them, and meditating on the best examples of their use by others.  If you don't yet have much expertise in this area, you should practice reserved approach and suppress the temptation to use "cool" fonts.

An interesting font-related issue is the usage of lowercase and uppercase letters.  In headings, buttons, etc. (but not in body text) the all-uppercase style may look nice, but it usually requires the font to be rather small in size (an example is the navigation bars at the Verso page).  Or, you may arrive at the same point from the opposite direction: small font size favors using all-uppercase.


 All-lowercase is more controversial.  Although this style is now definitely heading for the design mainstream, on the Web its use is still restricted to sites that wish to emphasize their artistic ingenuity.  Even there, the style is seldom applied to body text, but restricted to heading graphic and/or navigation buttons (Cooltype is a typical example).
Link 5:  Cooltype: Succumbing to the all-lowercase temptation in a sensible way

 To better understand what underlies different letter case styles, an analogy with voice tone may be useful.  A sentence with one initial capital and full stop at the end sounds as if it's pronounced in plain, affirmative, narrative tone.  If you capitalize initial letter of every word ("newspaper style"), the same phrase attains a more declarative, self-confident, "advertising" tone, which is now often considered old-fashioned if used for anything but company names or book titles.

A sentence set in all-caps sounds extremely intrusive and irritating (it is often compared with loud shouting).  However, if we use it only for single words and decrease font size as suggested above (i.e. "turn down the volume knob"), irritating effect is gone and the style reveals its natural sound, which is crisp and clear, reminiscent of ancient times (remember that lowercase letters were invented long after Romans had perfected the uppercase shapes).

A phrase in all-lowercase, be it a heading or otherwise, tends to look casual and out-of-context.  Sometimes this is acceptable for items in a list where the list itself provides the missing context.  In most other situations, however, all-lowercase should be used with extreme caution, because the tone of voice it implies is rarely appropriate for a business site---it is rather faint, somnambulistic, resembling the "stoned" background voices on Pink Floyd records.

An incredible creative potential lies in varying the two spacing parameters of a font, the distances between letters and between lines.  Increasing natural intraword spaces makes the text sound more slow, solemn, even heavenly (in a novel I've read, this type of emphasis was used to represent the speech of angels).  This trick may be used to amplify the effect of both all-uppercase and all-lowercase styles that we discussed above, but it doesn't go together well with mixed case.


Link 6: Zero interline space to kill your site
For multiline text, an analog of increased intraword space is the big interline space---this, too, makes the text sound more profound and persuasive.  But experimenting designers have discovered another possibility: Setting zero or even negative interline space produces a tight bunch of a heading and forces it to vibrate much more intensively.  This trick, used in some magazines, now is not uncommon on the Web; for one example, see this page at the site.  

Created: Mar. 23, 1997
Revised: Mar. 23, 1997