Lecture on web typography. Presented by Erika Tarte for Lucinda Hitchcock's Typography I class at the Rhode Island School of Design, Fall 2010.

1. with great power
Erik a tartE
Typography I, Lucinda Hitchcock
Rhode Island School of Design

2. “ With great power there must also come
— great responsibility.
S tan LEE
Amazing Fantasy #15, Spiderman #1

3. more ≠ better

4. typefaces

5. What makes a good screen typeface?

6. What makes a good screen typeface?
Large x-height

7. Web Web
GEorGia vs. BaSkErviLLE

8. Web Web
GEorGia vs. BaSkErviLLE

9. Does the future of the internet Does the future of the internet have
have room for web designers? room for web designers?
It seems that new posts about what the Internet has in It seems that new posts about what the Internet has in store
store for us down the road pop up every week or two. for us down the road pop up every week or two. Some
Some propose that the Internet will deliver more of the propose that the Internet will deliver more of the same, but
same, but different somehow (it’s usually ambiguous just different somehow (it’s usually ambiguous just how), while
how), while others propose such radical changes that it’s others propose such radical changes that it’s hard to believe
hard to believe they could ever happen. And the truth is, they could ever happen. And the truth is, none of us really
none of us really know what will happen with the Internet know what will happen with the Internet in 10 or 15 years.
in 10 or 15 years.
After all, it was only a little more than 15 years ago that
After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!”
Clifford Stoll wrote the now-infamous “The Internet? post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will
Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, Never Be, Nirvana”). In that post he detailed why a lot of
and Will Never Be, Nirvana”). In that post he detailed things just wouldn’t happen online but most of which are now
why a lot of things just wouldn’t happen online but most commonplace.
of which are now commonplace.
As web designers and developers, what the future holds for
As web designers and developers, what the future holds the Internet is imperative for our livelihoods. If the Internet
for the Internet is imperative for our livelihoods. If the has radical changes in store for us, we need to understand
Internet has radical changes in store for us, we need to how they might effect what we do to earn a living and what
understand how they might effect what we do to earn a we’ll need to do to adapt and keep pace — if that’s even
living and what we’ll need to do to adapt and keep pace possible.
— if that’s even possible.
GEorGia vs. BaSkErviLLE

10. What makes a good screen typeface?
Large x-height
Open apertures & larger counters + bowls

11. Web Web
GEorGia vs. timES nE w roman

12. Web Web
GEorGia vs. timES nE w roman

13. eө eө
Lucida Gr andE vs. couriEr nE w

14. What makes a good screen typeface?
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing

15. Looser?
tahoma

16. Winner!
vErdana

17. What makes a good screen typeface?
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
Distinct letter shapes

18. l1i l1i l1i
GEorGia timES nE w roman chaparr aL
l1i l1i l1i
hELvE tic a GiLL SanS vErdana

19. l1i l1i l1i
GEorGia timES nE w roman chaparr aL
l1i l1i l1i
hELvE tic a GiLL SanS vErdana

20. What makes a good screen typeface?
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
Distinct letter shapes
Unmodulated strokes

21. Web Web
mErcury Gr adE 4 vs. mErcury Gr adE 1

22. Web
mErcury Gr adE 4 vs. mErcury Gr adE 1

23. Web
mErcury Gr adE 4 vs. mErcury Gr adE 1

24. What makes a good screen typeface?
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
Distinct letter shapes
Unmodulated strokes
Good hinting

25. FEdr a SanS ScrEEn via t yp othEquE

26. More on hinting
Font Hinting pE tEr B iL’ak
http://www.typotheque.com/articles/hinting
On Screen Legibility a ScEndEr corp or ation
http://www.ascendercorp.com/fonts/on-screen-legibility

27. structure + style

28. html + css

29. html, the text that makes the web go ‘round
HTML = HyperText Markup Language
Formatting language
System of tags communicating a page’s content to the browser
Can be created in any text editor

30. html tags
Written inside angle brackets (<>)
Consists of an opening tag and closing tag
Tells browser which elements are contained on a page

31. html tags
<html> </html>
a taG consists of an opEninG taG & cLoSinG taG for an html ELEmEnt
<h1>Primary Headline</h1>
<h2>Secondary Headline</h2>
<p>Paragraph of text</p>
<a href="http://www.google.com">Link</a>
tags communicate content SEmanticS

32. html attributes
All html tags have attributes
An attribute is a quality or characteristic of the element
Elements can have multiple attributes

33. html attributes
<a href="http://google.com">Link</a>
ELEmEnt

34. html attributes
<a href="http://google.com">Link</a>
at triButE

35. html attributes
<a href="http://google.com">Link</a>
vaLuE

36. html class & id attributes
Give you more control over the elements when you start using CSS
No inherent styles or properties
Different elements can share the same class
IDs are unique, and different elements can’t share them

