Type is Beautiful

Adobe Bootcamp for Web Training Courses. http://www.adobe.com/cn/special/events/bootcamp_201306/

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. RENDERING
   STRATEGIES
   - Black and White (bi-level)
   - Grayscale (antialiasing
   , resampled for image)
   - Sub-pixel (colored pixels, LCD)
   

   View Slide

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

   View Slide

6. 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

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

   View Slide

8. 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

9. CSS TEXT
   

   View Slide

10. 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

11. -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

12. JUSTIFICATION
    

    View Slide

13. 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

14. LINE BREAKING
    

    View Slide

15. 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

16. 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

17. Web Designer ?
    Typographer ?
    Front End Engineer !
    

    View Slide

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

    View Slide