Network: Typography - a language in its own right
The right type helps to get your message across on the Web
Monday 26 April 1999
Type for the Web
A type style (called font families on the Web) is a category of typefaces with similar characteristics. There are five basic font "families":
Serif: small "ornamentation" at the end of a letter that helps distinguish it. Serifs are holdovers from the days of stone cutting and pen strokes, but they often improve legibility by making individual letters stand out. Serif fonts are often best for the display of larger text or for smaller printed text, and not so good for smaller text on a screen as they will often obscure the letter - eg. Times.
Sans-Serif: you guessed - without serifs. Characters are less distinctive, but these work better for smaller text on a screen - eg. Helvetica, Arial.
Monospace fonts can have serifs or not, but each letter occupies the same amount of space, ie. an "l" and "m". They work best for text that has to be exactly (but not necessarily quickly) read, such as programming code where typos can spell disaster - eg. Courier.
Cursive fonts try to mimic cursive handwriting, but usually in a highly stylised manner. Best for decoration and not very good for reading large chunks of text - eg. Zapf Chancery and Ribbon.
Fantasy are decorative fonts that don't fit any other category. Usually very ornamental or, in the case of Dingbats, actually illustrations or icons. Should be chosen carefully to reinforce the look and feel of your site - eg. Zapf Dingbats and Post Crypt.
Using type on the Web
While we can, in theory, use any font we want, there are three distinctive ways to present text, each with its own strengths and weaknesses.
HTML Text is mostly like text in a word processor. Its advantages are that it is easily edited if changes are needed and the text can adjust to the width of the screen it is being viewed on. But it has severe design limitations. Most textual control is left to the visitor's browser, and you can't do things like run text vertically. And you are limited to fonts available on the visitor's machine.
Cascading Style Sheets (/www.independent.co.uk/ net/980407ne/story8.html) give greater control, but HTML text is still very limited, particularly for special effects. This is why many designers turn to...
Graphic Text is actually a graphic (GIF or JPEG) with text in it, so you can do anything you want to how it looks and use any font you want, no matter what the site visitor has. But graphics mean slower downloads and may be cut off if the visitor's screen is not large enough. Graphic text is usually difficult to edit.
Vector Text gives the best of both worlds. Like HTML text, it is easily changed and can dynamically position itself depending on the screen size, but, like graphic text, many special effects can be used, with any font you want. Currently, the only universal way to get it into a website is to use Macromedia's Flash plug-in (www.independent. co.uk/net/ 980727ne/story4.html ), but standards are being worked on by the World Wide Web Consortium (www.w3c.org) that'll let browsers display vector text (and graphics).
Here are a few of my favourites.
Counterspace uses Flash to give lessons on typography, and recommend useful fonts. (www. studiomotiv.com/counterspace)
Typographic presents general information, and includes studies of how to use fonts more effectively - in print and online. (typographic.rsub.com/index.cgi)
Graphion's Online Type Museum has good information about typography basics. (www. graphion.com/museum.html)
Swipe-Books on Typography. I recommend Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann & E M Ginger. (www.swipe.com/type1.htm)
E-mail comments or queries to firstname.lastname@example.org
TVJamie's Sugar Rush reveal's campaigning chef's new foe
Arts & Ents blogs
- 1 What marriage would look like if we actually followed the Bible
- 2 President Obama leaves touching comment on Humans of New York photo from Iran
- 3 If these extraordinarily powerful images of a dead Syrian child washed up on a beach don't change Europe's attitude to refugees, what will?
- 4 The Chinese city where men have 'three girlfriends because there are so many women'
- 5 'Heartbreaking' Syria orphan photo wasn't taken in Syria and not of orphan
The Gamechangers trailer: Daniel Radcliffe stars in GTA movie
Star Wars: New action dolls launched on Force Friday ahead of The Force Awakens release
Ricki And The Flash, film review: Meryl Streep's rock'n'roll creation steals the show
Joan Aiken: Today's Google Doodle celebrates life of British fantasy novelist
Photographer captures the beauty and intensity of his girlfriend giving birth at home
Britain to take more refugees as Cameron bows to pressure after more than 250,000 back our campaign
Senior British politicians tell David Cameron: When dead children are being washed up on beaches – it's time to act
Jeremy Corbyn calls Osama bin Laden's killing a 'tragedy' - but was it taken out of context?
If these extraordinarily powerful images of a dead Syrian child washed up on a beach don't change Europe's attitude to refugees, what will?
If you're not already angry about the refugee crisis, here's a history lesson to remind you why you really should be
Refugees welcome: More than 250,000 sign Independent petition calling for Britain to 'take its fair share'