Email: Password: Login Create an Account

by Joe Gillespie — Feb 1, 2000

Good typography is just as important on a web page as it is in any other medium. The fact that it appears on a computer screen and not on a piece of paper is immaterial, it should still be pleasing to look at and easy to read.

In every situation where type is used - in publishing, signage, packaging, television etc. - the designer has to adapt his techniques to suit the medium.

A headline style that works just fine in a magazine spread would not necessarily work on a poster.

A magazine is always viewed straight-on at arms length so letter spacing can be as tight as you like and the words will still be readable.

A poster is, more often than not, viewed obliquely, which distorts the type to some extent. Here, a little extra letter spacing helps identification of the individual characters, and hence the words.

Designing for a computer screen has its own set of problems. Add to these the elastic nature of a web page, which has to work across different computer platforms and screen sizes, and the problems get even worse.

It is the designer's job to understand these issues and to address them - to maintain some kind of control when everything else is shifting.

The SeveNet font family is no longer available from this site but may be available from the Fountain Type Foundry in Sweden.

As with MINI 7, it is a seven point Macintosh screen font. It has no PostScript or TrueType printer font and has no lower case characters.

The PC version is a regular TrueType font.

You can also use these fonts at multiples of 7 points (14, 21 etc) if you want a deliberately pixelated look. You should do this in Photoshop with anti-aliasing turned off.

If you are familiar with Style Sheets in your page layout or word processing programs you will understand how it is possible to create a set of type specifications and apply them to a block of text or a whole site.

You can make all headlines 48 point Times Bold, subheadings 32 point Helvetica bold and the body text 10 point Times Roman with whatever leading and indents you like.

If you want to change the overall look of your layout to something more 'technical', you only need edit the Style Sheet, so the headings could change to Arial Black, the subheads to Arial Bold and the body text to Arial, quickly and easily.

Using Cascading Style Sheets (CSS) in fourth generation browsers gives similar capabilities. Of course you will still be restricted, for the moment, by the availability of fonts on the user's system. Cascading Style Sheets can't magically produce Frutiger Extra Bold, Bold, Roman and Light fonts out of nowhere. Yes, there are a few font embedding technologies available now, but they are not reliable enough for general use just yet.

The idea behind CSS is that they keep content and type markup separate and you can have control over type that hasn't been provided for in basic HTML.

Apart from the ability to make global changes to styles very easily, it is also possible to deliver the same content with different specifications according to the browser being used.

Whether the user has a whizbang computer with a large 24-bit monitor or a small, black and white organiser, it is technically feasible to invoke a different set of styles that give the optimal user experience in any browser. And, if the browser doesn't have CSS capabilities, the layout will 'degrade' gracefully to give, at least, a satisfactory display.

This particular block of text is, as far as HTML is concerned, one paragraph. The fact that it is visually broken up into numerous indented paragraphs using <BR> and runs of &nbsp; means that it will degrade better on non-CSS capable browsers. Normally I would alternate &nbsp;s with regular spaces, but the CSS implementation in MsIE ignores the spaces and halves the indent.

The style named 'normaltext' is providing the type size, specified in pixels, not points, because pixels are absolute across platforms and points are not.

In 'normaltext', I have also specified the typeface and line-height. If all that Cascading Style Sheets could do was to add a provision for line spacing, it would still be invaluable.

In the next section, 'alttext' supplies the typeface specifications and colour and provides the indents.

Just like HTML and all the other cross-platform and cross-browser issues, CSS implementation is not very consistent at the moment. It is supported by Netscape and Explorer 4 and above and partly in Explorer 3.x but the results are not always predictable.

You can do a lot more with Cascading Style Sheets than I have mentioned in this primer. The basic facilities are now resonably reliable across browsers but some of the more esoteric features can cause problems. Even this relatively simple, justified section with para indents behaves quite differently in Netscape and Explorer depending on whether I use <div> or <p>.

As with any other web page design uncertainties, you really need to test-fly your pages on as many computers and browsers as you possibly can.

The examples here only scratch the surface of what CSS can do.

In addition to creating custom styles, you can modify most of the existing HTML styles.

You could, for instance, redefine the <PRE> tag to be a larger type size or a different colour or the H2 tag to be a particular font, size and style.

If you want to find out more, check out the CSS links in the Links section and in the advanced section under Cascading Style.

Finally, some readers won't be able to see the results of your CSS. Make sure your pages still look good in older browsers too.

