Transcript PowerPoint Presentation - SM5312: Web Design Basics

Web Typography
Nick Foxall
SM5312 week 2: web design
1
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
2
Web Fonts
Serif Fonts
Serifs are non-structural details on the ends of some of the strokes
that make up letters and symbols.
AG
SM5312 week 2: web design
serifs
3
Web Fonts
Commonly Available Serif Fonts
Font Family
Core Typefaces
Times Roman | Times Italic
Times
Times Bold | Times bold Italic
Georgia
SM5312 week 2: web design
Georgia Roman | Georgia Italic
Georgia Bold | Georgia bold Italic
4
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
SM5312 week 2: web design
No serifs
5
Web Fonts
Commonly Available Sans-serif Fonts
Font Family
Core 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 design
6
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 (Webdings)
SM5312 week 2: web design
7
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
8
Font Size and Spacing
CSS Syntax
Measurement Unit
px
pixels
pt
points
pc
picas
mm
millimetres
cm
centimetres
in
inches
%
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 design
9
Visual Hierarchy
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
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
10
Visual Hierarchy
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
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
11
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
12
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
13