This is an
    inspirational talk on
               type & lettering
*   If you are looking for practical talk on CSS & fo...
My Name is
Samantha Warren
    Senior Web Designer at Phase2 Technology
           just outside of Washington DC in Alexan...
*   I am obsessed with the upper-case Rs



*   This presentation was designed using Semilla by
    Alejandro Paul & Leagu...
Beautiful
 Typography & Letters are
Everywhere
http://www.flickr.com/photos/eyetwist/467479413/in/
             set-72157600056558735/
The creativity of offline
lettering & type
    is just starting to
      be used online
http://www.thesmallstakes.com/
http://www.thesmallstakes.com/
http://www.flickr.com/photos/etisfedup/3384247975
http://jessicahische.blogspot.com/
Typography is not what
    font you use but
how you use it.
http://www.flickr.com/photos/eyetwist/467479413/in/
                          set-72157600056558735/
http://www.flickr.com/p...
http://www.flickr.com/photos/eyetwist/467479413/in/
                          set-72157600056558735/
http://www.flickr.com/p...
But a typeface can provide
   context to convey an
  Emotion
No Georgia
No Arial
Free Yourself
stoked
adjective - to be "stoked" is to
be completely and intensely
enthusiastic, exhilarated, or
excited about something.
On the web
Freedom is still found
  within constraints
Evaluate the situation
* Are there technical or brand requirements
  What are the needs of the majority of targeted users?...
*  What is the predominant OS & browser of the targeted user?

* Is the site content heavy?

* Do users need to select the...
Analyze
How will the user digest the information?
In the site hierarchy, what type of information
needs to be most legible?
Legibility
* stroke width
* shape exaggeration
* proportion
* x-height
Ah Ah Ah
Dynamically grow cooperative synergy for                Dynamically grow cooperative synergy for competitive              ...
Display Type vs Body Copy
Display Type
Determine what
method works best for the
   requirements.
Push the limits
by first finding the
 emotion
   of your site.
How do you do this?
How do you choose a pair of
      shoes?
Some fonts are used a lot
all Fonts communicate
   feelings
Approachable
http://www.flickr.com/photos/pigdump/1217825210/
http://www.flickr.com/photos/pigdump/1217825210/
Feelings can be
complex.
“Formal because of a
   formality”
“Traditional but
daringly casual ”
Let the feeling
guide your choice
Worry less about trends &
more about emotion
What if your website
needed a pair of
    shoes?
Get in touch with your
Font Feelings
Then determine how to
  execute
Image Replacement, Font Stacks,
  & sIFR are still widely used
  but how can we
  move forward?
Cufón
Works & renders type consistently
over most major browsers.
  Requires no plug-ins
* Is not selectable
* Only can be...
@font-face
Requires some legwork to get
consistent results across all browsers
  No Pricing
* Only open to fonts who’s EUL...
@font-face	{
  font-family: "Badass Sans";
  src: url("http://server1.com/BadassSansR.otf");
}