Aliasing is a term used to describe the undesirable effects produced when visual information is presented at a lower than optimal resolution.

Do you remember in cowboy films when the stage coach wheels seemed to spin backwards. That was because the 'resolution' of 24 frames per second was insufficient to capture the true forward motion of the wheels and the illusion of the spokes moving backwards was because, in subsequent frames, the next spoke was almost reaching the position of the spoke in the previous frame.

Anti-aliasing in computer graphics was popularised by Quantel in their Paintbox computer systems back in the early '80s. Much of what we take for granted now in programs like Adobe Photoshop was pioneered in early videographic systems costing hundreds of thousands of dollars.

With the relatively coarse resolution of computer screens, individual pixels (picture elements) are quite apparent.

Lines of pixels that perfectly fit the grid on a computer screen because they are horizontal, vertical or at 45 degrees cause no problem. Lines drawn at any other angle have to be approximated because they conflict with the natural grid and look stepped.

As this magnified view shows, the cyan line is at odds with the grid and changes from two to three runs of pixels.

If the runs form a regular pattern, i.e. always two or always three, then you get a 'sweet' line which, although stepped, is evenly stepped and doesn't look as objectionable as the arbitrarily stepped one here.

The anti-aliased version on the right smoothes out the stepping.

The enlarged views are at 1200% and the pixel grid simulated, there are no tiling lines like this in reality, just perfectly butting squares.

For type, any edge that does not fall on the natural grid produces steps. Some cleverly designed screen fonts keep to the natural grid and look fine, but type that is really intended to be printed on a high resolution printer can look bad on a computer display, or at least, severely compromised.

Pixels are a fixed size and can't be chopped up like ceramic tiles or building bricks, if you want to smooth out these unsightly steps, you can only do so using tone and colour.

By introducing pixels of a colour somewhere between the foreground and background colours, you can effectively smooth the edges of the lines.

To smooth the edge of a simple black on white character on the screen, a program like Photoshop will create 16 to 20 intermediate tones of grey to fill in the steps and, from normal viewing distances, the type will look smooth.

But no matter what the type colour, or the background - it might be a full tone photograph for instance - pixels of an intermediate tone and colour are used to give the illusion of smoothness.

This assumes that the display can handle all these colours. On an 8-bit display with only 256 colours, all these subtleties of tone are going to get lost and colours are going to snap to their nearest web palette counterparts.

The image on the left shows how the individual pixels have 'posterized' in the 8-bit rendition by a browser, yet still give an acceptable result.

Now this is all very well for large, bold type. As the type gets smaller, the conflict with the natural pixel grid becomes increasingly more severe.

The main horizontal and vertical strokes of a typeface should, ideally, align perfectly with the pixel grid. When they don't, you can do one of two things.

You can move the strokes so that they do align with the grid - at the expense of the proportion of the characters. This is called 'hinting' and is often used in higher resolution devices like PostScript printers to improve image quality.

Or, you can try to simulate the true position of the strokes using the same tonal illusion used to smooth edges. To get the impression of a line that should strictly be between two pixels, you can put down lighter tones of the colour in adjacent rows of pixels.

In the Gill Sans Light here, the strokes of the smaller sizes should be thinner than a pixel, which they obviously can't be, so the characters blur into one another and become unreadable.

The anti-aliasing on the 18 point Bold is a proportionally smaller part of the overall character shape and does what it is supposed to do - smooth the edges.

Three staggered lines of anti-aliased 12 point Helvetica show how the strokes either hit or miss the natural grid. The fact that each line is starting at a different horizontal position means that the relationship between the grid and the stroke differs in each case. The first and third lines are almost, but not exactly the same.

The zoomed-in version shows what happens when a stroke misses the natural grid. In the first line, the letter 'l' is spread across two pixels but in the second, it is perfectly formed.

The initial capital 'H' has one stroke which hits the grid perfectly, and one which doesn't, so no placement of the capital 'H' will ever be perfect at this point size.

Exactly the same thing happens to the horizontal strokes, but in this instance, I have been lucky.

If I take the best characters from each line, and the best half of the cap 'H' and cut and paste them into a single composite, I get the best of both worlds, but in doing so, I have to 'hint' the characters and adjust their shapes and spacing by half a pixel.

This really is a labour of love!

There does come a point when it is just impossible to describe the shape of a letter in a given number of pixels using these techniques, but the quality of the type suffers drastically long before you even get there.

For small type sizes, it is better to use a well designed screen font. By that, I mean one that has been designed pixel by pixel in sympathy with the screen grid and not one that is 'imposed' upon the grid.

