Better Typography

Better TypographyMark Boulton

markboulton.co.ukmarkboultondesign.com

[email protected]

mailto:[email protected]

mailto:[email protected]

1. Structure2. Process3. Macro typography4. Micro typography

Typography and Web 2.0

seducedart & sex

fromantiquity

to now

seducedart & sex

fromantiquity

to now

A world of Verdana and Arial

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

typography1 the mechanical notation and arrangement of language.

Typography is not...

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

...just a designers responsibility.

S T R U C T U R E

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

Emil Ruder

Information is language

words → sentencessentences → paragraphsparagraphs → groupings

groupings → sectionssections → document

Documents have a conceptual structure.

Author’sConceptual

Structure


Structure

Reader’sConceptual

Structure

Designer


Structure


Structure

Content & Presentation

Designer


Structure


Structure


Structure


Structure

Designer

HTML

P R O C E S S

Elements of User ExperienceJesse James Garrett

surface

skeleton

structure

scope

strategy

visual design

information design

interaction design

requirements

user needs / siteobjectives

For a much better diagram go to: http://www.jjg.net/elements/pdf/elements.pdf

http://www.jjg.net/elements/pdf/elements.pdf


A linear process?

surface

skeleton

structure

scope

strategy

visual design

information design

interaction design

requirements


project lifespan?

surface

skeleton

structure

scope

strategy

visual design

information design

interaction design

requirements


typography

surface

skeleton

structure

scope

strategy

visual design

information design

interaction design

requirements


typography

surface

skeleton

structure

scope

strategy

visual design

information design

interaction design

requirements


typography

‘Can you design a theme for me?’*

* Interchangeable with ‘skin’

Content & Presentation...again!

Greybox wireframes

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



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



Look at typographic design earlier in the process.

M A C R O T Y P O G R A P H Y

The big stuff

Creating spacial relationships

Golden Section

a

b

a b

a b

a a a

a a a

a a a

Grids

A way of organising stuff

Provide a visual language

Answer layout questions

Editor’s picksBlogs

Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs

Sign in • Register • Read today’s paper • Jobs

Searchcomment is free...

Space cadets

Dan Kennedy05:00pm: Is seeing a UFO anymore crazy than believing GodCreated the universe in six days> Itis if you are running to bepresident of the United States.Comments

Ed Vaizey Nov 06 07, 04:40pmThe Queen’s speech: Big onshort-term tricks, and lacking inlong-term vision just about sumsup the government’s new legislationComments

A bankrupt hotchpotch

End of mutual respect

Derek Wall Nov 06 07, 04:20pmAs the Respect party splits in two

State of emergency by Steve Bell

If Ball wants better schools, hemust scrap faith selection




Space cadets













Space cadets








M I C R O T Y P O G R A P H Y

The little stuff

Hyphens are not dashes

Britain’s workers improve their lives - by doing nothing

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

Britain’s workers improve their lives—by doing nothing

Britain’s workers improve their lives – by doing nothing

- 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

Never negatively space lowercase

Y O U C A N S P A C E C A P S

H E A D I N G S & S U B H E A D I N G S

{ H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A C T

Hand-crafted pixels & text.SimpleBits is a tiny web design studio founded by

designer and author Dan Cederholm. We create simple,

readable interfaces balanced with a standards-based

methodology. Learn more

Planet Microformats

A giant master feed of anything and everything tagged with “microformats”

from Brian Suda. {02.20.07}

Web Directions North

I’ve returned from several days in Vancouver, and the first-ever Web

Directions North. It was a great trip, a great conference, and my second

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

L A T E S T F E A T U R E D W O R K

MTV.com

XHTML/CSS development

Cork’d

Creative Director

TravelPost.com

Logo + interface design

S P E A K I N G E V E N T S

SXSW Interactive

March 9-13, 2007 ~ Austin, TX

An Event Apart Boston

March 26-27, 2007 ~ Boston

@media 2007 (America)

May 24-25, 2007 ~ San Francisco

@media 2007 (Europe)

June 7-8, 2007 ~ London

R E C E N T N O T E B O O K A R T I C L E S & Q U I C K B I T S

www.simplebits.com

http://www.alistapart.com/articles/emen

http://www.alistapart.com/articles/emen

<h1>Hand-crafted pixels<span class="amp">&</span> text.</h1>

span.amp { font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style: italic; font-size: 110%; }

Framing navigation

Registration

About

Conference

Expo

Registration

About

Conference

Expo

Registration

About

Conference

Expo

Registration

About

Conference

Expo

Registration

About

Conference

Expo

Registration

About

Conference

Expo

Framing tables

Barry Island 0533 0600 0600

Rhoose 0540 0610 0612

Llantwit Major 0550 0612 0622

Bridgend 0552 0620 0648


Rhoose 0540 0610 0612


Bridgend 0552 0620 0648


Rhoose 0540 0610 0612


Bridgend 0552 0620 0648

Text numerals like these—23, 48, 192 and 2096—belong in text

Lining numerals like these—23, 48, 192 and 2096—are better in tables.


Rhoose 0540 0610 0612


Bridgend 0552 0620 0648


Rhoose 0540 0610 0612


Bridgend 0552 0620 0648


Rhoose 0540 0610 0612


Bridgend 0552 0620 0648


Rhoose 0540 0610 0612


Bridgend 0552 0620 0648

1. StructureLanguage; Conceptual models; Content & Presentation.

2. ProcessGreybox wireframes; Typography earlier in the process.

3. Macro typographyThe big stuff. Composition & Grids.

4. Micro typographyThe little stuff. Typesetting.

‘...It is not surface, it is not the last thing that needs to be considered, it is the thing itself’

Stephen Fry

Thank you

Slides and resources at : http://www.markboulton.co.uk/present/web2berlin/

Technology

Better Typography