Scribd
Upload
497 views

Web Typography

This document discusses web typography and choosing typefaces for the web. It provides information on typography terms like serif and sans-serif fonts and discusses the top 10 commonly used web fonts. The document also provides guidance on using specific fonts like Helvetica, Arial, Trebuchet MS, and Verdana for headings or body text. It recommends techniques like adjusting line height and letter spacing to improve readability of web typography.

Uploaded by

laumaras
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
497 views

Web Typography

This document discusses web typography and choosing typefaces for the web. It provides information on typography terms like serif and sans-serif fonts and discusses the top 10 commonly used web fonts. The document also provides guidance on using specific fonts like Helvetica, Arial, Trebuchet MS, and Verdana for headings or body text. It recommends techniques like adjusting line height and letter spacing to improve readability of web typography.

Uploaded by

laumaras
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

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 Web Fonts
10!
1 Arial
2 Arial Black
3 Courier
4 Verdana
5 Comic Sans
6 Trebuchet
7 Georgia
8 Times New Roman
9 Lucida Sans/Grande
10 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 line- Changing it to just 1.4em


height in browsers tends to
be around 1.1em. This can makes the world of
be a bit too cramped to be difference. Lines are more
read easily 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 t y p e
l e t t e r s p a c e d 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

You might also like