Web Typography

Web Typography
Choosing typefaces for the web
jon hicks : hicksdesign
Typography Terms
Serif
vs
Sans-serif
Aa Aa
Ascenders
1 em
Agatha
Descenders
What choices do we have?
TOP
10!
1
2
3
4
5
6
7
8
9
10
Web Fonts
Arial
Arial Black
Courier
Verdana
Comic Sans
Trebuchet
Georgia
Times New Roman
Lucida Sans/Grande
Helvetica
Thankyou..
C! New Vista Fonts!
What are these fonts good for?
Helvetica
Clean, readable, good for
body text and headings
THE design classic,
suitable for most
occasions - Weddings,
Bar-mitzvahs...
Arial
OK as a substitute for Helvetica
Most ubiquitous
Helvetica
Helvetica
Trebuchet MS
Excellent for headings
Plenty of personality - not bland
Looks good uppercase, and spaced:
THIS IS ALSO TREBUCHET
Good for dyslexic readers - short descenders
and long ascenders
Verdana
Designed for screen reading - wide
Excellent body text font
Be careful though:
• Headings in bold can look clunky
• Don’t specify Verdana with Arial as 2nd
choice, try Tahoma instead
Courier
Very under-used on the web, crying out for
some creative uses
Try using it for headings!
Georgia
Some say its over-used, but I say RUBBISH
It’s a beautiful serif font, that looks wonderful
when used large
Can be used for body text!
Also, check out it’s gorgeous numerals:
1234567890
Lucida Grande
Default Mac OS X font
Lovely sans-serif, great for body text and
headings too.
Windows equivalents: Lucida Sans Unicode
1234567890
Comic Sans ;)
Also good for dyslexic readers
Great for childrens party invites!
Be careful though:
• Not one for a corporate website
Simple ways of improving
Web Typography
Use CSS Line-height
Standard browser lineheight in browsers tends to
be around 1.1em. This can
be a bit too cramped to be
read easily
Changing it to just 1.4em
makes the world of
difference. Lines are more
separated, making it easier
for the eye to find the start
and end of a line.
Use letter-spacing
Subtly tightened letter spacing can look good for
headings, but no further than -0.08em!
otherwise is just gets silly
A s
i s
l o w e r c a s e
l e t t e r s p a c e d
t y p e
l i k e
t h i s !
T H I S I S O K T H O U G H ! (0.3em)
Harmonising Web Fonts
Hamburger Vans
Meta
Hamburger Vans
Trebuchet
Hamburger Vans
VAG Rounded
Hamburger Vans
Arial MT Rounded
http://www.simplebits.com
http://www.castofshadows.net/pagetwo.php
For when you can use real typefaces...
!
T
HO
Gotham Rounded
!
T
HO
Soho (Monotype)
!
T
HO
the Shire types
Omnes Bold
Buxus Backlit
Web Typography
Choosing typefaces for the web
http://del.icio.us/jonhicks/
geeknightwebtype