GreetingsfromPortland
Quick intro toChartwell
Pies: Raw Data                 5+12+17+66
5+12+1766Pies: Activated ligatures
Pies: Turn it into a ring           3+26+30+41+
3+26+3041APies: Activated ligatures
Bars: Raw Data       45+89+23+560=
Bars: Activated ligatures   45+89+23+560=
Lines: Raw data    25+5+100+45+23+      57+63+11+76
Lines: Activated ligatures
Why thefont format?
Excel, a designer ’s best friend
FF Beowulf by Letterror
Sauna by Underware
Soundwave branding element for a client 1216419846132065416132084913098491598631948655665465465646131239884659121641984613...
What is thisOpenType stuff?
Ligatureswaffle      OFFwaffle      ON
OpenType Codesub f l by fl ;
OpenType Codesub f l by fl ;sub f f l by ffl ;
So how doesChartwell work?
MAGIC
Bars: All possibilities exist as separate glyphs1 - 1000 (NOT ALL SHOWN HERE)10 20 30 40 50 60 70 80 90100 200 300500
Bars: Straight swaps        45+60+211+163=      45 60 211 163 =
Bars: Negative sidebearings               SIDEBEARINGS       NEGATIVE                SET TO ZERO   LEFT SIDEBEARING
Bars: Negative sidebearings       45 60 211 163 =                    SIDEBEARINGS SET TO ZERO           45+60+211+163=    ...
Pies: All possibilities exist as separate glyphs                    ALL POSSIBILITIES FOR 25 PERCENT
Pies: Bow to what comes before                  SWAP WITH PRE ROTATED GLYPH
Pies: Contextual OT swaps                    PRIME MARK INDICATES WHICH                          VALUE TO SWAPsub ten fift...
Pies: Contextual OT swapssub ten fifteen by fifteen.ten;sub fifteen eight by eight.fifteen;                          PROBL...
Pies: Classes                GROUPED BY STARTING POINT
Pies: More classes                     ALSO GROUPED BY END POINT
Pies: Putting the classes into the OT codesub @twentyfive_end plus    @zero by @twentyfive;
Pies: Centering the glyphs with a negative left sidebearing                               SUBSEQUENT GLYPHS               ...
Lines: Revisiting the context                         STARTS AS BARS
Lines: Revisiting the context                      DETECT PREVIOUS VALUE
Lines: Revisiting the context                    PULL TOP LEFT CORNER DOWN                      TO MEET PREVIOUS VALUE
Too many glyphs!                   PYTHON AND ROBOFAB                   SAVE THE DAY
The web
Give wrapping element classINPUT<div class="chartwell-pies">10+40+50</div>
Targetable classes for styling                                 TARGET VALUES WITHOUTPUT                              COLOR...
Future plans
In progress
tktype.com@traviskochel
Upcoming SlideShare
Loading in …5
×

Chartwell Wellington Web Meetup August 2011

423 views
343 views

Published on

Published in: Design, Entertainment & Humor
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
423
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chartwell Wellington Web Meetup August 2011

  1. 1. GreetingsfromPortland
  2. 2. Quick intro toChartwell
  3. 3. Pies: Raw Data 5+12+17+66
  4. 4. 5+12+1766Pies: Activated ligatures
  5. 5. Pies: Turn it into a ring 3+26+30+41+
  6. 6. 3+26+3041APies: Activated ligatures
  7. 7. Bars: Raw Data 45+89+23+560=
  8. 8. Bars: Activated ligatures 45+89+23+560=
  9. 9. Lines: Raw data 25+5+100+45+23+ 57+63+11+76
  10. 10. Lines: Activated ligatures
  11. 11. Why thefont format?
  12. 12. Excel, a designer ’s best friend
  13. 13. FF Beowulf by Letterror
  14. 14. Sauna by Underware
  15. 15. Soundwave branding element for a client 1216419846132065416132084913098491598631948655665465465646131239884659121641984613206541613208491309849159863194865 6 54654656461312398 4659
  16. 16. What is thisOpenType stuff?
  17. 17. Ligatureswaffle OFFwaffle ON
  18. 18. OpenType Codesub f l by fl ;
  19. 19. OpenType Codesub f l by fl ;sub f f l by ffl ;
  20. 20. So how doesChartwell work?
  21. 21. MAGIC
  22. 22. Bars: All possibilities exist as separate glyphs1 - 1000 (NOT ALL SHOWN HERE)10 20 30 40 50 60 70 80 90100 200 300500
  23. 23. Bars: Straight swaps 45+60+211+163= 45 60 211 163 =
  24. 24. Bars: Negative sidebearings SIDEBEARINGS NEGATIVE SET TO ZERO LEFT SIDEBEARING
  25. 25. Bars: Negative sidebearings 45 60 211 163 = SIDEBEARINGS SET TO ZERO 45+60+211+163= NEGATIVE LEFT SIDEBEARING
  26. 26. Pies: All possibilities exist as separate glyphs ALL POSSIBILITIES FOR 25 PERCENT
  27. 27. Pies: Bow to what comes before SWAP WITH PRE ROTATED GLYPH
  28. 28. Pies: Contextual OT swaps PRIME MARK INDICATES WHICH VALUE TO SWAPsub ten fifteen by fifteen.ten; NOTHING HAPPENS 15 PERCENT GLYPH, TO THIS ONE PRE ROTATED BY 10
  29. 29. Pies: Contextual OT swapssub ten fifteen by fifteen.ten;sub fifteen eight by eight.fifteen; PROBLEMS ARISE AFTER THE SECOND VALUE. SHOULD BE ROTATED 25
  30. 30. Pies: Classes GROUPED BY STARTING POINT
  31. 31. Pies: More classes ALSO GROUPED BY END POINT
  32. 32. Pies: Putting the classes into the OT codesub @twentyfive_end plus @zero by @twentyfive;
  33. 33. Pies: Centering the glyphs with a negative left sidebearing SUBSEQUENT GLYPHS HAVE WIDTH OF ZERO
  34. 34. Lines: Revisiting the context STARTS AS BARS
  35. 35. Lines: Revisiting the context DETECT PREVIOUS VALUE
  36. 36. Lines: Revisiting the context PULL TOP LEFT CORNER DOWN TO MEET PREVIOUS VALUE
  37. 37. Too many glyphs! PYTHON AND ROBOFAB SAVE THE DAY
  38. 38. The web
  39. 39. Give wrapping element classINPUT<div class="chartwell-pies">10+40+50</div>
  40. 40. Targetable classes for styling TARGET VALUES WITHOUTPUT COLOR IN CSS<div class="chartwell-pies"> <span class="cw-pies-graph-one cw-graph"> <span class="cw-value-one"></span> <span class="cw-value-two cw-pies-center"></span> <span class="cw-value-three cw-pies-center"></ span> </span> <span class="cw-raw-data">10+40+50</span></div> CHANGE THE DATA HERE
  41. 41. Future plans
  42. 42. In progress
  43. 43. tktype.com@traviskochel

×