For HTML text, you don't have much choice in the matter, it will differ from one surfer's machine to the next, but if you are incorporating type into buttons or graphics, you can choose.

Type sizes of 14 pixels up can usually be anti-aliased quite successfully. Around 12 pixels high, it very much depends on the weight and design of the typeface whether you can get off with it. Below that, you really should look at using a properly designed screen font without anti-aliasing.

The PC and Mac type samples here are borderline cases where you have to choose between using the crisp, but pixelated font or the smoother edged, but blurred anti-aliased versions.

There are a number of different coding techniques used to produce anti-aliasing and some are better than others. Try setting the same text in different programs, compare the results and decide for yourself which is best.

Typographic design means different things to different people. Some like their type neatly arranged in grids, everything lined-up with not a letter out of place. Others prefer a more freeform approach. But, no matter what your stylistic preferences, being able to prioritise information successfully is one of typographic design's most essential functions.

When a reader scans a printed or web page, they are looking for information - fast! The designer can make it easier for people to find the information they need if it is presented in a logical manner.

Any page of text starts out as a solid block of type. Without any other intervention, the reader will start at the top left and work down to the bottom right - so there is a natural flow there from the beginning.

INFORMATION PRIORITY

The first necessity is to break that mass of words up into smaller, more easily digested chunks - paragraphs. Each paragraph will have one or more sentences and will be visually separated from the next using an indent or paragraph space.

Because indenting paragraphs on web pages is a little more difficult, many people just use a blank line. The effect of this not only ruins the flow of reading but give a very disjointed look to the page. It is better to use paragraph indents for paragraphs, and paragraph spaces for sections - collections of related paragraphs.

Web page layout is closer to a word processor document than anything else, there just isn't the typographic control that you would get in a publishing program. There aren't even any tabs in regular HTML, so all kinds of tricks are necessary to get even the most basic typographical control. There may be a little control over type size, but very little over weight or other styles.

Web page typography needs a slightly different approach from that of conventional print, you have to work within the medium and its constraints.

Differences between paper and web

Newspaper

Book

Browser

Fields of view are related to viewing distance and type size

When reading any page at a normal reading distance, there is a certain field of view that the eye can cope with - that is governed by small movements of the eye - enough to scan a line of text and be aware of that line's relationship to its surroundings. If you have to move your head, you are changing the field of view completely and the brain has to try to relate the new field of view to the previous one.

With a newspaper page, there will be considerably more head movement required than with a paperback book. For web pages, it depends very much on the browser size on the screen. Scroll bars allow the field of view to be changed but one of the most common mistakes on web pages is to allow the text to flow to the browser width. This is word-processor thinking, not design, and is much too wide for a comfortable horizontal field of view on even a small monitor.

Having to scroll a web page vertically makes it more difficult to break the natural top to bottom flow than with a newspaper or magazine because the physical act of scrolling takes considerably more effort than eye or head movement. There is little point in trying to fight the top down approach for information on web pages. This constraint suggests a couple of basic rules.

For any single web page, the information should flow in a 'serial' manner from top to bottom of the page.

Where information is more 'random access', use hyperlinked headlines to pages or blocks of serial information. These headlines can be at the tops of longer pages or on completely separate 'menu' pages.

The length of any single page should not be excessive and there are various opinions of what maximum page lengths should be. I believe that it depends more on the page layout and file size than the number of words.

Emphasis, de-emphasis, relativity

Bearing in mind the natural top-down flow of reading, certain elements of importance need to be given visual emphasis. The trick here is to introduce 'foils' to the natural flow of reading by adding maverick elements.

Anything that breaks with the norm will stand out. In typography, all elements are only relative to one another and, indeed, this is one of the underlying principles of HTML type mark-ups.

Type Size and Weight

The most basic form of prioritising is to make certain type larger or bolder than the rest. This gives emphasis to that type because it looks more important than its neighbours. If the type was all bolder or bigger, then you are back to square one.

In scanning a page, the emphasised elements stand out from the others, they take priority and will be read first. Conversely, if you want to de-emphasise some information, you can make it smaller or lighter than the normal. Lighter is not usually an option in web design as you can't have strokes thinner than one pixel, so, we are stuck with two weights of type - normal (roman) and bold.

Italics

Italics are often used in printed matter to give emphasis to a word or two within a block of regular roman text. Italic type is generally harder to read than roman and the reader has to slow down to read it. It gives emphasis firstly because it looks different from the upright stress of the roman and also because the reader's flow is impeded.

