Typography
Design
Jeff Williamson
Northern Virginia Community College
http://www.nvcc.edu/home/nvwillj/html-design/
Typography
...is a literally ancient subject, with Trajan's column in Rome serving as the model for the ubiquitous Times New Roman on everyone's PC. Most of the fonts on your computer have similarly rich histories; Garamond was a 16th century French engraver whose eponymous font is a designated historic monument, while many popular sans and slaf-serif designs came from the Bauhaus. Type faces really are historic works of art, and their skilled use adds both professionalism and usability to web pages.
There's a lot to type, and I won't presume to know a fraction of it. I will just pass along some things that have helped me.
1. Type styles fall into a handful of categores. Have a look at the Flash site Counterspace. How many categories do they classify type into?
Two categories that Robin Williams uses that are not on the Counterspace site are script fonts, which simulate handwriting, and decorative fonts, which are, well, decorative for headlines but not readable as text.
2. The same styles of type can have different
- sizes,
- weights,
- structures (thick-thin transitions or no transitions),
- forms (upper and lower case),
- directions (vertical, horizontal, diagonal), and
- colors.
3. Sameness lends order (and dullness) to a page; contrast lends emphasis (and disorder). Where you choose to add contrast, add lots of contrast. Which is better below? How many contrasts are there between the two lines of type in the better example?
DON'T
BE A wimp*
W-
I TT -H ---C-
O -N -T-
R- A- S -T-
I- N -G ---T-
Y- P- E
vs.
DON'T
BE A WIMP*
WITH CONTRASTING TYPE
- *Robin Williams, The Non-Designer's Design Book
Random type tips
1. Type faces are an eternal issue in web page design; everyone wants to use a variety of them, but there's just no commonality among user machines. If your code calls for a font that's not available on the user's machine, then the user's default font is used, and if your font served any purpose at all, the default font is likely to look awful in its place.
Worse still: the same font can have different names on different machines. Helvetica on a Mac is basically Arial on a Windows machine.
The most common solutions are probably
§ to exploit other aspects of type design, such as size, weight, and color
§ to exploit the four, limited likely-available faces on all users' machines
---<font face="Arial, Helvetica, sans-serif">
---<font face="Times New Roman, Times, serif">
-_-<font face="Courier New, Courier, mono">
-_-<font face="Verdana, Arial, Helvetica, sans-serif">
(Faces have to be named in series to ensure a similar result on all machine. Dreamweaver (an HTML editor) does a singularly great job with this; most other editors only list system fonts, one at a time.)
§ to use graphics for other typographic elements
2. To see the fonts that are installed on your Windows PC, go to Start/Settings/Control Panel/Fonts. Be sure to check out the View menu - it has some options unique to the Font folder, such as "List Fonts By Similarity"
3. To print a sample in MS-Word of every font installed on your PC, download this (Word 95) macro, from the MS-Office installation disk.
Sorting your fonts into families will make it much easier
to make design decisions for tyopgraphic graphics on your site.
4. My recommended book on type: Robin Williams' The Non-Designer's Design Book
5. Some type links
Microsoft Typography - great info on web typography
Bazar - Free Stuff - Lots of fonts; I find their names descriptive and useful