Web Typography Fundamentals

transcript

Web Typography FundamentalsMark Boulton

1. What is Typography?

2. Typographic Structure

3. Macro Typography

4. Micro Typography

W H A T I S T Y P O G R A P H Y ?

http://www.flickr.com/photos/guitavares/248157529/

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.

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

T Y P O G R A P H I C 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

Language is information

words → sentencessentences → paragraphsparagraphs → groupings

groupings → sectionssections → document

Documents have a conceptual structure.

Author’sConceptual

Structure

Reader’sConceptual

Structure

Designer

Structure

Designer

Structure

Brand valuesArt direction

Designer

Brand valuesArt direction

M A R K U P !

BASE CAMP

CAMP #1

CAMP #2

CAMP #3

CAMP #4

LAYOUT COLOUR CONTENT

HIERARCHY FONT RHYTHM

LANGUAGE TYPESETTING GRID

LANGUAGE

TYPESETTING

HIERARCHY

Heading 1Heading 2

Heading 3

‘web sites should not look the same in every browser’

Designing in the browser is good because:

• It’s quick to make changes

• It’s the right thing to do

• Malarkey will be chuffed

RHYTHM

LAYOUT

COLOUR

CONTENT

LANGUAGE TYPESETTING GRIDFUNCTION

ATTRIBUTES

LAYOUTCOLOUR

CONTENT

HIERARCHY RHYTHM

LANGUAGETYPESETTING

LAYOUT COLOURCONTENT

HIERARCHYRHYTHM

LAYOUT COLOUR

HIERARCHYRHYTHM

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

The big stuff

Creating spacial relationships

Golden Section

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

Editor’s picksBlogs

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

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

Vertical Rhythm

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certainit’s not just imagining that light in the eastern sky. Unfortunately theeastern sky is off to port this morning. Yesterday it was starboard.Minerva has been sailing up and down the New England coast for thebetter part of a fortnight, trying to catch a wind that will decisively takeher out into deep water, or “off soundings,” as they say. They are probablynot more than fifty miles away from Boston.

Contrary Winds

Daniel goes back and sits by one of the windows – these are undershot sothat he can look straight down and see Minerva’s wake being born in afoamy collision around the rudder. He opens a small hatch below awindow and drops out a Fahrenheit thermometer on a string. It is the verylatest in temperature measurement from Europe – Enoch presented it tohim as a sort of party favour. He lets it bounce through the surf for a fewminutes, then hauls it in a takes a reading.

He’s been trying to perform this ritual every four hours – the objectivebeing to see if there’s any rumour that the North Atlantic is striped withcurrents of warm water. He can present the data to the Royal Society ifGod-willing he reaches London.

Text taken from Quicksilver by Neal Stephenson.

† The forecastledeck is theshort deck that, towardsthe ship’s bow, is builtabove the upperdeck.

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

better part of a fortnight, trying to catch a wind that will decisively take

her out into deep water, or “off soundings,” as they say. They are probably

not more than fifty miles away from Boston.

Contrary Winds

Daniel goes back and sits by one of the windows – these are undershot so

that he can look straight down and see Minerva’s wake being born in a

foamy collision around the rudder. He opens a small hatch below a

window and drops out a Fahrenheit thermometer on a string. It is the very

latest in temperature measurement from Europe – Enoch presented it to

him as a sort of party favour. He lets it bounce through the surf for a few

minutes, then hauls it in a takes a reading.

He’s been trying to perform this ritual every four hours – the objective

being to see if there’s any rumour that the North Atlantic is striped with

currents of warm water. He can present the data to the Royal Society if

God-willing he reaches London.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Contrary Winds

Richard Rutterhttp://24ways.org/2006/compose-to-a-vertical-rhythm

Wilson Minerhttp://www.alistapart.com/articles/settingtypeontheweb

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

The little stuff

10. Text numerals in tables

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.

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

9. Framing

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

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Framing navigation

Schedule

Community

Practical

Partners

Schedule

Community

Practical

Partners

Schedule

Community

Practical

Partners

Schedule

Community

Practical

Partners

8. Ampersands in titles

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

<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%; }

7. Too many typefaces

Mix Sans Serif and Serif typefaces

Georgia HeadingsVerdana body

Georgia HeadingsTimes Body

6. Typesetting lists

• Barry Island• Rhoose• Llantwit Major• Bridgend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra feugiat nulla. Mauris eget purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nullam ac turpis. Curabitur ut nisl eget nulla molestie suscipit. Phasellus nibh purus, posuere in, suscipit ac, pharetra ac, ligula.

5. Incorrect letterspacing

Never negatively space lowercase

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

4. The wrong quotation marks

"It's a bloody aardvark!"

“It’s a bloody aardvark!”

“ ”

3. Hyphens instead of dashes

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

2. Incorrect markup

<h#> <blockquote> <ul> <ol>

1. Sticking to what you know

body { font-family: Verdana, Arial, sans-serif; }

body { font: 1em/1.4 Cambria, "Lucida Fax", "Palatino Linotype", "Hoefler Text", Rockwell, Serifa, Baskerville, "Lucida Sans", Georgia, "Trebuchet MS", "Bitstream Vera Serif", serif;}

Styles from Joe Clark’s weblog (http://fawny.org/blog/)

/* Headings */h1, h1 a.permalink:link, h1 a.permalink:visited{ font-family: Zapfino, "Zapfino One", "Zapfino Two", "Zapfino Three", "Apple Chancery", "Segoe Script", "Lucida Handwriting", "Lucida Calligraphy", "Caflisch Script", "Poetica",

"Sanvito", "Ex Ponto", "Snell Roundhand", "Nuptial Script", "Palace Script", "Park Avenue", "Poetica", "Shelley", "Kaufmann", "Zapf Chancery", "Zapf Chancery Medium Italic", "ITC Zapf Chancery", "ITC Zapf Chancery Medium Italic",

"Monotype Corsiva", Corsiva, "Zurich Calligraphic", "Chancery", Sand, Textile, Mead, Script, "URW Chancery L", "URW Chancery L Medium Italic", cursive; }

Watch out for:

HTML 5Maybe. Eventually. One day.

CSS3Maybe. Eventually. One day.

@font-faceMaybe. Eventually. One day. It’s already happening: Fontdeck, Typekit.

‘...It is not surface, it is not an extra, it is the thing itself’

Stephen Fry

Thank you

markboulton.co.uk markboultondesign.com twitter.com/markboulton