As the simple test on the left shows, the eye is drawn immediately to the line that contradicts the pattern. In fact, recognising such deviations in regular patterns is one of the human brain's major strengths.

Where italics work well on a printed page, they pixelate horribly on a computer screen. They clash with the natural square pixel grid and are best avoided on web pages, certainly at smaller sizes.

Underline

Underlining was a technique much used with typewriters in days gone by. Few typewriters had any mechanism other than underlining to give emphasis and, unfortunately, the habit carried over into word processing.

Underlining has a special meaning on a web page, it indicates a hypertext link, so it is really not a good idea to use underlining for any other purpose or it will confuse the reader.

Colour

Colour is considered a luxury in print, certainly as far as text is concerned. On a web page, it costs nothing extra and can be used to compensate for other typographic deficiencies. Again, it is the deviation from the norm that causes visual disruption and therefore emphasis.

Many pages on this site use coloured type for emphasis. Instead of using bold or italic the type colour changes - the more it changes, the more emphasis it creates. So, there is a hierarchy of emphasis - yellow stands out more than green on a blue background - green dominates over pale blue.

The technique is overused here because I am trying to get too many examples into a small space. It should be used more sparingly.

In designing a more conventional black and white web page, different shades of grey can be used to emulate the effect of type weight.

Orientation

A line of type that is upside down on a page is very noticeable, but also difficult to read. On a printed page, the reader would simply turn the page around but that's not quite so easy with a monitor.

Type that runs up or down the page vertically is impossible with HTML text but can be easily implemented with a GIF. Used sparingly, it can be effective in a horizontal world.

Balanced with other typographic attributes, size, weight and colour, a headline on its side like this can be prominent or recessive. Of course, this is true for any line of type but the sideways orientation is acting as a visual foil, contradicting the natural flow and bring attention to itself.

As it spans a certain number of lines and paragraphs of related body text, it also has the effect of further unifying them.

Position

As with the maverick type style, a line of type that is in an unusual position will stand out. Breaking the regular geometry of a page with an indent or hanging indent will draw the attention to that element even overriding the natural top down flow.

Of course, the example here is taking advantage of the left right flow and it is using colour difference too. A common exercise for students of typography is to take a piece of information such as an exhibition flyer and to do various layouts using only one prioritising technique on each - weight, size, colour, position etc.

Any element that looks as if it doesn't belong for some reason will draw attention to itself.

Like all hard and fast rules, grids are meant to be broken!

Space

A line of eight point type in the middle of a blank page dominates the page completely. On a page full of twelve point type, it gets lost. Not only are the relative type sizes important, but the space that surrounds the type is significant too.

The effective counter play between solid and void areas is one of the finest skills used in modern architecture, abstract painting and typography and requires a substantial amount of training and experience. At its simplest level, isolating typographical elements in space is a sure way to give them emphasis.

Priority used creatively

Converting priority of information into typographic emphasis successfully is one of the most basic skills of typographic design. It works at both functional and aesthetic levels and can be achieved with a little common sense.

Creative typographers use a whole gamut of techniques to prioritise information and make a page more visually interesting. Even within the confines of HTML, a little imagination can prove fruitful and be visually rewarding.

Much has been written about the death of typography as we know it, that, with the boom of the Web, old typesetting traditions are abandoned in favour of a more democratic approach to an information-based medium.

But I always wondered what those programmers of the early Web browsers had been smoking when they chose the standard fonts for displaying text on the web. Up until when the <font face> tag was introduced, a designer's choice for specifying typefaces on the web was limited to Times for proportional and Courier for monospaced type.

By Tomas Caspers

On-screen typography is far from being an exact science, but just like its counterpart in meatspace it is intended to get someone with a limited attention span to grasp your message.

As with any medium, some fundamental cognitive rules still apply, since basically the message is still rendered in the reader's mind, the medium is just a means of transportation. And there are certain factors that can either improve or worsen the reader's experience or success - factors that have been known for centuries and which are so basic that they apply to any medium, be it dead trees or CRTs.

There is one significant difference though: The attention span of Web users is even shorter than that of someone reading printed material. If you take into account that users generally read 10-20% slower from screen than from paper, it becomes obvious that text has to be set very carefully when your paycheck depends on the user's understanding of this text.

What makes a typeface good or bad for on screen reading?

Unfortunately the number of typefaces we can now choose from is still somewhat limited to the most basic set that comes preinstalled with the client's OS or browser and from that limited number of fonts you have to choose those that will hurt the least.

