Website:
Serif vs San Serif
In websites it's better practice to use a San Serif font - such as arial - as it improves legibility on-screen (typefaces with delicate serifs may display irregularly).
Typeface characteristics
Size - consider that the user sits quite close to the screen - 10-14 point typeface should be large enough. Also consider target audiences - people who are visually impared will need the font size to be higher (accessiblity considerations).
Emphasis - Avoid italics - it's hard to read onscreen. Avoid underlining as it can give the impression that the text is a hyperlink. If you need to emphasise, increase the weight (i.e. make bold) or size of the type.
Spacing - Choose a type face that uses proportional spacing - it has higher visibility. Note: proportional spacing takes into consideration the fact that for example the letter 'i' takes up less space than the letter 'w' - as opposed to fixed width spacing where letter spacing is the same for all characters regardless of width or shape.
Justification - Don't fully justify text, always left justify paragraphs as it increases reading speed.
Leading (vertical space between lines of text) - should be about 15% of the size of the the font face.
Alignment - grid structures on a website are a good way of organising information as it is a type of layout that makes it easier for the user to scan through content quickly and easily. Minimise the number of alignment points onscreen - Don't jump between alignment types, for example left alignment to centered alignment within one block of content, keep it consistent.
Density - make good use of whitespace as it increases legibility, the screen should not appear crowded. As a general rule of thumb, overall density should be no greater than 30% of screen area.
Standing out - avoid 'gaudiness' for example black text against yellow background to make text standout on a website. This is more appropriate for road signs! Instead use, for example drop shadows or distinct outlines around text.
Control fields - isolate important content from the background, so that it doesn't 'get lost' or blend in. For example providing a shape around a logo makes it stand out, and gives a distinctive 'branding'. In essence, it's like putting a picture frame around a picture to help it visually stand out.
Poster:
Serif vs San Serif
There aren't the same issues with using Serif fonts on a poster as there are on a website. Sometimes serif fonts can actually improve readability when printed on paper.
Typeface characteristics
Size - Should be large enough to read from a distance - title should be extra large to catch attention. In general size of typeface would be a good bit larger than that of a website.
Emphasis - It's ok to use italics on posters for emphasis, as there aren't the same issues as there are with reading onscreen. But use emphasis consistently. Don't mix and match.. e.g. the following example would be overkill on a poster: It's important to emphasize with changes in typeface
Spacing - same rules generally apply as for websites
Justification - In contrast with websites, fully justified text can be used on posters, especially if the poster is divided into blocks of content. The rules aren't as strict as they would be for websites. Infact full justification can help the appearance of the poster.
Leading - same rules generally apply as for websites
Alignment - same rules generally apply as for website. However, for example center alignment of all text on a website would be a bad thing, however on a poster, it might be appropriate.
Density - there should a lot of whitespace used in posters, maybe even moreso than on websites, as the information should be more concise and to the point.
Standing out - gaudiness is sometimes ok for posters (as opposed to websites) as it grabs a persons attention - e.g. black text against a yellow background. It won't 'hurt' the eyes as the person won't be looking at it for as long.
Control fields - same rules apply as for websites - isolate important information, such as logos, using control fields in your poster.
Subscribe to:
Post Comments (Atom)
1 comment:
Excellent answer Karen. The differences between developing for the web and for print are significant and ofter unrecognised.
Your answer is very detailed but here are some additional considerations outside the scope of the question.
What looks good on one medium won't automatically transfer to the other.
It's common for people to develop a document in MS Word that looks OK when printed, and then expect the same document to look good as a web page design. This doesn't work.
Whether developing for print or pc (in Photoshop for example) it is important to consider the way in which we view each.
We can see printed material because it reflects light from the sun or a lamp. The image is made up of colour pigments (Think of a printed page with ink pigments). We should use CMYK (Cyan Magenta Yellow Black) colours when designing for print. The CMYK colour wheel is a subtractive one, meaning that when we add all colours we get black.
Look in your printer - The ink cartridges are most likely CMYK. I have a photo printer that has 8 cartridges with 2 variations of each colour for extra detail.
We can see computer images because light shines from the back of the monitor (CRT) or we combine lighted colours (LCD). Every colour is made up of a combination of RGB (Red Green Blue) lights in different proportions. The RGB colour wheel is additive meaning that the three lighted colours will combine to make white light.
The resolution of the medium is also important. When creating a button, image, banner etc for a web site 72dpi is generally OK. Due to restrictions in PC monitor resolutions an increase in dpi will not generally affect the button.
Print however requires a much higher dpi - generally at least 300dpi. Consider any piece of paper - It is made up of millions of molecules, unlike a web screen that may have a resolution of 1024 * 768 pixels.
Post a Comment