Main Page Go to Short Stories Go back to Articles Go to Comics Go to Continued Series Go to Editorial Go to New Series

Show All | Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6 | Week 7 | Week 8 | Week 9 | Week 10 | Week 11 | Week 12 | Week 13 | Week 14 | Week 15 | Week 16 | Week 17 | Week 18 | Week 19 | Week 20 | Week 21 | Week 22 | Week 23 | Week 24 | Week 25 | Week 26 | Week 27 | Week 28 | Week 29 | Week 30 | Week 31 | Week 32 | Week 33 | Week 34 | Week 35 | Week 36 | Week 37 | Week 38 | Week 39 | Week 40 | Week 41 | Week 42 | Week 43 | Week 44 | Week 45 | Week 46 | Week 47 | Week 48 | Week 49 | Week 50 | Week 51 | Week 52 | Week 53 | Week 54 | Week 55 | Week 56 | Week 57 | Week 58 | Week 59 | Week 60 | Week 61 | Week 62 | Week 63 | Week 64 | Week 65 | Week 66 | Week 67 | Week 68 | Week 69 | Week 70 | Week 71 | Week 72 | Week 73 | Week 74 | Week 75 | Week 76 | Week 77 | Week 78 | Week 79 | Week 80 | Week 81 | Week 82 | Week 83 | Week 84 | Week 85 | Week 86 | Week 87 | Week 88 | Week 89 | Week 90 | Week 91 | Week 92 | Week 93 | Week 94 | Week 95 | Week 96 | Week 97 | Week 98 | Week 99 | Week 100 | Week 101 | Week 102 | Week 103 | Week 104 | Week 105 | Week 106 | Week 107 | Week 108 | Week 109 | Week 110 | Week 111 | Week 112 | Week 113 | Week 114 | Week 115 | Week 116 | Week 117 | Week 118 | Week 119 | Week 120 | Week 121 | Week 122 | Week 123 | Week 124 | Week 125 | Week 126 | Week 127 | Week 128 | Week 129 | Week 130 | Week 131 | Week 132 | Week 133 | Week 134 | Week 135 | Week 136 | Week 137 | Week 138 | Week 139 | Week 140 | Week 141 | Week 142 | Week 143 | Week 144 | Week 145 | Week 146 | Week 147 | Week 148 | Week 149

Neopia's Fill in the Blank News Source | 30th day of Eating, Yr 27
The Neopian Times Week 77 > Articles > A Neopian Web Design Treatise: On Text

A Neopian Web Design Treatise: On Text

by oddhatter

Untitled Document

A MESSY DESK - In the last two sections of my "treatise", I discussed the use of colour and images, two aspects of a site's design that factor largely into its aesthetic value. However, there is yet another factor that is often glossed over - the use of text. I'm not referring to text as in "writing", but rather in a typographical sense - the usage of fonts, font sizes, and other such things.


On Fonts and... Fonts

A typeface is an alphabet (and other characters) set in a particular design. A font is basically, computer data that transforms text into a certain typeface. This is by far the most obvious aesthetic aspect of site design involving the use of text. When it comes to font choice - there is one major thing to consider - is it legible?

In order to explain this further, I will discuss font classes for a moment. There are a number of classes that all fonts fall into, but the most important are those of serif fonts, sans serif fonts and decorative fonts.

Times New Roman is a Serif font(old style, proportional).
Courier New is a Serif font(monospace).
Georgia is a Serif font(proportional).
Arial is a Sans Serif font.
Verdana is a Sans Serif font(proportional).
Lucida Console is a Sans Serif font(monospace).

Note: the fonts used are Windows based and may not appear if you do not have them installed - although you probably do. The words in parentheses refer to sub groupings of that particular font.

A "serif" refers to the little strokes added at the tips of certain fonts, such as Times New Roman. Typographically, it allows for visual continuity between letters, making reading large amounts of text easier. This however, mostly applies to printed works, although it is something to keep in mind if you believe people would like to print out your work to read. As I suggested in my first article however, it is easy to create a print friendly version of any content your visitors may want to read and simply link to it.

