Opening the Flood Gates: Font Embedding and Typography

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.ﬂickr.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

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

LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID

LANGUAGE

TYPESETTING

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

RHYTHM

LAYOUT

COLOUR

CONTENT

LAYOUT ATTRIBUTES COLOUR CONTENT HIERARCHY FORM FONT RHYTHM LANGUAGE FUNCTION 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

#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.ﬂickr.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.ﬂickr.com/photos/aberra/358888041

10 x http://www.ﬂickr.com/photos/aberra/358888041

http://www.ﬂickr.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?

You can’t not communicate

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

Opening the Flood Gates: Font Embedding and Typography

by markboultondesign on Oct 07, 2009

Accessibility

Tags

Upload Details

Usage Rights

1 Embed 6

Statistics

Opening the Flood Gates: Font Embedding and Typography — Presentation Transcript