Web typography
Download
1 / 13

Web Typography - PowerPoint PPT Presentation


  • 335 Views
  • Updated On :

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Typography' - liam


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web typography l.jpg

Web Typography

Nick Foxall

SM5312 week 2: web design


Type on the web l.jpg
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 l.jpg
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 fonts4 l.jpg
Web Fonts

  • Commonly Available Serif Fonts

SM5312 week 2: web design


Web fonts5 l.jpg
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 fonts6 l.jpg
Web Fonts

  • Commonly Available Sans-serif Fonts

SM5312 week 2: web design


More web fonts l.jpg
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 l.jpg
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 spacing9 l.jpg
Font Size and Spacing

SM5312 week 2: web design


Visual hierarchy l.jpg
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 hierarchy11 l.jpg
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 l.jpg
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 l.jpg
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


ad