SM5312 week 2: web design1 Web Typography Nick Foxall

SM5312 week 2: web design2 Type on the Web Web designers can never rely on particular fonts being available to all users. Many of the fine points of typography normally applied in graphic design and print media cannot be applied in Web design. However, a small number of common fonts are widely available to the vast majority of users and systems…

SM5312 week 2: web design3 Web Fonts Serif Fonts Serifs are non-structural details on the ends of some of the strokes that make up letters and symbols. AG serifs

SM5312 week 2: web design4 Web Fonts Commonly Available Serif Fonts Font FamilyCore Typefaces Times Times Roman | Times Italic Times Bold | Times bold Italic Georgia Georgia Roman | Georgia Italic Georgia Bold | Georgia bold Italic

SM5312 week 2: web design5 Web Fonts Sans-serif Fonts Simply a font that doesn’t have serifs. Sans-serif fonts are more common for on-screen text, particularly for headlines and subheads. AG No serifs

SM5312 week 2: web design6 Web Fonts Commonly Available Sans-serif Fonts Font FamilyCore Typefaces Arial Arial Roman | Arial Italic Arial Bold | Arial bold Italic Helvetica Helvetica Roman | Helvetica Italic Helvetica Bold | Helvetica bold Italic Verdana Verdana Roman | Verdana Italic Verdana Bold | Verdana bold Italic Tahoma Tahoma Roman | Tahoma Italic Tahoma Bold | Tahoma bold Italic Trebuchet MS Trebuchet MS Roman | Trebuchet MS Italic Trebuchet MS Bold | Trebuchet MS bold Italic

SM5312 week 2: web design7 More Web Fonts Microsoft’s ‘Core Fonts for the Web’ A project started by Microsoft in 1996 to make a standard pack of fonts for the Internet. Now discontinued, but many of the fonts still available to most users. Font Family Andale Mono Arial Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana Webdings (  )

SM5312 week 2: web design8 Font Size and Spacing It used to be that font sizes were specified within the HTML markup of a web page. Now, XHTML requires “well formed” markup, so font sizes and line heights are specified within the CSS In CSS, font sizes can be specified using a number of different measurement units. All of these units allow the user to change the font size in their browser settings, if they so wish. In addition, some of these units are designed to ‘scale’ the whole page (in practise, the width of the column containing the text) if the user changes the font size.

SM5312 week 2: web design9 Font Size and Spacing CSS SyntaxMeasurement Unit pxpixels ptpoints pcpicas mmmillimetres cmcentimetres ininches %percent em a unit of measure that is relative to the width of the letter ‘m’ in that typeface: i.e. 1em = exactly the length of a single ‘m’ character: 1.2em = 1.2 x the length of a single ‘m’ character in a given typeface. ex same principle as em, but based on the height of the lowercase letter ‘x’ in a given typeface, not the width of the letter ‘m’

SM5312 week 2: web design10 Visual Hierarchy Compare the relative importance of the word “Hierarchy” in each box above. Notice how changing its colour to red changes its emphasis within the overall space.

SM5312 week 2: web design11 Visual Hierarchy Notice too how background colours, and changing the colour of text relative to its background, can create shifts in emphasis.

SM5312 week 2: web design12 Using Other Fonts Type rendered with graphics (GIFs, JPGs, etc) allow control over fonts and typography, but must be used judiciously to avoid usability and accessibility problems. CSS can be used to allow graphically rendered type to co-exist with ordinary markup on the same page for better accessibility.

SM5312 week 2: web design13 Less is More Don’t mix too many fonts in a web page. Generally, 2 fonts are sufficient in any design. Don’t forget you can use the typeface variations (bold, italic, etc) for different content areas. Try designing a page that uses only 1 font for all text areas. You can experiment with font colour and visual hierarchy too…