Network: Typography - a language in its own right

The right type helps to get your message across on the Web

MANY THINK of text as just a way of recording spoken words, but typography adds a language to text that goes far beyond the spoken word. It affects how text looks by controlling the space, shape and sizes of letters. On the Web, typography is displaying text on the computer screen to wide audiences. But many of the challenges of this are a result of the Web's limitations. So it is important to understand how to classify type styles on the Web, and how text can be incorporated into a web page.

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).

Typography resources

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 jason@webbedenvironments.com

Arts and Entertainment

Great British Bake Off
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Latest stories from i100
Have you tried new the Independent Digital Edition apps?
SPONSORED FEATURES

ES Rentals

    Independent Dating
    and  

    By clicking 'Search' you
    are agreeing to our
    Terms of Use.

    Refugee crisis: David Cameron lowered the flag for the dead king of Saudi Arabia - will he do the same honour for little Aylan Kurdi?

    Cameron lowered the flag for the dead king of Saudi Arabia...

    But will he do the same honour for little Aylan Kurdi, asks Robert Fisk
    Our leaders lack courage in this refugee crisis. We are shamed by our European neighbours

    Our leaders lack courage in this refugee crisis. We are shamed by our European neighbours

    Humanity must be at the heart of politics, says Jeremy Corbyn
    Joe Biden's 'tease tour': Could the US Vice-President be testing the water for a presidential run?

    Joe Biden's 'tease tour'

    Could the US Vice-President be testing the water for a presidential run?
    Britain's 24-hour culture: With the 'leisured society' a distant dream we're working longer and less regular hours than ever

    Britain's 24-hour culture

    With the 'leisured society' a distant dream we're working longer and less regular hours than ever
    Diplomacy board game: Treachery is the way to win - which makes it just like the real thing

    The addictive nature of Diplomacy

    Bullying, betrayal, aggression – it may be just a board game, but the family that plays Diplomacy may never look at each other in the same way again
    Lady Chatterley's Lover: Racy underwear for fans of DH Lawrence's equally racy tome

    Fashion: Ooh, Lady Chatterley!

    Take inspiration from DH Lawrence's racy tome with equally racy underwear
    8 best children's clocks

    Tick-tock: 8 best children's clocks

    Whether you’re teaching them to tell the time or putting the finishing touches to a nursery, there’s a ticker for that
    Charlie Austin: Queens Park Rangers striker says ‘If the move is not right, I’m not going’

    Charlie Austin: ‘If the move is not right, I’m not going’

    After hitting 18 goals in the Premier League last season, the QPR striker was the great non-deal of transfer deadline day. But he says he'd preferred another shot at promotion
    Isis profits from destruction of antiquities by selling relics to dealers - and then blowing up the buildings they come from to conceal the evidence of looting

    How Isis profits from destruction of antiquities

    Robert Fisk on the terrorist group's manipulation of the market to increase the price of artefacts
    Labour leadership: Andy Burnham urges Jeremy Corbyn voters to think again in last-minute plea

    'If we lose touch we’ll end up with two decades of the Tories'

    In an exclusive interview, Andy Burnham urges Jeremy Corbyn voters to think again in last-minute plea
    Tunisia fears its Arab Spring could be reversed as the new regime becomes as intolerant of dissent as its predecessor

    The Arab Spring reversed

    Tunisian protesters fear that a new law will whitewash corrupt businessmen and officials, but they are finding that the new regime is becoming as intolerant of dissent as its predecessor
    King Arthur: Legendary figure was real and lived most of his life in Strathclyde, academic claims

    Academic claims King Arthur was real - and reveals where he lived

    Dr Andrew Breeze says the legendary figure did exist – but was a general, not a king
    Who is Oliver Bonas and how has he captured middle-class hearts?

    Who is Oliver Bonas?

    It's the first high-street store to pay its staff the living wage, and it saw out the recession in style
    Earth has 'lost more than half its trees' since humans first started cutting them down

    Axe-wielding Man fells half the world’s trees – leaving us just 422 each

    However, the number of trees may be eight times higher than previously thought
    60 years of Scalextric: Model cars are now stuffed with as much tech as real ones

    60 years of Scalextric

    Model cars are now stuffed with as much tech as real ones