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
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
24. What makes a good screen typeface?
Large x-height
Open apertures & larger counters + bowls
Loose letterspacing
Distinct letter shapes
Unmodulated strokes
Good hinting
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
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
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;
}
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
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
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/
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
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