Web Typography
Adobe Type Manager (ATM) was released in 1989 to improve the quality of characters and text displayed on screens or printed by Imagewriter printers. It eliminated jagged edges which could cause small characters when magnified to become big black blobs. ATM needed Adobe-brand Postscript type fonts called ‘Type One’. Type One fonts were stored as mathematical formulae describing the outline of the characters plus special coding hints. Other fonts at the time were bit-mapped, i.e. stored as a collection of dots. Whereas outline fonts could be used in just about any size, bit-mapped fonts were restricted to ‘available’ point sizes.
Since those early days improvements have meant that attention to typography has contributed to the creation of creative and interesting web pages. But getting a message across efficiently is more than selecting an appropriate typeface. Some of the issues to include in web typography deliberations are contrast, size, hierarchy and white space.
Contrast is an important component as text must contrast sufficiently with the background to be readable. A method of deciding whether or not the text and background contrast enough can be found in the ‘I Love Typography’ (ILT), ‘A Guide to Web Typography’ post (URL http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/). The article suggests taking a screen print of your document and then, using image editing software, to convert the image to grey-scale. If the text is hard to read there is insufficient contrast. Light text on a dark background is not so much a contrast issue but it can be difficult to read on a screen unless only applied to brief passages.
Hierarchy involves varying the type size for headings, sub-headings and the body of text so that the importance of areas of text is easily detected by readers. Other methods for indicating hierarchy are the use of a mix of different typefaces, uppercase characters, italics, etc. Hierarchy well carried out will result in a web page where the elements look to be in the right place.
Leaving ‘negative space’, or ‘whitespace’ around text helps create balanced articles, whether they are to be printed or displayed on the web. The result is that web pages don’t look crowded even though they may be carrying a lot of information. The space between elements adds to the readability of the text. Less whitespace suggests cheap and nasty whereas greater whitespace adds a luxurious look to a page. For an excellent article on space, see ‘Whitespace’, ‘A listapart’ by Mark Boulton (URL http://alistapart.com/articles/whitespace/ ).
Letterspacing – Strings of capital letters and small caps should probably be allowed a little extra spacing to improve their legibility. The readability of Acronyms and abbreviations is also improved by adding extra letterspace. Letterspacing is essential for strings of numbers, such as serial numbers, so that they can be read more easily and rapidly. Letterspacing lowercase letters is not recommended.
Grid – Designing a web page can be aided by the application of an invisible grid. The use of a grid to suggest the layout of the page can be beneficial in that the individual elements are distributed across the page in an orderly and consistent fashion.
Adobe Type Manager (ATM) was released in 1989 to improve the quality of characters and text displayed on screens or printed by Imagewriter printers. It eliminated jagged edges which could cause small characters when magnified to become big black blobs. ATM needed Adobe-brand Postscript type fonts called ‘Type One’. Type One fonts were stored as mathematical formulae describing the outline of the characters plus special coding hints. Other fonts at the time were bit-mapped, i.e. stored as a collection of dots. Whereas outline fonts could be used in just about any size, bit-mapped fonts were restricted to ‘available’ point sizes.
Since those early days improvements have meant that attention to typography has contributed to the creation of creative and interesting web pages. But getting a message across efficiently is more than selecting an appropriate typeface. Some of the issues to include in web typography deliberations are contrast, size, hierarchy and white space.
Contrast is an important component as text must contrast sufficiently with the background to be readable. A method of deciding whether or not the text and background contrast enough can be found in the ‘I Love Typography’ (ILT), ‘A Guide to Web Typography’ post (URL http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/). The article suggests taking a screen print of your document and then, using image editing software, to convert the image to grey-scale. If the text is hard to read there is insufficient contrast. Light text on a dark background is not so much a contrast issue but it can be difficult to read on a screen unless only applied to brief passages.
Hierarchy involves varying the type size for headings, sub-headings and the body of text so that the importance of areas of text is easily detected by readers. Other methods for indicating hierarchy are the use of a mix of different typefaces, uppercase characters, italics, etc. Hierarchy well carried out will result in a web page where the elements look to be in the right place.
Leaving ‘negative space’, or ‘whitespace’ around text helps create balanced articles, whether they are to be printed or displayed on the web. The result is that web pages don’t look crowded even though they may be carrying a lot of information. The space between elements adds to the readability of the text. Less whitespace suggests cheap and nasty whereas greater whitespace adds a luxurious look to a page. For an excellent article on space, see ‘Whitespace’, ‘A listapart’ by Mark Boulton (URL http://alistapart.com/articles/whitespace/ ).
Letterspacing – Strings of capital letters and small caps should probably be allowed a little extra spacing to improve their legibility. The readability of Acronyms and abbreviations is also improved by adding extra letterspace. Letterspacing is essential for strings of numbers, such as serial numbers, so that they can be read more easily and rapidly. Letterspacing lowercase letters is not recommended.
Grid – Designing a web page can be aided by the application of an invisible grid. The use of a grid to suggest the layout of the page can be beneficial in that the individual elements are distributed across the page in an orderly and consistent fashion.
No comments:
Post a Comment