1.
Better Typography
Mark Boulton

2.
markboulton.co.uk
markboultondesign.com

3.
mark@markboulton.co.uk

4.
1. Structure
2. Process
3. Macro typography
4. Micro typography

5.
Typography and Web 2.0

6.
seduced
art & sex
from
antiquity
to
now

7.
seduced
art & sex
from
antiquity
to
now

8.
A world of
Verdana and Arial

9.
typography
1 the art or process of setting and arranging types and
printing from them. 2 the style and appearance of printed
matter. 2

10.
typography
1 the mechanical notation and arrangement of language.

11.
Typography is not...

12.
...deciding which is best,
Verdana or Arial.

13.
...just a designers responsibility.

14.
STRUCTURE

15.
‘Typography has one plain duty before it and
that is to convey information in writing.’
Emil Ruder

16.
Information is language

17.
words → sentences
sentences → paragraphs
paragraphs → groupings
groupings → sections
sections → document

18.
Documents have a
conceptual structure.

19.
Author’s
Conceptual
Structure

20.
Author’s Reader’s
Conceptual Conceptual
Structure Structure

21.
Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure

22.
Content & Presentation

23.
Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure

24.
Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure
HTML

25.
P RO C E S S

26.
Elements of User Experience
Jesse James Garrett

27.
visual design
surface
skeleton information design
structure interaction design
scope requirements
strategy user needs / site
objectives
For a much better diagram go to: http://www.jjg.net/elements/pdf/elements.pdf

28.
A linear process?

29.
visual design
surface
skeleton information design
structure interaction design
scope requirements
strategy user needs / site
objectives
project lifespan?

30.
typography
visual design
surface
skeleton information design
structure interaction design
scope requirements
strategy user needs / site
objectives

31.
typography
visual design
surface
skeleton information design
structure interaction design
scope requirements
strategy user needs / site
objectives

32.
typography
visual design
surface
skeleton information design
structure interaction design
scope requirements
strategy user needs / site
objectives

33.
*
‘Can you design a theme for me?’
* Interchangeable with ‘skin’

34.
Content & Presentation
...again!

35.
Greybox wireframes

36.
Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php

37.
Jesse Bennett-Chamberlain: http://31three.com/

38.
Look at typographic design
earlier in the process.

39.
M AC RO T Y P O G R A P H Y

40.
The big stuff

41.
Creating spacial relationships

42.
Golden Section

43.
b
a

44.
a b

45.
a b

46.
a a a

47.
a a a

48.
a a a

49.
Grids

50.
A way of organising stuff

51.
Provide a visual language

52.
Answer layout questions

53.
Sign in • Register • Read today’s paper • Jobs
comment is free... Search
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Blogs Editor’s picks
Space cadets
Dan Kennedy
05:00pm: Is seeing a UFO any
more crazy than believing God
Created the universe in six days> It
is if you are running to be
president of the United States.
Comments
A bankrupt hotchpotch
Ed Vaizey Nov 06 07, 04:40pm
The Queen’s speech: Big on
short-term tricks, and lacking in
long-term vision just about sums
up the government’s new
legislation
Comments State of emergency by Steve Bell
If Ball wants better schools, he
End of mutual respect
Derek Wall Nov 06 07, 04:20pm
must scrap faith selection
As the Respect party splits in two

54.
Sign in • Register • Read today’s paper • Jobs
comment is free... Search
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Blogs Editor’s picks
Space cadets
Dan Kennedy
05:00pm: Is seeing a UFO any
more crazy than believing God
Created the universe in six days> It
is if you are running to be
president of the United States.
Comments
A bankrupt hotchpotch
Ed Vaizey Nov 06 07, 04:40pm
The Queen’s speech: Big on
short-term tricks, and lacking in
long-term vision just about sums
up the government’s new
legislation
Comments State of emergency by Steve Bell
If Ball wants better schools, he
End of mutual respect
Derek Wall Nov 06 07, 04:20pm
must scrap faith selection
As the Respect party splits in two

55.
Sign in • Register • Read today’s paper • Jobs
comment is free... Search
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Blogs Editor’s picks
Space cadets
Dan Kennedy
05:00pm: Is seeing a UFO any
more crazy than believing God
Created the universe in six days> It
is if you are running to be
president of the United States.
Comments
A bankrupt hotchpotch
Ed Vaizey Nov 06 07, 04:40pm
The Queen’s speech: Big on
short-term tricks, and lacking in
long-term vision just about sums
up the government’s new
legislation
Comments State of emergency by Steve Bell
If Ball wants better schools, he
End of mutual respect
Derek Wall Nov 06 07, 04:20pm
must scrap faith selection
As the Respect party splits in two

56.
M I C RO T Y P O G R A P H Y

57.
The little stuff

58.
Hyphens are not dashes

59.
Britain’s workers improve their
lives - by doing nothing

60.
Britain’s workers improve their
lives -- by doing nothing

61.
Britain’s workers improve their
lives—by doing nothing

62.
Britain’s workers improve their
lives – by doing nothing

63.
- hyphen Müller-Brockmann
– en dash 3–6 April; 25–30 mm
a phrase marker – thus – with spaces
— em dash a phrase marker—thus—with no spaces
— Doesn’t sound much like a bee to me.
— It’s a bloody aardvark!
− minus 4−1=3

64.
Never negatively space lowercase

65.
Y O U C A N S PA C E C A P S

66.
&
HEADINGS SUBHEADINGS

67.
{HOME} NOTEBOOK WORK PUBLICATIONS ICON SHOP ABOUT CONTACT
LATEST FEATURED WORK
Hand-crafted pixels & text. MTV.com
SimpleBits is a tiny web design studio founded by XHTML/CSS development
designer and author Dan Cederholm. We create simple,
Cork’d
readable interfaces balanced with a standards-based
Creative Director
methodology. Learn more
TravelPost.com
Logo + interface design
RECENT NOTEBOOK ARTICLES & QUICKBITS
SPEAKING EVENTS
Planet Microformats
A giant master feed of anything and everything tagged with “microformats” SXSW Interactive
from Brian Suda. {02.20.07} March 9-13, 2007 ~ Austin, TX
An Event Apart Boston
March 26-27, 2007 ~ Boston
Web Directions North @media 2007 (America)
May 24-25, 2007 ~ San Francisco
I’ve returned from several days in Vancouver, and the first-ever Web
@media 2007 (Europe)
Directions North. It was a great trip, a great conference, and my second
June 7-8, 2007 ~ London
attempt at snowboarding in the last 20 years.
I’ll first say congrats to Maxine, John, Dave and
Derek for putting on what was an oustanding
www.simplebits.com

68.
<h1>Hand-crafted pixels
<span class=quot;ampquot;>&amp;</span> text.</h1>
span.amp {