This presentation was originally give on September 11, 2011 in at the Type Directors Club in New York City. This talk focuses on Web typography, specifically for print designers looking to transition to Web design.

2. Feeling social? Use hashtag #tdc_salon

3. Type Directors Club Presents: Web Type for Print Designers
Brian Miller
9.22.11

4. Brian Miller
Owner of the Brian Miller Design Group
Education
Hartford Art School, BFA, Graphic Design, magna cum laude
Pratt Institute, MPS, Design Management, with distinction
Experience
Gartner, Global Creative Director
Wunderman Interactive, Associate Creative Director
Publcis Modem, Senior Art Director
Author
Above the Fold: Understanding the Principles of Successful Web Site Design
Published by HOW Design Books, March 2011
Service
Type Directors Club
Director at Large, Web Committee Chairman
2012 Competition Chair (TDC58)

5. Above the What? A bit about the book

7. @taylor_jacob
@Above_the_Fold Bought your book yesterday.
Was floored to find a Web Design resource that
wasn't 90% CSS Tutorials. Thank you.

8. Analyze Client User Plan
Above the Fold
Designer
Design

9. The Internet: According to NFL coach Vince Lombardi

11. This is a football

12. This is the Internet

13. Amazon.com
launches DrudgeReport.com Napster.com, a
CompuServe Craigslist.org
Yahoo.com launches launches peer-to-peer file
NYTimes.com changes its name to expands beyond
sharing Web site,
Image of Microsoft. launches Lycos.com Image of Apple.com San Francisco
launches Wikipedia.org
com from 1994 from 1997 (originally launched
CraigsList.org Cascading style launches
Microsoft releases in 1995)
WC3 is formed to launches sheets (CSS) Ebay.com launches
Mosaic, the Internet Explorer Microsoft releases
standardize HTML introduced Google Adwords Friendster.com
first consumer Microsoft releases Netscape version 5, which Internet Explorer
launches launches
Web-browsing Netscape Navigator Internet Explorer Microsoft releases Communicator Google.com, founded allowed users to version 6, which
application, is Web browser versions 1 (August) Internet Explorer replaces Netscape by Larry Page and save Web pages for Netscape version 6 included support Netscape version 7
released is released and 2 (November) version 4 Navigator Sergey Brin, launches the first time is released for CSS is released
1993 1994 1995 1996 1997 1998 1999 2000 2001 2002

14. Twitter.com
launches
Microsoft releases Twitter.com is
Internet Explorer used to organize
Facebook.com
version 7, which Microsoft launches and mobilize
MySpace.com launches
introduced tabbed Bing.com to compete relief efforts in
launches
Flickr.com launches browsing and a Candidate Web sites with Google Haiti following
WordPress content feed reader Apple introduces and social media play a the devastating
Mozilla Firefox Web Microsoft releases
blogging software is the iPhone and pivotal role in the earthquake.
browser is released, Mozilla Firefox Internet Explorer
introduced. mobile apps U.S. elections
which utilizes the version 2 is released version 8 with Mozilla Firefox
Apple releases the Gecko layout engine YouTube.com with tabbed Netscape Navigator Mozilla Firefox improved support for version 3.6 is
Safari Web browser to display Web pages launches browsing version 9 is released version 3 is released Ajax, CSS, and RSS released
2003 2004 2005 2006 2007 2008 2009 2010

17. I think they mean “designers”

19. 97% 76% 59% 46%
Millions of Colors Higher Than Windows XP Firefox
1024 x 768
Color depth Monitor resolution Operating system Browser

20. Form & function of Web design: Design conventions

25. Micro Bar
88 x 31, 10K, :15
Vertical Banner
120 x 240, 30K, :15
Pop-Under Button 1
720 x 300, 40K, :15 120 x 90, 20K, :15
Button 2 Square Button
120 x 60, 20K, :15
Leaderboard 125 x 125, 30K, :15
728 x 90, 40K, :15
Half-Page Ad Wide Skyscraper Skyscraper
300 x 600, 40K, :15 160 x 600, 40K, :15 120 x 600, 40K, :15
Full Banner
468 x 60, 40K, :15
Half Banner
234 x 60, 30K, :15
Vertical Rectangle Square Pop-Up 3:1 Rectangle Large Rectangle Medium Rectangle Rectangle
240 x 400, 40K, :15 250 x 250, 40K, :15 300 x 100, 40K, :15 336 x 280, 40K, :15 300 x 250, 40K, :15 180 x 150, 40K, :15

27. Search engine optimization (SEO)
Getting discovered: Browsing and searching

28. Crawler-based search engines
64 %
Google.com
Google 64%
Yahoo! 16%
Bing 11%
AOL Search 3%
Ask 2%
Other 3%

29. Elements and Weight of Google Ranking
1. Trust in the Host Domain
2. Link Popularity
3. Anchor Text of External Links
4. On-Page Keyword Usage
5. Traffic and Click-Through Rate
6. Social Graph Metrics
7. Registration and Host Data

30. Keywords
It’s essential to select keywords
based on the customer’s point of
view—not necessarily the client’s
internal vernacular.

31. Search engine optimization: Designing for spiders
Designing for SEO means using Web-specific design methods,
especially when it comes to displaying content, that yield visually
interesting and dynamic results that search engines can index.

34. Site planning: Information architecture
Information Architecture (IA) is the blueprint that maps out the
pages of a site and illustrates their relative weight or importance.