Times, still the most popular option (though one could argue out of ignorance), is an excellent typeface for printing newspapers, but it is a pain for reading on-screen. Its original version was designed to squeeze as many letters as possible on a printed page and still remain legible. Therefore its print version has a medium x-height while being fairly narrow, with sharp and small serifs. Its small ascenders and descenders make it very economical, because they reduce the need for leading, enabling the typesetter to set more lines per page.

The major problem with the bitmapped version of Times (the one that appears on the screen) is that it doesn't translate those subtleties. A pixel is a pixel - the smallest possible unit - there is no such thing as half a pixel and even anti aliasing doesn't help at copy sizes. So a formerly tiny serif is now as big as a stem and adds a lot of unnecessary visual noise, especially within 'small' and narrow fonts like Times. Most screen fonts were never designed to be legible, they were only designed to resemble their printer fonts as closely as possible at 72 ppi in PageMaker or XPress.

What makes it even worse is the fact that all screen fonts are displayed with close to no leading in all pre-CSS browsers. If a designer would choose a font with a large x-height for printed pages, he would have to use extra linefeed so that the reader's eye easily finds the beginning of the next line, something that's not possible on the web without the use of Style Sheets, but something that is badly needed for most older fonts.

To keep text set in Times still readable without CSS, one would have to reduce the width of the column below the optimum 50-55 letters, something that's impossible to consistently accomplish across platforms.

Fortunately this is changing. More and more fonts are optimised for on-screen reading and become widely available, in some cases they are even bundled with other products or free to download, like Microsoft's Fontpack.

Other Type foundries try to sell optimised versions of their fonts, like Adobe's Webtype, but I don't think that a lot of end-users will fork out over 50 US$ for a concept they are not likely to understand, even if it would prevent headaches or eye strain.

What most of those typefaces have in common is that they have a more open face, wider letters, increased x-height, and a more generous letterspacing. They fit nicely into the square pixel grid without looking distorted and don't have the letterspacing problems that standard screen fonts like Geneva or MS Sans Serif have. With the limitations of low resolution display in mind (there is only a finite number of pixels you can use to display 12 pt on a 72 ppi display) those fonts were designed for maximum on-screen legibility.

Some of those fonts could be classified as 'serifs without serifs'. Here the use of serifs is not a historical remnant, but is limited to letters' functionality. They are only used to distinguish letters that could otherwise be easily confused. Take for example the lowercase j i l in Helvetica/Mac as compared to Verdana/Mac on the left. In Helvetica those three letters are hardly distinguishable and thus almost impossible to read. What makes it even worse is that the letterspacing is too tight. Set in Verdana on the other hand, this text would still be legible at 8 points, a pain royale with most other fonts.

How to make a good font even better

try increasing leading to 15 or 16 pt (or 130%) for the web and you'll see some dramatic improvement in readability

Learn how to use Cascading Style Sheets! Since we're dealing with a fast-paced medium, reading is equally hectic, so typography has to adjust to this speed.

Lines have to be shorter and leading has to be increased. Like in print, leading is a function of line length, but whereas in print 12/14 is perfectly acceptable for a line 50 letters wide, you better try increasing leading to 15 or 16 pt (or 130%) for the web and you'll see some dramatic improvement in readability.

When you use sans serif fonts, you should increase this value even more. These fonts lack the horizontal guidance that those little serifs provide and thus help the eye follow the textflow.

Individual letters have to be clearly distinguishable, so make sure you choose a font with the needed characteristics. Unfortunately one out of two Web browsers doesn't support letterspacing, but it doesn't hurt to provide those who do interpret CSS correctly with a looser spacing. Or, if you don't use CSS in your pages, at least specify fonts like Georgia for serifs or Verdana for sans first and only then Times or Arial. Compare how evenly spaced Georgia and Verdana are in contrast to Times New Roman/Windows or Helvetica/Mac. The individual letters don't stick to each other and there are no unwanted gaps. The human eye has to work much harder at deciphering text when e.g. the pixels of the letters a, o, and e cling together or when serifs from adjacent letters run into one another. Besides being tiring this lacking distinctiveness also interrupts the reading flow.

Tomas Caspers is a freelance graphic designer based near Cologne, Germany. He is currently mourning over the relegation of his favourite football club, 1. FC Köln, from the Bundesliga after 35 years.

Del.icio.us Digg Technorati Blinklist Furl reddit