Type is Beautiful

758 views

Published on

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

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
758
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Type is Beautiful

  1. 1. TYPE IS BEAUTIFUL Ark Typography @mockee
  2. 2. TYPE RENDERING
  3. 3. a designer cannot ensure that users will see HTML text exactly as designed.
  4. 4. RENDERING STRATEGIES - Black and White (bi-level) - Grayscale (antialiasing , resampled for image) - Sub-pixel (colored pixels, LCD)
  5. 5. RASTERIZATION ideal shape black & white grayscale sub-pixel
  6. 6. 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)
  7. 7. Mac OS X and iOS Generally very reliable Windows Font format is important Hinting matters
  8. 8. CONCLUSIONS - Accept the reality - Assume the worst - Use web fonts - Beware of big type - Wait for a future Font smoothing explained - szafranek.net
  9. 9. CSS TEXT
  10. 10. 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 ?
  11. 11. -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
  12. 12. JUSTIFICATION
  13. 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
  14. 14. LINE BREAKING
  15. 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
  16. 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 ⇓ √
  17. 17. Web Designer ? Typographer ? Front End Engineer !
  18. 18. Thx:) douban.com/people/mockee ILLUSTRATION CREDITS: ALISTAPART

×