Type is Beautiful (for Hof)

79c452ea615941481f31fa7d93ab764a?s=47 Yan Shi
October 17, 2013

Type is Beautiful (for Hof)

Based on https://speakerdeck.com/mockee/type-is-beautiful
for Douban Hof 2013/10/17.

79c452ea615941481f31fa7d93ab764a?s=128

Yan Shi

October 17, 2013
Tweet

Transcript

  1. TYPE IS BEAUTIFUL Ark Typography @ mockee

  2. TYPE RENDERING

  3. a designer cannot ensure that users will see HTML text

    exactly as designed.
  4. Chrome for Mac OS X

  5. IE 9 for Windows 7

  6. IE 6 for Windows XP

  7. None
  8. Apple and Microsoft have always disagreed in how to display

    fonts on computer displays.
  9. the goal of the algorithm should be to preserve the

    design of the typeface as much as possible, even at the cost of a little bit of blurriness. the shape of each letter should be hammered into pixel boundaries to prevent blur and improve readability, even at the cost of not being true to the typeface.
  10. RENDERING STRATEGIES - Black and White (bi-level) - Grayscale (antialiasing

    , resampled for image) - Sub-pixel (colored pixels, LCD)
  11. RASTERIZATION ideal shape black & white grayscale sub-pixel

  12. CURRENT IMPLEMENTATIONS Windows Mac OS X iOS iOS GDI-Grayscale GDI-ClearType

    (ClearType applies only to TrueType-based web fonts) DirectWrite Core Text (with Quartz) Core Text (with Quartz) Core Text (with Quartz) GDI-Grayscale GDI-ClearType (ClearType applies only to TrueType-based web fonts) DirectWrite Sub-pixel (opaque background , normal orientation) also for Retina displays Sub-pixel (opaque background , normal orientation) also for Retina displays Grayscale sub-pixel (disabled by default) Fonts Hinting Sub-pixel (opaque background , normal orientation) also for Retina displays Sub-pixel (opaque background , normal orientation) also for Retina displays Grayscale sub-pixel (disabled by default)
  13. Mac OS X and iOS Generally very reliable Windows Font

    format is important Hinting matters
  14. CONCLUSIONS - Accept the reality - Assume the worst -

    Use web fonts - Beware of big type - Wait for a future Font smoothing explained - szafranek.net
  15. SIDE STORY ICONIC FONTS http://dou.bz/234nZ2

  16. None
  17. https://github.com/blog/1135-the-making-of-octicons

  18. CSS TEXT

  19. READING FONT-FAMILY

  20. ޑุ 楷体

  21. $KaiFont = STKaiti $HeiFont = STHeiti

  22. $HeiFont = "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Wenquanyi Micro

    Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", LiGothicMed, SimHei $KaiFont = STKaiti, "AR PL UKai", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW-Kai" http://dou.bz/1i5IKs
  23. SPACING The space bar is not a design tool. ELLEN

    LUPTON, THINKING WITH TYPE Between ideographic and non-ideographic text. - an en space (plain text) - 1/4 of an em space (InDesign) - auto space (CSS) - necessary ?
  24. -ms-text-autospace none ideograph-alpha ideograph-numeric ideograph-parenthesis ideograph-space CSS Text Level 3,

    Section 9.4 text-spacing CSS Text Level 4, Section 8.3 normal | none | [ trim-start | space-start ] [ trim-end | space-end | allow-end ] [ trim-adjacent | space-adjacent ] ideograph-alpha | ideograph-numeric no-compress | punctuation
  25. JUSTIFICATION

  26. text-align: justify text-justify: inter-ideograph http://www.w3.org/TR/css3-text/#text-justify IE Chrome Safari Firefox Opera

    √ Mac OS / iOS (inter-ideograph only) Mac OS / iOS (inter-ideograph only) Mac OS / iOS (inter-ideograph only) * inter-word justify √ Windows (inter-word) Windows (inter-word) inter-ideograph only * inter-word justify inter-word | distribute http://codepen.io/mockee/pen/suGbI
  27. LINE BREAKING

  28. PUNCTUATION PROHIBITIONS Simplified Chinese (Ark Version, like webkit) Characters that

    are not allowed at the start of a line : !%),.:;?]}¢°’”‟›℃∶ɺɻʭʥ㽆〞﹚﹜ʂˋʣɼɽɿʀʁʧʩ not allowed at the end of a line : $(£¥﹙﹛ʬʪʮʰʤ㽅ᶸˈʢɽʦʨˊˇ http://en.wikipedia.org/wiki/Line_breaking_rules_in_East_Asian_languages not allowed at both ends of a line : “'‘ can't be separated: —…‥ https://github.com/mathiasbynens/unicode-data
  29. ISSUEs of line breaking strategy for Chinese on Chrome and

    Safari Wrapped with a span tag for each word, line break strategy becomes ineffective. word-break: break-all ⊗ ⇢ PROHIBITIONS ⊗ wrap word & punctuations ⾫ ⇣ new line breaking bug display: inline-block | run-in ⊗ √
  30. Web Designer ? Typographer ? Front End Engineer !

  31. Thx:) douban.com/people/mockee ILLUSTRATION CREDITS: ALISTAPART