with great power, a lecture on web typography
DESCRIPTION
Lecture on web typography. Presented by Erika Tarte for Lucinda Hitchcock's Typography I class at the Rhode Island School of Design, Fall 2010.TRANSCRIPT
Erik a tartE
Typography I, Lucinda Hitchcock Rhode Island School of Design
with great power
With great power there must also come — great responsibility.
Stan LEE
Amazing Fantasy #15, Spiderman #1
“
more ≠ better
typefaces
What makes a good screen typeface?
Large x-height
What makes a good screen typeface?
WebGEorGia vs. BaSkErviLLE
Web
WebGEorGia vs. BaSkErviLLE
Web
Does the future of the internet have room for web designers?
It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.
After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.
As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.
GEorGia vs. BaSkErviLLE
Does the future of the internet have room for web designers?
It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.
After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.
As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.
Large x-height
Open apertures & larger counters + bowls
What makes a good screen typeface?
GEorGia vs. timES nEw roman
Web Web
GEorGia vs. timES nEw roman
Web Web
eө eөLucida Gr andE vs. couriEr nEw
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
What makes a good screen typeface?
Looser?tahoma
Winner!vErdana
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
Distinct letter shapes
What makes a good screen typeface?
l1iGEorGia
l1i l1i
l1i l1i l1ihELvEtica GiLL SanS vErdana
timES nEw roman chaparr aL
l1iGEorGia
l1i l1i
l1i l1i l1ihELvEtica GiLL SanS vErdana
timES nEw roman chaparr aL
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
Distinct letter shapes
Unmodulated strokes
What makes a good screen typeface?
mErcury Gr adE 4 vs. mErcury Gr adE 1
Web Web
WebmErcury Gr adE 4 vs. mErcury Gr adE 1
mErcury Gr adE 4 vs. mErcury Gr adE 1
Web
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
Distinct letter shapes
Unmodulated strokes
Good hinting
What makes a good screen typeface?
FEdr a SanS ScrEEn via t ypothEquE
Font Hinting pEtEr BiL’ak http://www.typotheque.com/articles/hinting
On Screen Legibility aScEndEr corpor ation http://www.ascendercorp.com/fonts/on-screen-legibility
More on hinting
structure + style
html + css
HTML = HyperText Markup Language
Formatting language
System of tags communicating a page’s content to the browser
Can be created in any text editor
html, the text that makes the web go ‘round
Written inside angle brackets (<>)
Consists of an opening tag and closing tag
Tells browser which elements are contained on a page
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
html tags
All html tags have attributes
An attribute is a quality or characteristic of the element
Elements can have multiple attributes
html attributes
<a href="http://google.com">Link</a>ELEmEnt
html attributes
<a href="http://google.com">Link</a> at triButE
html attributes
<a href="http://google.com">Link</a> vaLuE
html 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
html class & id attributes
html class & id attributes
<a href="http://google.com" class="button">Link</a>
<a href="http://google.com" id="button1">Link</a>
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
css, the basics
CSS is cascading, meaning style rules are applied in order, the last rules taking priority over earlier rules
Simple syntax
css, the basics
selector { property: value; property: value; }
SELEctor is the html element that you are writing rules for
css syntax
selector { property: value; property: value; }
propErt y is a display characteristic you are writing a rule for. Each selector can have multiple properties, and some selectors have very specif ic properties.
css syntax
selector { property: value; property: value; }
vaLuE is the display characteristic that you want to apply to the property
css syntax
sandwich { cheese: cheddar; bread: rye; condiment: mustard; condiment-style: spicy-brown; }
css syntax
a { font-family: Helvetica; font-size: 12px; font-weight:bold; text-transform:uppercase; color:#000000; }
css syntax
a { font-family: Helvetica; font-size: 12px; font-weight:bold; text-transform:uppercase; color:#000000; } .button { font-family: Georgia; }
css syntax
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
Font stacking
h1 { font-family: Akkurat, Helvetica, sans-serif; }
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
Why use font stacking?
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
@font-face:
@font-face { font-family: Akkurat; src: url(‘akkurat.woff’) format(‘woff’); }
@font-face:
@font-face { font-family: Akkurat; src: url(‘akkurat.woff’) format(‘woff’); }
h1 { font-family: Akkurat, Helvetica, sans-serif; }
@font-face:
Lost Worlds Fair’s http://lostworldsfairs.com/
Quipsologies http://www.underconsideration.com/quipsologies/
Typographic Diversity for the Web http://edenspiekermann.com/woff/
@font-face: in use
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
@font-face: resources
good web design = good typography
Readability
Accessibility
Usability
Good web design & good typography =
Typeface
Size
Leading
Line length
Color
Texture
Columns?
Structure vs. Style
Dynamic text
Flexibility
Elasticity
Text as Interface
Semantic HTML
Mac vs. Windows
Good web design & good typography =
Cellphones?
Responsiveness
Pages?
Hierarchy
Search
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 rEichEnStEin
www.informationarchitects.jp
“
the future will need good typographers
On Web Typography JaSon 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 rEichEnStEin http://informationarchitects.jp/en/the-web-is-all-about-typography-period
Articles
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
Tips & tools
Craig Mod http://craigmod.com
Jason Santa Maria http://jasonsantamaria.com
Jeffrey Zeldman http://www.zeldman.com
Subtraction (Khoi Vinh) http://www.subtraction.com
Type Kit Blog http://typekit.com/blog
Blogs
Big Web Show http://5by5.tv/bigwebshow
A List Apart http://www.alistapart.com/
Readable Web http://readableweb.com
Smashing Magazine http://smashingmagazine.com
Information Architects http://informationarchitects.jp