Opening The Flood Gates
Font Embedding & Typography
Mark Boulton
#wds09 Sydney 2009

Yellow Head!

‘With typographic design,
regardless of typeface,
you can’t not communicate’

1. What is Typography?
2. Typographic Structure
3. Type on the web
4. A better typographic web

What is Typography?

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

A world of
Verdana and Arial

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

typography
1 the mechanical notation and arrangement of language.

Typographic structure

Author’s
Conceptual
Structure

Author’s Reader’s
Conceptual Conceptual
Structure Structure

Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure

Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure
Brand values
Art direction

Elements of User Experience
Jesse James Garrett

surface visual design
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

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

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

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

CAMP #4
CAMP #3
CAMP #2
CAMP #1
BASE CAMP

LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

LANGUAGE

TYPESETTING

GRID

Heading 1
Heading 2
HIERARCHY
Heading 3
Designing in the browser is
‘web sites should good because:
not look the same • It’s quick to make changes
• It’s the right thing to do
in every browser’ • Malarkey will be chuffed

FONT

RHYTHM

LAYOUT

COLOUR

CONTENT

LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

LAYOUT ATTRIBUTES
COLOUR CONTENT
HIERARCHY FORM
FONT RHYTHM
LANGUAGE FUNCTION
TYPESETTING GRID

LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

Typography on the web

Limitations have nurtured good
typographic structure

Voiceless web fonts

The right tool for the job

Bad type?

#indefenseofcomicsans

#boultonsgonebloodymental

@markboulton stop
justifying nonsense. It
may do all those things
you say but has no place
in a designer’s toolkit.

@markboulton Do you still
love Comic Sans? Call
yourself a designer?
IDIOT

Pointy sharp serifs

Pointy
Pointy

Alien heads
found in
Georgia

@font-face

The current state of play

Browsers

Firefox 3.5
Safari 3.1
Opera 10
Internet Explorer 4 ! *
* .eot format

.ttf - TrueType
.otf - OpenType
.eot - Embedded Open Type

@font-face {
font-family: 'Foundry Sans';
/* for IE */
src: url('/fonts/FoundrySans/FoundrySans.eot');
/*
* for non-IE: first see if the font exists locally
on the browser's computer. If so, use that copy of
the font. Otherwise, load it from the server
*/
src: local('Foundry Sans'),
url('/fonts/FoundrySans/FoundrySans.ttf') format
('truetype');
}
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Technical challenges:
- Rendering
- Reverse Engineering
and...

Flash of untypeset content

Type Foundries

Designers

Solutions

Four things for
a better typographic web

#1 Fonts

#2 Foundries

Licensing

Price

#3 Investment

What makes a great web font?

Verdana has more
hinting information than
any other font

Multi-language support

Legibility

#4 Designers

http://www.flickr.com/photos/jrodenbiker/21808223

Drupal.org will serve 28,000 pages
instead of 20,000

Drupal.org will serve 28,000 pages
instead of 20,000
Drupal will be downloaded roughly
200 times

Drupal.org will serve 28,000 pages
instead of 20,000
Drupal will be downloaded roughly
200 times
7 new Drupal sites will launch

Drupal.org will serve 28,000 pages
instead of 20,000
Drupal will be downloaded roughly
200 times
7 new Drupal sites will launch
6 of them will be ugly

Provide smart defaults

82 choices

http://www.flickr.com/photos/aberra/358888041

10 x
http://www.flickr.com/photos/aberra/358888041

http://www.flickr.com/photos/biwook/390088839

Build a hierarchy
Suggest alternatives

The typographic cascade

sections → document
groupings → sections
paragraphs → groupings
sentences → paragraphs
words → sentences

Masthead / Branding
Orientation (navigation)
Headings
Body copy
Tables
Lists
Glyphs

Choose a headline typeface:
Georgia or Helvetica

Headings - Georgia
Body copy - Lucia Grande 0.68em/15
Lists - padding 1.4em
Tables - padding top / bottom
Orientation - .8em, italic, grey

Headings - Helvetica
Body copy - Cambria 0.68em/15
Lists - padding 1.6em
Tables - padding top / bottom
Orientation - 1em, Helvetica, italic, grey

So, where now?

LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

You can’t not communicate

Thank you
@markboulton
markboulton.co.uk
markboultondesign.com
mark@markboulton.co.uk