Transcript Exploring Web Design Ch 03

Exploring Web Design
Chapter 3
Web Typography
The goal of any web page is to communicate.
What is Typography?
Typography is the manipulation of text on the page.
Through typography we can better convey that which we
are trying to communicate.
Why is Typography Important?
• Font refers to the style of printing letters,
numbers and characters.
• Choice of font, in addition to color, helps
set the tone of a page.
– Is the site friendly, fun or cool (1) (2) (3)?
– Is the site professional, radical or edgy?
– Is the site dark, grungy or gothic?
Ten Basic Fonts
Font Choices (1)
• Viewers only see the fonts they have
installed on their machines.
• If you use a font they don’t have, the font
reverts to one they have.
• This means THEY WON’T SEE YOUR
COOL FONT!!
• Ex: You see this:
They see this:
AGENT ORANGE
Font Choices (2)
• Dark Grey on Black Background
• Avoid these for the color blind:
–
–
–
–
–
–
Yellow on green
Green on red
Red on green
Blue on red
Red on blue
Red on black
• Tactics: use a contrasting outline around text
Font Choices (3)
• Make use of size and contrast
• The goal (most often) is readability
• Don’t make your page a chore to read
Typography Terminology
• Font: refers to styles of text
Arial
Times New Roman
Typography Terminology (2)
Font Family: groups or variations of a single
style of font. Also called styles.
Typography Terminology (3)
X-Height: the height of a lowercase x.
– Sets the standard height for lowercase
letters.
Typography Terminology (4)
Baseline: the line that the base, or the
bottom, of the letters are aligned to.
Typography Terminology (5)
Baseline shift: setting your text below the
baseline.
Typography Terminology (6)
Ascender: parts of the font that extend
above the x-height line.
Typography Terminology (7)
Leading: the vertical space between two
lines of type.
Typography Terminology (8)
Kerning: the spacing between individual
letters.
Typography Terminology (9)
Tracking: the spacing between all letters.
Typography Terminology (10)
Scale: changes the height / width of text
Typography Terminology (11)
Serif: those little tails and hooks!! I call
them “fonts with feet!”
Typography Terminology (12)
Sans Serif: sans = without. Therefore,
these are fonts without feet (serif strokes).
Sans Serif
Yeah, so what!?!
• HTML / XHTML does not allow you to set:
– Kerning
– Tracking
– Scaling
– Leading
– Font relative to baseline
• So why do you need to know these terms?
Why Know Typography?
• You can apply these concepts to graphics.
You can also apply shadows, glows,
bevels, etc.
• You can use Cascading Style Sheets
(CSS) to set baseline, leading and tracking
as well as set the spacing between words.