1 / 13

Web Typography

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.

liam
Download Presentation

Web Typography

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Typography Nick Foxall SM5312 week 2: web design

  2. 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

  3. 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

  4. Web Fonts • Commonly Available Serif Fonts SM5312 week 2: web design

  5. 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

  6. Web Fonts • Commonly Available Sans-serif Fonts SM5312 week 2: web design

  7. 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

  8. 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

  9. Font Size and Spacing SM5312 week 2: web design

  10. 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

  11. 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

  12. 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

  13. 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

More Related