39. Anatomy of a Web page: Design conventions

40. 1
2
3 5
4
6
7

42. Anatomy of a Web page: Headers
Headers act as a grounding force for the user by identifying
and visually unifying all the pages of a site.

46. Anatomy of a Web page: Navigation
Navigation is a broad term that encompasses any aspect of a site
that links a user to another area of the site and is the cornerstone
of a site’s usability.

49. Anatomy of a Web page: Feature area
To achieve hierarchy, designers use a focal point—an area in the
composition that is perceived before all others.

54. Anatomy of a Web page: Body/content
Breaks in the content allow users to scan the layout quickly and
gives them multiple entry points into the page.

68. Organization & unity: Modularity
Modularity in Web design not only helps create design efficiencies,
but it can also aid in usability by repeating recognizable elements
that a user can identify.

71. Organization & unity: Containment
Borders, lines, and boxes can be helpful in defining the space and
containing elements within sub-groups.

74. Anatomy of a Web page: Sidebar
Sidebars are useful for providing supporting information
as well as advertising space.

76. Anatomy of a Web page: Footer
The footer has emerged over recent years as a critical part
of Web design, performing tasks for both the user and search
engine optimization.

79. Anatomy of a Web page: Background
Backgrounds can be used to create depth or dimension, add richness
with texture and color to a page, or even expand the content beyond
the borders of the page.

85. Elements of Web design style

86. Elements of Web design style: Color
Relationships of color help users create associations among
otherwise unrelated elements within a design. Contrasting color can
help a designer guide and direct a user through a layout.

89. Web design style: Texture
Adding texture to a Web design gives the user the sense of a tactile
experience and helps connect him or her to the content of a page.

91. Web design style: Imagery & iconography
The use of images or iconography can mean replacing wordy
descriptions with single images, making a layout easier for a user
to quickly get information.

93. Web design style: Scale
Contrast of size or scale is one way designers can add a sense of
drama to a design.

95. Web design style: Depth & Dimension
Applying depth and dimension to a page gives it an element of
realism, and, like texture, gives the user a more tactile experience.

97. Web design style: Animation
Animation is a tool used by digital designers to layer
information, create a sequence of information, or simply
surprise and delight the user.

99. Web design style: Variability
What was once considered to be unthinkable can now be a playful
way to add relevance and variety.

102. Web Typography

103. Types of Web type
The optimal choice for displaying type depends mostly on the
needs the client and the capabilities of the target user.
Designer Control User Control
Images of type Font replacement Type and image Web-safe type
(chirp.twitter.com) (typekit.com) combination (seedconference.com)
(branding.sva.edu)

104. Web typography: Images of type
Images of type enable a designer to exactly match branding
requirements for a client, or express a concept precisely as
the designer (or client) envisions.

108. Web typography: Web-safe type
Being able to do more with less is an essential skill
for a Web designer.

109. Windows Mac
Arial Arial, Helvetica
Arial Black Arial Black, Gadget
Comic Sans MS Comic Sans MS
Courier New Courier New, Courier
Georgia Georgia
Impact Impact, Charcoal
Lucida Console Monaco
Lucida Sans Unicode Lucida Grande
Palatino Linotype Palatino
Book Antiqua Georgia
Tahoma Tahoma
Times New Roman Times
Trebuchet MS Trebuchet MS
Verdana Verdana
Symbol Symbol
Webdings Webdings
Wingdings Zapf Dingbats
MS Sans Serif Geneva
MS Serif Georgia

110. Font stacks
Design is about having a plan.
Web design is about having a backup plan.
font-family = Georgia, [if you don’t have that then use]
“Times New Roman”, [if you don’t have that then use]
Times, [if you don’t have that, please just give me
something with a…] serif;

111. Font stacks
Verdana, Arial, Helvetica, sans-serif
Tahoma, Geneva, Arial, sans-serif
Georgia, Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Courier New, Courier, monospace
Lucida Console, Monaco, Courier, monospace

112. 200-Point Georgia 200-Point Times Roman
Designed in 1996 by Matthew Carter Designed in 1931 by Stanley Morison
(hinted for optimal screen viewing by and Victor Lardent (Monotype) for
Tom Rickner) specifically for the Web the Times newspaper
Counters X-Height Cap Height Baseline
The larger counters Notice the difference Even the height of The line on which
on Georgia increase in x-height at the the capital letters letters sit and the
legibility same type size differ at the same starting point when
point size measuring the x-height
and cap height

116. Web typography: Font replacement & embedding
Fonts represent valuable intellectual property and @font-face leaves
some question as to the end user’s ability to reuse the font without
paying for it.

117. @font-face
@font-face {
font-family: “Dispatch”;
src: url(http://www.WebSite.com/fonts/dispatch.ttf);
format(“truetype”);
}
h1 { font-family: “Dispatch”, sans-serif }

130. TypeKit.com
Typekit.com offers subscription-based access to fonts for
Web sites, including fonts from TypeTogether’s font foundry,
also seen here.

132. Web typography: Font conversion

133. Cufón
Cufón works by converting font informations into VML
(Vector Markup Language), which is rendered and displayed
on the users’s computer. This proprietary JavaScript function
prevents the end user from ever downloading the font,
avoiding issues of redistribution.
Above
Dispatch The Fold
.ttf

137. End: Q&A

138. End: Thank you!