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

PROMOTED VIDEO
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment
Elizabeth McGovern as Cora, Countess of Grantham and Richard E Grant as Simon Bricker

TV
Arts and Entertainment
Art
Arts and Entertainment
Diana Beard, nicknamed by the press as 'Dirty Diana'

Bake Off
Arts and Entertainment
The X Factor 2014 judges: Simon Cowell, Cheryl Cole, Mel B and Louis Walsh

TV
Arts and Entertainment
Gregg Wallace was caught by a camera van driving 32mph over the speed limit

TV
Arts and Entertainment
books
Arts and Entertainment
The Doctor and the Dalek meet
tvReview: Doctor Who Into the Dalek more than compensated for last week's nonsensical offering
Arts and Entertainment
Star turns: Montacute House
tv
Arts and Entertainment
Iain reacts to his GBBO disaster

TV
Arts and Entertainment
Outlaw Pete is based on an eight-minute ballad from Springsteen’s 2009 Working on a Dream album

books
Arts and Entertainment
Cara Delevingne made her acting debut in Anna Karenina in 2012

film
Arts and Entertainment
Simon Cowell is less than impressed with the Strictly/X Factor scheduling clash

TV
Arts and Entertainment
Gothic revival: artist Dave McKean’s poster for Terror and Wonder: The Gothic Imagination
Exhibition
Arts and Entertainment
Diana Beard has left the Great British Bake Off 2014

TV
Arts and Entertainment
Lisa Kudrow, Courtney Cox and Jennifer Anniston reunite for a mini Friends sketch on Jimmy Kimmel Live

TV
Arts and Entertainment
TVDessert week was full of the usual dramas as 'bingate' ensued
Arts and Entertainment
Clara and the twelfth Doctor embark on their first adventure together
TVThe regulator received six complaints on Saturday night
Arts and Entertainment
Vinyl demand: a factory making the old-style discs
musicManufacturers are struggling to keep up with the resurgence in vinyl
Arts and Entertainment
David Baddiel concedes his show takes its inspiration from the hit US series 'Modern Family'
comedyNew comedy festival out to show that there’s more to Jewish humour than rabbi jokes
Arts and Entertainment
Puff Daddy: One Direction may actually be able to use the outrage to boost their credibility

music
Have you tried new the Independent Digital Edition apps?

ES Rentals

    Independent Dating
    and  

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

    Chief inspector of GPs: ‘Most doctors don’t really know what bad practice can be like for patients’

    Steve Field: ‘Most doctors don’t really know what bad practice can be like for patients’

    The man charged with inspecting doctors explains why he may not be welcome in every surgery
    Stolen youth: Younger blood can reverse many of the effects of ageing

    Stolen youth

    Younger blood can reverse many of the effects of ageing
    Bob Willoughby: Hollywood's first behind the scenes photographer

    Bob Willoughby: The reel deal

    He was the photographer who brought documentary photojournalism to Hollywood, changing the way film stars would be portrayed for ever
    Hollywood heavyweights produce world's most expensive corporate video - for Macau casino

    Hollywood heavyweights produce world's most expensive corporate video - for Macau casino

    Scorsese in the director's chair with De Niro, DiCaprio and Pitt to star
    Angelina Jolie's wedding dress: made by Versace, designed by her children

    Made by Versace, designed by her children

    Angelina Jolie's wedding dressed revealed
    Anyone for pulled chicken?

    Pulling chicks

    Pulled pork has gone from being a US barbecue secret to a regular on supermarket shelves. Now KFC is trying to tempt us with a chicken version
    9 best steam generator irons

    9 best steam generator irons

    To get through your ironing as swiftly as possible, invest in one of these efficient gadgets
    England v Norway: Wayne Rooney admits England must ‘put on a show’ to regain faith

    Rooney admits England must ‘put on a show’ to regain faith

    New captain vows side will deliver for small Wembley crowd
    ‘We knew he was something special:’ Radamel Falcao's journey from teenage debutant to Manchester United's star signing

    ‘We knew he was something special’

    Radamel Falcao's journey from teenage debutant to Manchester United's star signing
    'I’ll tell you what I would not serve - lamb and potatoes': US ambassador hits out at stodgy British food served at diplomatic dinners

    'I’ll tell you what I would not serve - lamb and potatoes'

    US ambassador hits out at stodgy British food
    Radio Times female powerlist: A 'revolution' in TV gender roles

    A 'revolution' in TV gender roles

    Inside the Radio Times female powerlist
    Endgame: James Frey's literary treasure hunt

    James Frey's literary treasure hunt

    Riddling trilogy could net you $3m
    Fitbit: Because the tingle feels so good

    Fitbit: Because the tingle feels so good

    What David Sedaris learnt about the world from his fitness tracker
    Saudis risk new Muslim division with proposal to move Mohamed’s tomb

    Saudis risk new Muslim division with proposal to move Mohamed’s tomb

    Second-holiest site in Islam attracts millions of pilgrims each year
    Alexander Fury: The designer names to look for at fashion week this season

    The big names to look for this fashion week

    This week, designers begin to show their spring 2015 collections in New York