37. html class & id attributes
<a href="http://google.com" class="button">Link</a>
<a href="http://google.com" id="button1">Link</a>

38. css, the basics
CSS = Cascading Style Sheet
HTML says what to display, CSS says how to display it!
Simple text file containing rules for how to display HTML tags

39. css, the basics
CSS is cascading, meaning style rules are applied in order,
the last rules taking priority over earlier rules
Simple syntax

40. css syntax
selector { SELEc tor is the html element that
you are writing rules for
property: value;
property: value;
}

41. css syntax
selector {
property: value; propErt y is a display characteristic you
are writing a rule for. Each selector can have
property: value; multiple properties, and some selectors have
} very specif ic properties.

42. css syntax
selector {
property: value; vaLuE is the display characteristic that you
want to apply to the property
property: value;
}

43. css syntax
sandwich {
cheese: cheddar;
bread: rye;
condiment: mustard;
condiment-style: spicy-brown;
}

44. css syntax
a {
font-family: Helvetica;
font-size: 12px;
font-weight:bold;
text-transform:uppercase;
color:#000000;
}

45. css syntax
a {
font-family: Helvetica;
font-size: 12px;
font-weight:bold;
text-transform:uppercase;
color:#000000;
}
.button {
font-family: Georgia;
}

46. Font stacking
Applies to the font-family: css property
Is a prioritized list of fonts to display
Start with a very specific typeface, move to a generic classification

47. Font stacking
h1 {
font-family: Akkurat, Helvetica, sans-serif;
}

48. Why use font stacking?
Essentially a safety net for displaying different fonts on the web
Browsers only display fonts installed on the user’s computer,
except when @font-face rule is employed

49. @font-face:
CSS rule revolutionizing web typography
Has actually been around for many years
Until 2008, was only supported on IE browsers using EOT fonts
March 2009, Safari began supporting it with OTF and TTF fonts
July 2009, Firefox began supporting it with OTF and TTF fonts
Fall 2009, Firefox supports it with Web Open Font Format (WOFF)
WOFF and @font-face are backed by major type foundries

50. @font-face:
@font-face {
font-family: Akkurat;
src: url(‘akkurat.woff’) format(‘woff’);
}

51. @font-face:
@font-face {
font-family: Akkurat;
src: url(‘akkurat.woff’) format(‘woff’);
}
h1 {
font-family: Akkurat, Helvetica, sans-serif;
}

52. @font-face: in use
Lost Worlds Fair’s
http://lostworldsfairs.com/
Quipsologies
http://www.underconsideration.com/quipsologies/
Typographic Diversity for the Web
http://edenspiekermann.com/woff/

53. @font-face: resources
Typekit
http://typekit.com
Font Bureau’s Web Type
http://webtype.com
Typotheque Web Fonts
http://typotheque.com/webfonts
Google Font API
https://code.google.com/apis/web
Font Deck
http://fontdeck.com

54. good web design = good typography

55. Good web design & good typography =
Readability
Accessibility
Usability

56. Good web design & good typography =
Typeface Structure vs. Style Cellphones?
Size Dynamic text Responsiveness
Leading Flexibility Pages?
Line length Elasticity Hierarchy
Color Text as Interface Search
Texture Semantic HTML
Columns? Mac vs. Windows

57. “ Professional typography is not just
pretty to look at. It facilitates the process
of reading. If you look at text as an interface,
typography is its usability.
oLivEr rEichEnS tEin
www.informationarchitects.jp

58. the future
will need good
typographers

59. Articles
On Web Typography Ja Son Santa maria
http://alistapart.com/articles/on-web-typography
Web Fonts at the Crossing richard Fink
http://alistapart.com/articles/fonts-at-the-crossing
The Potential of Web Typography ian Lynam & cr aiG mod
http://craigmod.com/journal/font-face
Web Design is 95% Typography oLivEr rEichEnS tEin
http://informationarchitects.jp/en/the-web-is-all-about-typography-period

60. Tips & tools
Web Font Specimen
http://webfontspecimen.com
Type Tester
http://typetester.org
Baseline Rhythm Calculator
http://topfunky.com/baseline-rhythm-calculator
Px to Em Conversion
http://pxtoem.com
Font Squirrel @font-face Generator
http://www.fontsquirrel.com/fontface/generator

61. Blogs
Craig Mod Big Web Show
http://craigmod.com http://5by5.tv/bigwebshow
Jason Santa Maria A List Apart
http://jasonsantamaria.com http://www.alistapart.com/
Jeffrey Zeldman Readable Web
http://www.zeldman.com http://readableweb.com
Subtraction (Khoi Vinh) Smashing Magazine
http://www.subtraction.com http://smashingmagazine.com
Type Kit Blog Information Architects
http://typekit.com/blog http://informationarchitects.jp