Upload
yan-shi
View
375
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Adobe Bootcamp for Web Training Courses. http://www.adobe.com/cn/special/events/bootcamp_201306/
Citation preview
TYPE IS BEAUTIFULArk Typography
@ mockee
TYPE RENDERING
a designer cannot ensurethat users will see HTML text exactly
as designed.
RENDERINGSTRATEGIES
- Black and White (bi-level)- Grayscale (antialiasing , resampled for image)- Sub-pixel (colored pixels, LCD)
RASTERIZATION
ideal shape black & white grayscale sub-pixel
CURRENTIMPLEMENTATIONS
Windows Mac OS X iOSiOS
GDI-GrayscaleGDI-ClearType
(ClearType applies only to TrueType-based web fonts)
DirectWrite
Core Text (with Quartz)Core Text (with Quartz)Core Text (with Quartz)GDI-GrayscaleGDI-ClearType
(ClearType applies only to TrueType-based web fonts)
DirectWriteSub-pixel
(opaque background, normal orientation)
also for Retina displays
Sub-pixel(opaque background, normal orientation)
also for Retina displays
Grayscalesub-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
Grayscalesub-pixel
(disabled by default)
Mac OS X and iOSGenerally very reliable
WindowsFont format is importantHinting 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 WITH TYPE
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
noneideograph-alphaideograph-numericideograph-parenthesisideograph-space
CSS Text Level 3, Section 9.4
text-spacingCSS 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-numericno-compress | punctuation
JUSTIFICATION
text-align: justifytext-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-wordjustify√
Windows (inter-word)Windows (inter-word) inter-ideographonly
* inter-wordjustify
inter-word | distribute
http://codepen.io/mockee/pen/suGbI
LINE BREAKING
PUNCTUATIONPROHIBITIONS
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 Chineseon 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