Alternately, a sans serif font is one without serifs, such as Arial and Verdana. Sans serif fonts are easy to read on computer screens, especially those that are also proportional fonts. A proportional font(such as Verdana and Times New Roman) is spaced proportionally, which means that each letter is spaced according to its width. For instance, the letter "i" will take up less space than the letter "h". The opposite of proportional spacing is monospace, where every letter takes up an equal amount of space. Proportional fonts tend to be easier to read than monospaced ones.

Two fonts that are generally known to be good for screen reading are Verdana and Georgia. Verdana, for instance, is the font used for text in the Neopian Times. Georgia provides a fancier, less plain look, without sacrificing legibility. On that note - decorative fonts should generally be avoided for site content for the obvious reason - they are often difficult to read. Like I have mentioned many times before, a website that looks good but cannot convey its content properly is ultimately a failure. As such, as tempting it is to use fonts that look like Middle English script, cursive handwriting, anything funky looking, or any thing else along those lines, please save them for headers and titles.

On a more personal note, Comic Sans Serif (it falls into the miscellaneous/decorative) should be a font that is used sparingly, if at all. Yes, it used to be a cool font, but it has been overused, exploited, and unfortunately, is distinctive enough that it is rather obvious when used. On the other hand, it is difficult to overuse a font like Verdana, merely because it is really a rather plain font.

Give them an option!

Something that most people forget is the ability to specify a number of fonts that can be displayed in case the font of choice is not installed on the viewer's computer. For instance, instead of specifying "verdana" as a font, you can also specify "helvetica", its Mac equivalent, and "sans serif", its font group. In the last case, by specifying "sans serif" - if Verdana is not installed on the viewer's computer, the browser will select a font from the same font group.

<font face="verdana">
this specifies "verdana" as a font
<font face="verdana, helvetica, sans serif">
this does the same thing, and adds a few backup fonts

Similarly, although not usually necessary, if you are fond of very small font sizes, you may want to provide a large text version of your site for those that may be a bit hard of seeing.

Content, content, content.

Naturally, your text and font choices should be dependent on the content of your site. This, however, does not void the earlier point I made about not using decorative fonts for site content. Rather, decorative fonts(you know, those cute or fancy or spiffy or swirly fonts) should be saved for titles and the such. It should be obvious however, that a swirly, Renaissance-ey font would not suit a pet page belonging to a depressed, black clad Battledoming pet. Nor would a font reminiscent of Halloween flyers be appropriate for a pretty pink Acara who enjoys visiting Faerieland in her spare time.

A Neopian Phenomenon?

This is something which I see more often on Neopets more than anything else, almost to the point where it seems to be a strictly Neopian phenomenon. And not in a good way. Glowing text. Yes, those ubiquitous chunks of "glowing text" that plague user lookups and shops like the... plague. Really, it is so over used, it is no longer cool (whether it ever was is questionable). Right now, it is about as original and mind blowing as fringe jackets and polyester flared pants. Above all, it is rarely easy to read. This is not a matter of sacrificing legibility for aesthetic value or vice versa - it is neither. In small amounts, such as in a short signature, it may be tolerable. Otherwise, plain text really isn't that bad.

That's about as much as I can summarise on the use of fonts for web design. Choosing the right font can be as important, if not more so, than choosing the right images and colours for your site. Despite this, however, it is a topic often ignored in favour of more "interesting" or "artistic" aspects of web design. Either way, I hope you liked it - tune in next week(or the week after) for more of my web design-y rantings.

Next time: A Neopian Web Design Treatise : On Accessibility(more on it.)

Week 77 Related Links

Sheep of Doom
Shake it, moo!

by oddhatter



Search :
Other Stories

A Guide to Winning Trophies
Have you ever looked at the flash game hi-scores and wondered, "How do they get such high scores?" Or, have you ever looked at someone's trophy cabinet and wondered, "How do they get so many trophies?"

by solidus_snake


Cellblock Strategy Guide
For such a tricky game, the rules of Cellblock are remarkably simple.

by pianoru


HTML - How to Use it
HTML is a great thing you can use on the Internet. I sometimes refer it as to 'making the computer do stuff for you'.

by squieshie


So Long, Carbon Copy!
This articles talks about ways writers can find unique topics, and what risks there are. It also mentions the perspective of a reader.

by taipeiss


Neopets | Main | Articles | Editorial
Short Stories | Comics | New Series | Continued Series | Search