• Like
  • Save
Type is Beautiful
Upcoming SlideShare
Loading in...5
×
 

Type is Beautiful

on

  • 504 views

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

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

Statistics

Views

Total Views
504
Views on SlideShare
504
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Type is Beautiful Type is Beautiful Presentation Transcript

    • TYPE IS BEAUTIFUL Ark Typography @mockee
    • TYPE RENDERING
    • a designer cannot ensure that users will see HTML text exactly as designed.
    • RENDERING STRATEGIES - Black and White (bi-level) - Grayscale (antialiasing , resampled for image) - Sub-pixel (colored pixels, LCD)
    • RASTERIZATION ideal shape black & white grayscale sub-pixel
    • CURRENT IMPLEMENTATIONS Windows Mac OS X iOSiOS 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)
    • Mac OS X and iOS Generally very reliable Windows Font format is important Hinting matters
    • CONCLUSIONS - Accept the reality - Assume the worst - Use web fonts - Beware of big type - Wait for a future Font smoothing explained - szafranek.net
    • CSS TEXT
    • SPACING The space bar is not a design tool. ELLEN LUPTON,THINKING WITHTYPE Between ideographic and non-ideographic text. - an en space (plain text) - 1/4 of an em space (InDesign) - auto space (CSS) - necessary ?
    • -ms-text-autospace none ideograph-alpha ideograph-numeric ideograph-parenthesis ideograph-space CSSText Level 3, Section 9.4 text-spacing CSSText 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
    • JUSTIFICATION
    • 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
    • LINE BREAKING
    • 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
    • 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 ⇓ √
    • Web Designer ? Typographer ? Front End Engineer !
    • Thx:) douban.com/people/mockee ILLUSTRATION CREDITS: ALISTAPART