Type is Beautiful (for Hof)

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

Transcript

1. TYPE IS BEAUTIFUL
   Ark Typography
   @ mockee
   

   View Slide

2. TYPE RENDERING
   

   View Slide

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

   View Slide

4. Chrome for Mac OS X
   

   View Slide

5. IE 9 for Windows 7
   

   View Slide

6. IE 6 for Windows XP
   

   View Slide

7. View Slide

8. Apple and Microsoft have always
   disagreed in how to display fonts on
   computer displays.
   

   View Slide

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.
   

   View Slide

10. RENDERING
    STRATEGIES
    - Black and White (bi-level)
    - Grayscale (antialiasing
    , resampled for image)
    - Sub-pixel (colored pixels, LCD)
    

    View Slide

11. RASTERIZATION
    ideal shape black & white grayscale sub-pixel
    

    View Slide

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)
    

    View Slide

13. Mac OS X and iOS
    Generally very reliable
    Windows
    Font format is important
    Hinting matters
    

    View Slide

14. CONCLUSIONS
    - Accept the reality
    - Assume the worst
    - Use web fonts
    - Beware of big type
    - Wait for a future
    Font smoothing explained - szafranek.net
    

    View Slide

15. SIDE STORY
    ICONIC FONTS
    http://dou.bz/234nZ2
    

    View Slide

16. View Slide

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

    View Slide

18. CSS TEXT
    

    View Slide

19. READING
    FONT-FAMILY
    

    View Slide

20. ޑุ
    楷体
    

    View Slide

21. $KaiFont = STKaiti
    $HeiFont = STHeiti
    

    View Slide

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
    

    View Slide

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 ?
    

    View Slide

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
    

    View Slide

25. JUSTIFICATION
    

    View Slide

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
    

    View Slide

27. LINE BREAKING
    

    View Slide

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
    

    View Slide

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
    ⊗
    √
    

    View Slide

30. Web Designer ?
    Typographer ?
    Front End Engineer !
    

    View Slide

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

    View Slide