Web Typography

Choosing typefaces for the web
jon hicks : hicksdesign

Typography Terms

Aa Aa Serif vs Sans-serif .

1 em Agatha Descenders Ascenders .

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? .

Bar-mitzvahs. readable. good for body text and headings THE design classic.Helvetica Clean.. suitable for most occasions .. .Weddings.

Arial OK as a substitute for Helvetica Most ubiquitous .

Helvetica Helvetica .

not bland Looks good uppercase.Trebuchet MS Excellent for headings Plenty of personality . and spaced: THIS IS ALSO TREBUCHET Good for dyslexic readers .short descenders and long ascenders .

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 .Verdana Designed for screen reading .

crying out for some creative uses Try using it for headings! .Courier Very under-used on the web.

but I say RUBBISH It’s a beautiful serif font. check out it’s gorgeous numerals: 1234567890 .Georgia Some say its over-used. that looks wonderful when used large Can be used for body text! Also.

Lucida Grande Default Mac OS X font Lovely sans-serif. Windows equivalents: Lucida Sans Unicode 1234567890 . great for body text and headings too.

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 .

4em makes the world of difference. . making it easier for the eye to find the start and end of a line.1em.Use CSS Line-height Standard browser lineheight in browsers tends to be around 1. This can be a bit too cramped to be read easily Changing it to just 1. Lines are more separated.

08em! otherwise is just gets silly A s i s l o w e r c a s e t y p e t h i s ! l e t t e r s p a c e d l i k e T H I S I S O K T H O U G H ! (0.Use letter-spacing Subtly tightened letter spacing can look good for headings. but no further than -0.3em) .

Harmonising Web Fonts Hamburger Vans Hamburger Vans Hamburger Vans Hamburger Vans Meta Trebuchet VAG Rounded Arial MT Rounded .

http://www.com .simplebits.

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

.. .For when you can use real typefaces.

T! HO Gotham Rounded .

T! HO Soho (Monotype) .

T! HO the Shire types Omnes Bold Buxus Backlit .

icio.us/jonhicks/ geeknightwebtype .Web Typography Choosing typefaces for the web http://del.

Sign up to vote on this title
UsefulNot useful