web_typography

8/7/2019 web_typography

1/29

Web TypographyChoosing typefaces for the web

jon hicks : hicksdesign


2/29

Typography Terms


3/29

Serif vs Sans-serif

Aa Aa


4/29

AgathaAscenders

Descenders

1 em


5/29

What choices do we have?


6/29

1Arial

2 Arial Black

3 Courier

4 Verdana

5 Comic Sans

6 Trebuchet

7 Georgia

8 Times New Roman9 Lucida Sans/Grande

10 Helvetica

Web Fonts


7/29

Thankyou..


8/29

C! New Vista Fonts!


9/29

What are these fonts good for?


10/29

HelveticaClean, readable, good for

body text and headingsTHE design classic,

suitable for most

occasions - Weddings,Bar-mitzvahs...


11/29

Arial

OK as a substitute for Helvetica

Most ubiquitous


12/29

Helvetica

Helvetica


13/29

Trebuchet MSExcellent for headings

Plenty of personality - not blandLooks good uppercase, and spaced:

T H I S I S A L S O T R E B U C H E T

Good for dyslexic readers - short descenders

and long ascenders


14/29

VerdanaDesigned for screen reading - wide

Excellent body text font

Be careful though:

Headings in bold can look clunky

Dont specify Verdana with Arial as 2ndchoice, try Tahoma instead


15/29

Courier

Very under-used on the web, crying out for

some creative usesTry using it for headings!


16/29

GeorgiaSome say its over-used, but I say RUBBISH

Its a beautiful serif font, that looks wonderfulwhen used large

Can be used for body text!

Also, check out its gorgeous numerals:

1 2 3 4 5 6 7 8 9 0


17/29

Lucida GrandeDefault Mac OS X font

Lovely sans-serif, great for body text andheadings too.

Windows equivalents: Lucida Sans Unicode

1 2 3 4 5 6 7 8 9 0


18/29

Comic Sans ;)Also good for dyslexic readers

Great for childrens party invites!

Be careful though:

Not one for a corporate website


19/29

Simple ways of improving

Web Typography


20/29

Use CSS Line-height

Standard browser line-height in browsers tends to

be around 1.1em. This canbe a bit too cramped to be

read easily

Changing it to just 1.4em

makes the world ofdifference. Lines are more

separated, making it easier

for the eye to find the start

and end of a line.


21/29

Use letter-spacing

otherwise is just gets silly

A s i s l o w e r c a s e t y p e

l e t t e r s p a c e d l i k e t h i s !

TH I S I S OK THOUGH! (0 .3em)

Subtly tightened letter spacing can look good forheadings, but no further than -0.08em!


22/29

Harmonising Web Fonts


23/29

http://www.simplebits.com
http://www.castofshadows.net/pagetwo.phphttp://www.castofshadows.net/pagetwo.php


24/29

http://www.castofshadows.net/pagetwo.php
http://www.castofshadows.net/pagetwo.phphttp://www.castofshadows.net/pagetwo.php


25/29

For when you can use real typefaces...


26/29


27/29


28/29


29/29

Web TypographyChoosing typefaces for the web

http://del.icio.us/jonhicks/geeknightwebtype
http://del.icio.us/jonhicks/geeknightwebtypehttp://del.icio.us/jonhicks/geeknightwebtypehttp://del.icio.us/jonhicks/geeknightwebtypehttp://del.icio.us/jonhicks/geeknightwebtype

Documents

web_typography