after the jump > jamie neely: prototyping web typography
DESCRIPTION
Web designers are looking for a smarter and more creative workflow to meet the demands of an increasingly complex digital world. Consciousness is turning to content, and therefore typography as the starting point for the design process. But type online is tricky: it has to look good AND behave well. This has lead to a trend of setting type for the web as a working prototype from the very start of a digital project, and developing a branded experience outwards from that key ingredient: readability. Jamie Neely was co-founder of Front, a web strategy, design and technology studio and is also the Creative Director at Typecast, which was recently acquired by Monotype. “We believe that as sites become more responsive, devices proliferate and screens shrink, typographic decisions become even more important and influential on site success.” http://www.typecast.comTRANSCRIPT
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