Get Stoked on Web Typography SXSW 2010

  • 96,851 views
Uploaded 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 …

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Wonderful slides!
    btw can I know what font did you use for 'Get Stroked on Web Typography'?
    Are you sure you want to
    Your message goes here
  • Myself Goutam Bagchi Executive Consultant Of Questkon Consultancy Service & Business Services .I am an educated person residing at Malda TownMaldah, West Bengal, India .Myself have complete the B.com/LLB Degree and having 27 years Sales & Marketing Experience in FMCG/Pharmaceuticals/OTC/Dairy/Petroleum Coke/Cosmetics Products Sales and Franchisee and Channel Development in Various Company in India. Being The Executive Consultant of Questkon Consultancy Services & Business Services I have develop several Blog, Questkon Consultancy Services Channel on You Tube,and Questkon Consultancy Services & Business Services Channel on You Tube,Member of Various Organization & Community
    Are you sure you want to
    Your message goes here
  • Hi, it's really great presentation, can I have a copy of it please?
    Are you sure you want to
    Your message goes here
  • Nice presentation. Great Workflow.
    Are you sure you want to
    Your message goes here
  • great slides!!!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
96,851
On Slideshare
0
From Embeds
0
Number of Embeds
62

Actions

Shares
Downloads
0
Comments
22
Likes
470

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. * 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. Beautiful Typography & Letters are Everywhere
  • 5. http://www.flickr.com/photos/eyetwist/467479413/in/ set-72157600056558735/
  • 6. The creativity of offline lettering & type is just starting to be used online
  • 7. http://www.thesmallstakes.com/
  • 8. http://www.thesmallstakes.com/
  • 9. http://www.flickr.com/photos/etisfedup/3384247975
  • 10. http://jessicahische.blogspot.com/
  • 11. Typography is not what font you use but how you use it.
  • 12. http://www.flickr.com/photos/eyetwist/467479413/in/ set-72157600056558735/ http://www.flickr.com/photos/feltron/396517147/in/set-72057594075645138/
  • 13. http://www.flickr.com/photos/eyetwist/467479413/in/ set-72157600056558735/ http://www.flickr.com/photos/feltron/396517147/in/set-72057594075645138/
  • 14. But a typeface can provide context to convey an Emotion
  • 15. No Georgia
  • 16. No Arial
  • 17. Free Yourself
  • 18. stoked adjective - to be "stoked" is to be completely and intensely enthusiastic, exhilarated, or excited about something.
  • 19. On the web Freedom is still found within constraints
  • 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. * 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. Analyze How will the user digest the information? In the site hierarchy, what type of information needs to be most legible?
  • 23. Legibility * stroke width * shape exaggeration * proportion * x-height
  • 24. Ah Ah Ah
  • 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. Display Type vs Body Copy
  • 27. Display Type
  • 28. Determine what method works best for the requirements.
  • 29. Push the limits
  • 30. by first finding the emotion of your site.
  • 31. How do you do this?
  • 32. How do you choose a pair of shoes?
  • 33. Some fonts are used a lot
  • 34. all Fonts communicate feelings
  • 35. Approachable
  • 36. http://www.flickr.com/photos/pigdump/1217825210/
  • 37. http://www.flickr.com/photos/pigdump/1217825210/
  • 38. Feelings can be complex.
  • 39. “Formal because of a formality”
  • 40. “Traditional but daringly casual ”
  • 41. Let the feeling guide your choice
  • 42. Worry less about trends & more about emotion
  • 43. What if your website needed a pair of shoes?
  • 44. Get in touch with your Font Feelings
  • 45. Then determine how to execute
  • 46. Image Replacement, Font Stacks, & sIFR are still widely used but how can we move forward?
  • 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. @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. @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. Where do you get fonts that you can embed?
  • 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. CSS3 + Type
  • 53. Text Shadow text shadow: 1px 1px 1px rgba (255, 255, 255, 0.5) X
  • 54. Multiple Columns column-width: 300px; column-gap: 30px; X X
  • 55. Rotate transform: rotate (30deg); X X
  • 56. Are there no fonts available that communicate your feeling?
  • 57. en Make One
  • 58. Low-fi http://www.yourfonts.com
  • 59. Way More Serious http://www.fontlab.com
  • 60. or Modify an Open Source Font
  • 61. The Possibilities are Endless
  • 62. Go Forth & Be Badass
  • 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. Special Thanks: My CDIA Intro GD class Josh Sager