$30 off During Our Annual Pro Sale. View Details »

Type is Beautiful

Yan Shi
June 27, 2013

Type is Beautiful

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

Yan Shi

June 27, 2013
Tweet

More Decks by Yan Shi

Other Decks in Design

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