Better Typography Mark Boulton
markboulton.co.uk markboultondesign.com
mark@markboulton.co.uk
1. Structure 2. Process 3. Macro typography 4. Micro typography
Typography and Web 2.0
‘Designing for a web of data’ ‘Agile Development, Agile mind’ ‘Immersive experiences’ Does typography matter
seduced art & sex from antiquity to now
Most people think typography is about fonts.
seduced art & sex from antiquity to now
Most designers think typography is about fonts.
Typography is more than that, it’s expressing language through type. Placement, composition, typechoice. Poster for an exhibition at the Barbican in London. The font is Swashbuckle.
Herb Lubalin - Mother and Child.
Death metal band names.
Mixed messages from Thames Valley Police.
A world of Verdana and Arial
But, on the web we live in a world of Verdana and Arial. The danger is uniformity. How can you di!erenciate your brand using the same typeface as your competitor?
typography
1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
Definition from the Oxford English Dictionary. Not current. Richard Rutter asked OED, they are updating it.
typography
1 the mechanical notation and arrangement of language.
From Phil Baines’ book, ‘Type and Typography’.
Typography is not...
...deciding which is best, Verdana or Arial.
...just a designers responsibility.
STRUCTURE
‘Typography has one plain duty before it and that is to convey information in writing.’
Emil Ruder
Emil Ruder wrote this in 1961. Things haven’t changed much in 46 years.
Information is language
Information is language. Typography is about language. The web is language. Who has a writing budget?
words " sentences sentences " paragraphs paragraphs " groupings groupings " sections sections " document
Language has structure.
Documents have a conceptual structure.
Headings, subheadings, paragraphs, lists, tables. Chunks of information.
Author’s Conceptual Structure
Authors have a structure to their document.
Author’s Conceptual Structure
Readers interprate that structure.
Reader’s Conceptual Structure
Designer Author’s Conceptual Structure
Reader’s Conceptual Structure
The designers responsibility is to present the content the way the author intended and the reader will understand.
Content & Presentation
In separating content and presentation, we’re losing art direction.
A Brief Message, produced by Khoi Vinh and Liz Danzinco. Short form design writing. A look at art directing on the web.
What about applications? Can we art direct frameworks. Well, yes, we can have a go.
Designer Author’s Conceptual Structure
Reader’s Conceptual Structure
The designers responsibility is to present the content the way the author intended and the reader will understand.
Designer Author’s Conceptual Structure
Reader’s Conceptual Structure HTML
HTML can represent the models as well.
P RO C E S S
Elements of User Experience Jesse James Garrett
Jesse’s book. Published 2003. Diagram first published in 2001.
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
Shows the layers and levels of user experience.
A linear process?
But... Is it a linear process?
visual design
surface skeleton
information design
structure
interaction design
scope
requirements
strategy
user needs / site objectives project lifespan?
typography surface
visual design
skeleton
information design
structure
interaction design
scope strategy
If so, where does this leave typography? In the surface plane.
requirements user needs / site objectives
typography surface
visual design
skeleton
information design
structure
interaction design
scope strategy
requirements user needs / site objectives
Thing is, typography is more involved than simply choosing a font. Typographic design includes information design.
typography surface
visual design
skeleton
information design
structure
interaction design
scope strategy
... and goes all the way down to content.
requirements user needs / site objectives
‘Can you design a theme for me?’ *
* Interchangeable with ‘skin’
Leaving typography in the surface plane, leads to statements like this...
Content & Presentation ...again!
Content and presentation are linked. Not necessarily the words, and what they mean, but the structure of the content.
Greybox wireframes
A way around this is Greybox wireframes.
Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
Jason Santa Maria, Creative Director at Happy Cog, wrote about greybox wireframes in 2004.
Jesse Bennett-Chamberlain: http://31three.com/
Jesse Bennett-Chamberlain also uses the process to great e!ect.
Look at typographic design earlier in the process.
M AC RO T Y P O G R A P H Y
The big stuff
Composition, placement.
Creating spacial relationships
Most of Macro Typography is concerned with creating spacial relationships.
Golden Section
The Golden Section. I learnt about this at art school. I’m not sure if my lecturer at the time even understood what it was and how to apply it.
Images like these are common when discussing the Golden Section.
Wikipedia scared me to death.
Designers have tried to create systems based upon the Golden Section for years.
The same can be applied to product design.
b a
And web design. This is Crate and Barrel.
a
b
a
Approximate alignment is okay too.
b
a
a
a
Rule of thirds. A compositional device used mainly in photography due to its close relationship with the Golden Section.
a
Rule of thirds as applied to the web.
a
a
a
a
Rule of thirds defining primary and secondary content within a grid.
a
Grids
A way of organising stuff
Provide a visual language
Answer layout questions
Back to the Guardian.
And apply the lines we saw earlier.
These columns can be sub-divided again, inserting gutters.
And then subdivided once more.
So, there’s the final grid for The Guardian.
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
Blogs
About us
Audio
Webfeeds Other 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 End of mutual respect Derek Wall Nov 06 07, 04:20pm As the Respect party splits in two
State of emergency by Steve Bell
If Ball wants better schools, he must scrap faith selection
Laying data elements out becomes easier.
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
Blogs
About us
Audio
Webfeeds Other 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 End of mutual respect Derek Wall Nov 06 07, 04:20pm As the Respect party splits in two
Looks like a wireframe eh?
State of emergency by Steve Bell
If Ball wants better schools, he must scrap faith selection
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
Blogs
About us
Audio
Webfeeds Other 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 End of mutual respect Derek Wall Nov 06 07, 04:20pm As the Respect party splits in two
State of emergency by Steve Bell
If Ball wants better schools, he must scrap faith selection
Overlaying the grid...
Another page.
A grid can create visual relationships across page types. Applications too.
M I C RO 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 PA C E C A P S
HEADINGS
Italicise ampersands in headlines.
&
SUBHEADINGS
{HOME}
NOTEBOOK
WORK
PUBLICATIONS
ICON SHOP
ABOUT
CONTACT
LATEST FEATURED WORK
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
MTV.com XHTML/CSS development Cork’d Creative Director TravelPost.com
RECENT NOTEBOOK ARTICLES & QUICKBITS
Logo + interface design SPEAKING EVENTS
Planet Microformats A giant master feed of anything and everything tagged with “microformats” from Brian Suda. {02.20.07}
SXSW Interactive March 9-13, 2007 ~ Austin, TX An Event Apart Boston March 26-27, 2007 ~ Boston
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
www.simplebits.com Dan Cederholm’s Simplebits.com
@media 2007 (America) May 24-25, 2007 ~ San Francisco @media 2007 (Europe) June 7-8, 2007 ~ London
<h1>Hand-crafted pixels <span class="amp">&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
Whitespace becomes active, not passive. Balances the text and allows space for descenders.
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
Barry Island
0533 0600 0600
Rhoose
0540 0610 0612
Llantwit Major
0550 0612 0622
Bridgend
0552 0620 0648
Barry Island
0533 0600 0600
Rhoose
0540 0610 0612
Llantwit Major
0550 0612 0622
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.
Barry Island
0533
0600
0600
Rhoose
0540
0610
0612
Llantwit Major
0550
0612
0622
Bridgend
0552
0620
0648
Barry Island
0533
0600
0600
Rhoose
0540
0610
0612
Llantwit Major
0550
0612
0622
Bridgend
0552
0620
0648
Barry Island
0533
0600
0600
Rhoose
0540
0610
0612
Llantwit Major
0550
0612
0622
Bridgend
0552
0620
0648
Barry Island
0533
0600
0600
Rhoose
0540
0610
0612
Llantwit Major
0550
0612
0622
Bridgend
0552
0620
0648
1. Structure
Language; Conceptual models; Content & Presentation.
2. Process
Greybox wireframes; Typography earlier in the process.
3. Macro typography The big stuff. Composition & Grids.
4. Micro typography The little stuff. Typesetting.
â&#x20AC;&#x2DC;...It is not surface, it is not the last thing that needs to be considered, it is the thing itselfâ&#x20AC;&#x2122; Stephen Fry
Thank you
Slides and resources at : http://www.markboulton.co.uk/present/web2berlin/