after the jump > jamie neely: prototyping web typography

PROTOTYPING WITHWEB TYPOGRAPHY

tweet @jamneely @typecastapp

JAMIE NEELY

TYPE FIRST

PROTOTYPING

PRACTICAL EXAMPLES

2009/2010

2009/2010With great power comes… (you know the rest)

8%

17%

May ‘12 May ‘13

Websites that use web fonts have DOUBLED in the past year

Source: httparchive.com/trends

Sony USA homepage (set in ITC Avant Garde Gothic)

Microsoft worldwide homepage (set in Segoe UI)

“Into the Arctic” from Greenpeace (set in Brandon Grotesque and Rooney)

The World Wildlife Fund homepage (set in Open Sans and custom WWF font)

The World Wildlife Fund homepage (set in Open Sans and custom WWF font)The World Wildlife Fund

“Dadaab Stories” from Film Aid (set in Cubano and Nunito)

War Child

About.me web font options

TYPE FIRST

The shift

PROTOTYPING

In case you didn't get the memo, wireframing is dead and prototypes

are the only way forward.

— Joshua Porter, hubspot

IDEO sketchnote From 99u Conference by C Todd Lombardo

HTML/CSS is real in a way Photoshop will never be.

— Jason Fried, 37 Signals

Typography for the Web is really hard to design anywhere

other than inside the browser.

— Viljami Salminen

CSSp { font-style: italic; font-weight: 400; font-family: MillerDisplay;}

Working with web fonts is hard

Typecast  screencast

Typecast.com

Early demos of Typecast

Early demos of Typecast

Early demos of Typecast

PRACTICAL EXAMPLES

Type as brand

The reading experience

Cross-screen journeys

Type as brand

The reading experience

Cross-screen journeys

Type is the clothes that words wear.

— Steve Mattheson

A quoteElevator pitchProject briefWord cloudHello world

SPECIMENS

Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)

Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)

A Typecast ‘canvas’ showing side-by-side type specimens

Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)

The winning specimen, Brandon Grotesque and Caslon 224

Type as brand

The reading experience

Cross-screen journeys

Likable

Legible Readable

Webfontspecimen.com from Tim Brown / Typekit

Helvetica (grey) vs Helvetica eText (red)

Likable

Legible Readable

Lorum ipsum et stupid

ListsNavigation schemesComment streams

GalleriesMastheads & footers

GLOBAL CONTENT

A blog articleHome page

Mission statementAuthor bio

An event description

UNIQUE CONTENT

Rendering & clarityFamily size & weight availability

Language supportOpenType support

File size & page weightAccessibility & fall backs

PERFORMANCE

Type as brand

The reading experience

Cross-screen journeys

Smart phonesNot-so smart phones

Computers and tabletsE-readers

CarsFridgesKiosks

Size of viewportScreen density

Orientation Aspect ratio

Rendering technology

DEVICE & TECHNOLOGY

Noise and distractionScreen-to-eye distance

Light & illuminationWeight to holdUser disability

HUMAN & ENVIRONMENT

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

Working with web fonts is hard

InvoicesReceipts

Forgot passwordMarketing emails

NewslettersBlank slates

Product updatesService maintenance

Activity updates

TRANSACTIONAL, MARKETING & SERVICE EMAILS

Type as brandSpecimens, font choice

The reading experienceGlobal & unique content

Cross-screen journeysDevices, locations & email

Working with web fonts is hard

Typography

QUESTIONS?

tweet @jamneely @typecastapp

JAMIE NEELY