130 likes | 529 Views
Web Typography Nick Foxall 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.
E N D
Web Typography Nick Foxall SM5312 week 2: web design
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 design
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 design
Web Fonts • Commonly Available Serif Fonts SM5312 week 2: web design
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 design
Web Fonts • Commonly Available Sans-serif Fonts SM5312 week 2: web design
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. SM5312 week 2: web design
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 design
Font Size and Spacing SM5312 week 2: web design
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 design
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 design
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 design
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… SM5312 week 2: web design