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.com

1. PROTOTYPING WITH
WEB TYPOGRAPHY
tweet @jamneely @typecastapp
JAMIE NEELY

2. TYPE FIRST
PROTOTYPING
PRACTICAL EXAMPLES

3. 2009/2010

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

5. 8%
17%
May‘12 May‘13
Websites that use web fonts have
DOUBLED in the past year
Source: httparchive.com/trends

6. Sony USA homepage (set in ITC Avant Garde Gothic)

7. Microsoft worldwide homepage (set in Segoe UI)

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

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

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

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

12. War Child

13. About.me web font options

14. TYPE FIRST

15. The shift

18. PROTOTYPING

21. In case you didn't get the memo,
wireframing is dead and prototypes
are the only way forward.
— Joshua Porter, hubspot

23. IDEO sketchnote From 99u Conference by C Todd Lombardo

25. HTML/CSS is real in a way
Photoshop will never be.
— Jason Fried, 37 Signals

28. Typography for the Web
is really hard to design anywhere
other than inside the browser.
— Viljami Salminen

30. CSS
p {
font-style: italic;
font-weight: 400;
font-family: MillerDisplay;
}

32. Working with web fonts is hard

34. Typecast
screencast
Typecast.com

35. Early demos of Typecast

36. Early demos of Typecast

37. Early demos of Typecast

39. PRACTICAL EXAMPLES

40. Type as brand
The reading experience
Cross-screen journeys

41. Type as brand
The reading experience
Cross-screen journeys

42. Type is the clothes that words wear.
— Steve Mattheson

43. A quote
Elevator pitch
Project brief
Word cloud
Hello world
SPECIMENS

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

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

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

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

49. The winning specimen, Brandon Grotesque and Caslon 224

57. Type as brand
The reading experience
Cross-screen journeys

58. Likable
Legible
Readable

59. Webfontspecimen.com from Tim Brown / Typekit

64. Helvetica (grey) vs Helvetica eText (red)

65. Likable
Legible
Readable

66. Lorum ipsum et stupid

67. Lists
Navigation schemes
Comment streams
Galleries
Mastheads & footers
GLOBAL CONTENT
A blog article
Home page
Mission statement
Author bio
An event description
UNIQUE CONTENT

84. Rendering & clarity
Family size & weight availability
Language support
OpenType support
File size & page weight
Accessibility & fall backs
PERFORMANCE

85. Type as brand
The reading experience
Cross-screen journeys

87. Smart phones
Not-so smart phones
Computers and tablets
E-readers
Cars
Fridges
Kiosks

88. Size of viewport
Screen density
Orientation
Aspect ratio
Rendering technology
DEVICE & TECHNOLOGY
Noise and distraction
Screen-to-eye distance
Light & illumination
Weight to hold
User disability
HUMAN & ENVIRONMENT

89. Working with web fonts is hard

90. Working with web fonts is hard

91. Working with web fonts is hard

92. Working with web fonts is hard

93. Working with web fonts is hard

94. Working with web fonts is hard

95. Working with web fonts is hard

96. Working with web fonts is hard

97. Working with web fonts is hard

98. Working with web fonts is hard

99. Working with web fonts is hard

100. Working with web fonts is hard

101. Working with web fonts is hard

102. Working with web fonts is hard

103. Working with web fonts is hard

104. Working with web fonts is hard

105. Working with web fonts is hard

106. Working with web fonts is hard

110. Invoices
Receipts
Forgot password
Marketing emails
Newsletters
Blank slates
Product updates
Service maintenance
Activity updates
TRANSACTIONAL, MARKETING & SERVICE EMAILS

112. Type as brand
Specimens, font choice
The reading experience
Global & unique content
Cross-screen journeys
Devices, locations & email

113. Working with web fonts is hard
Typography

114. QUESTIONS?
tweet @jamneely @typecastapp
JAMIE NEELY