<!--[if IE]>
@font-face	{
...
Where do you get
fonts that you can
      embed?
Font Services
They work & render type consistently over
most major browsers except for windows
users with ClearType disabl...
CSS3 +
Type
Text Shadow
text shadow: 1px 1px 1px rgba (255, 255, 255, 0.5)




                                               X
Multiple Columns
 column-width: 300px;
  column-gap: 30px;




                        X X
Rotate
transform: rotate (30deg);




                             X X
Are there no fonts available that
communicate your feeling?
en Make One
Low-fi
http://www.yourfonts.com
Way More Serious
http://www.fontlab.com
or Modify an Open Source Font
The Possibilities are Endless
Go Forth &
Be Badass
http://www.flickr.com/photos/eyetwist/467479413/in/set-72157600056558735
             http://katearends.com/blog/2010/02/fin...
Special Thanks: My CDIA Intro GD class
                Josh Sager
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Get Stoked on Web Typography SXSW 2010
Upcoming SlideShare
Loading in...5
×

Get Stoked on Web Typography SXSW 2010

100,819

Published on

Typography can make or break a design, but there are big differences between what makes jaw-dropping type offline from what makes great type online? In this presentation, Samantha will evaluate interesting offline lettering and discuss how you can translate those principles and leverage CSS3, @font-face, and new font-as-service web apps to create engaging online typographic experiences.

Presentation By Samantha Warren
Senior Designer at
http://www.phase2technology.com

@Samanthatoy on twitter


Blog: http://www.badassideas.com

Published in: Design, Technology
22 Comments
478 Likes
Statistics
Notes
No Downloads
Views
Total Views
100,819
On Slideshare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
0
Comments
22
Likes
478
Embeds 0
No embeds

No notes for slide

Get Stoked on Web Typography SXSW 2010

  1. 1. This is an inspirational talk on type & lettering * If you are looking for practical talk on CSS & fonts: 5pm Tomorow in Ballroom F If you are looking for a talk on the Future of web * fonts: 9:30am tomorrow in Ballroom B
  2. 2. My Name is Samantha Warren Senior Web Designer at Phase2 Technology just outside of Washington DC in Alexandria, VA I am on the board of the Art Directors Club of * Washington DC I teach Typography, Graphic, & Web Design at the * Center for Digital Imaging Arts at Boston U.
  3. 3. * I am obsessed with the upper-case Rs * This presentation was designed using Semilla by Alejandro Paul & League Gothic by the League of Moveable Type * You can find me blogging about design & type at BadAssIdeas.com & I love talking type on twitter @Samanthatoy
  4. 4. Beautiful Typography & Letters are Everywhere
  5. 5. http://www.flickr.com/photos/eyetwist/467479413/in/ set-72157600056558735/
  6. 6. The creativity of offline lettering & type is just starting to be used online
  7. 7. http://www.thesmallstakes.com/
  8. 8. http://www.thesmallstakes.com/
  9. 9. http://www.flickr.com/photos/etisfedup/3384247975
  10. 10. http://jessicahische.blogspot.com/
  11. 11. Typography is not what font you use but how you use it.
  12. 12. http://www.flickr.com/photos/eyetwist/467479413/in/ set-72157600056558735/ http://www.flickr.com/photos/feltron/396517147/in/set-72057594075645138/
  13. 13. http://www.flickr.com/photos/eyetwist/467479413/in/ set-72157600056558735/ http://www.flickr.com/photos/feltron/396517147/in/set-72057594075645138/
  14. 14. But a typeface can provide context to convey an Emotion
  15. 15. No Georgia
  16. 16. No Arial
  17. 17. Free Yourself
  18. 18. stoked adjective - to be "stoked" is to be completely and intensely enthusiastic, exhilarated, or excited about something.
  19. 19. On the web Freedom is still found within constraints
  20. 20. Evaluate the situation * Are there technical or brand requirements What are the needs of the majority of targeted users? * provided by the client?
  21. 21. * What is the predominant OS & browser of the targeted user? * Is the site content heavy? * Do users need to select the text? * Does consistency across browsers matter to this client? * Does the client have a budget for fonts?
  22. 22. Analyze How will the user digest the information? In the site hierarchy, what type of information needs to be most legible?
  23. 23. Legibility * stroke width * shape exaggeration * proportion * x-height
  24. 24. Ah Ah Ah
  25. 25. Dynamically grow cooperative synergy for Dynamically grow cooperative synergy for competitive Dynamically grow cooperative synergy for competitive leadership skills. Synergistically leadership skills. Synergistically maintain revolutionary e- competitive leadership skills. Synergistically maintain revolutionary e-markets after innovative markets after innovative schemas. Appropriately schemas. Appropriately administrate process- maintain revolutionary e-markets after innovative administrate process-centric intellectual capital before centric intellectual capital before best-of-breed best-of-breed infrastructures. schemas. Appropriately administrate process- infrastructures. centric intellectual capital before best-of-breed Seamlessly leverage existing go forward leadership with Seamlessly leverage existing go forward infrastructures. future-proof processes. Synergistically iterate real-time leadership with future-proof processes. portals rather than client-centered channels. Completely Synergistically iterate real-time portals rather Seamlessly leverage existing go forward procrastinate multifunctional portals vis-a-vis parallel than client-centered channels. Completely leadership with future-proof processes. human capital. procrastinate multifunctional portals vis-a-vis Synergistically iterate real-time portals rather parallel human capital. Conveniently matrix client-centered customer service than client-centered channels. Completely Conveniently matrix client-centered customer rather than end-to-end relationships. Enthusiastically deploy sticky core competencies with viral solutions. procrastinate multifunctional portals vis-a-vis service rather than end-to-end relationships. Enthusiastically deploy sticky core competencies Intrinsicly evisculate worldwide networks vis-a-vis tactical parallel human capital. with viral solutions. Intrinsicly evisculate networks. worldwide networks vis-a-vis tactical networks. Conveniently matrix client-centered customer Efficiently utilize virtual schemas and vertical total linkage. service rather than end-to-end relationships. Efficiently utilize virtual schemas and vertical total Uniquely mesh next-generation quality vectors whereas linkage. Uniquely mesh next-generation quality effective outsourcing. Globally network holistic Enthusiastically deploy sticky core competencies vectors whereas effective outsourcing. Globally deliverables without innovative solutions. with viral solutions. Intrinsicly evisculate worldwide network holistic deliverables without innovative networks vis-a-vis tactical networks. solutions. Efficiently utilize virtual schemas and vertical total linkage. Uniquely mesh next-generation quality vectors whereas effective outsourcing. Globally network holistic deliverables without innovative solutions.
  26. 26. Display Type vs Body Copy
  27. 27. Display Type
  28. 28. Determine what method works best for the requirements.
  29. 29. Push the limits
  30. 30. by first finding the emotion of your site.
  31. 31. How do you do this?
  32. 32. How do you choose a pair of shoes?
  33. 33. Some fonts are used a lot
  34. 34. all Fonts communicate feelings
  35. 35. Approachable
  36. 36. http://www.flickr.com/photos/pigdump/1217825210/
  37. 37. http://www.flickr.com/photos/pigdump/1217825210/
  38. 38. Feelings can be complex.
  39. 39. “Formal because of a formality”
  40. 40. “Traditional but daringly casual ”
  41. 41. Let the feeling guide your choice
  42. 42. Worry less about trends & more about emotion
  43. 43. What if your website needed a pair of shoes?
  44. 44. Get in touch with your Font Feelings
  45. 45. Then determine how to execute
  46. 46. Image Replacement, Font Stacks, & sIFR are still widely used but how can we move forward?
  47. 47. Cufón Works & renders type consistently over most major browsers. Requires no plug-ins * Is not selectable * Only can be used with fonts whose * EULAs support font embedding
  48. 48. @font-face Requires some legwork to get consistent results across all browsers No Pricing * Only open to fonts who’s EULA * allow font embedding * Flashes when loading
  49. 49. @font-face { font-family: "Badass Sans"; src: url("http://server1.com/BadassSansR.otf"); } <!--[if IE]> @font-face { font-family: "Badass Sans"; src: url("http://server2.com/BadassSansR.eot"); } <![endif]-->
  50. 50. Where do you get fonts that you can embed?
  51. 51. Font Services They work & render type consistently over most major browsers except for windows users with ClearType disabled. Have set pricing structures * Only includes offered fonts * Flashes when loading *
  52. 52. CSS3 + Type
  53. 53. Text Shadow text shadow: 1px 1px 1px rgba (255, 255, 255, 0.5) X
  54. 54. Multiple Columns column-width: 300px; column-gap: 30px; X X
  55. 55. Rotate transform: rotate (30deg); X X
  56. 56. Are there no fonts available that communicate your feeling?
  57. 57. en Make One
  58. 58. Low-fi http://www.yourfonts.com
  59. 59. Way More Serious http://www.fontlab.com
  60. 60. or Modify an Open Source Font
  61. 61. The Possibilities are Endless
  62. 62. Go Forth & Be Badass
  63. 63. http://www.flickr.com/photos/eyetwist/467479413/in/set-72157600056558735 http://katearends.com/blog/2010/02/finished-save-the-dates/ http://www.flickr.com/photos/eyetwist/467479413/in/set-72157600056558735/ http://www.flickr.com/photos/feltron/396517147/in/set-72057594075645138/ http://www.flickr.com/photos/eyetwist/467479413/in/set-72157600056558735/ http://www.flickr.com/photos/etisfedup/3384247975 http://pentagram.com/en/new/2008/12/new-work-truvia.php http://www.flickr.com/photos/kolbo/4173842900/ http://www.flickr.com/photos/malingering/245464184/ http://www.flickr.com/photos/sheilaellen/111377949/ PHOTO URLS http://www.veer.com/products/typedetail.aspx?image=JBT0000076 http://www.flickr.com/photos/stephiestephie/2576961520/ http://www.veer.com/products/typedetail.aspx?image=UMT0000509 http://www.flickr.com/photos/22138756@N02/3486598036/in/pool-timberland http://www.typography.com/fonts/font_overview.php?productLineID=100035 http://www.typophile.com/files/helvetica_5784.jpg http://www.flickr.com/photos/houseofsims/2362353164/ http://www.typography.com/fonts/font_overview.php?productLineID=100033 http://www.flickr.com/photos/pigdump/1217825210/ http://www.flickr.com/photos/houseofsims/2289649795/ http://www.designspongeonline.com/2009/07/diy-idea-mayas-twinkle-board.html http://www.flickr.com/photos/pigdump/1217825210/ http://100layercake.com/blog/archives/1521 http://www.flickr.com/photos/jvk/114982948/ http://www.flickr.com/photos/redsil/4179405860
  64. 64. Special Thanks: My CDIA Intro GD class Josh Sager

×