Download - Type is Beautiful
![Page 1: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/1.jpg)
TYPE IS BEAUTIFULArk Typography
@ mockee
![Page 2: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/2.jpg)
TYPE RENDERING
![Page 3: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/3.jpg)
a designer cannot ensurethat users will see HTML text exactly
as designed.
![Page 4: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/4.jpg)
RENDERINGSTRATEGIES
- Black and White (bi-level)- Grayscale (antialiasing , resampled for image)- Sub-pixel (colored pixels, LCD)
![Page 5: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/5.jpg)
RASTERIZATION
ideal shape black & white grayscale sub-pixel
![Page 6: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/6.jpg)
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)
![Page 7: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/7.jpg)
Mac OS X and iOSGenerally very reliable
WindowsFont format is importantHinting matters
![Page 8: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/8.jpg)
CONCLUSIONS
- Accept the reality
- Assume the worst- Use web fonts- Beware of big type- Wait for a future
Font smoothing explained - szafranek.net
![Page 9: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/9.jpg)
CSS TEXT
![Page 10: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/10.jpg)
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 ?
![Page 11: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/11.jpg)
-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
![Page 12: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/12.jpg)
JUSTIFICATION
![Page 13: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/13.jpg)
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
![Page 14: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/14.jpg)
LINE BREAKING
![Page 15: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/15.jpg)
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
![Page 16: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/16.jpg)
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⇓
√
![Page 17: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/17.jpg)
Web Designer ?
Typographer ?
Front End Engineer !
![Page 18: Type is Beautiful](https://reader034.vdocument.in/reader034/viewer/2022052601/558d4231d8b42a7f148b45b9/html5/thumbnails/18.jpg)
Thx:)
douban.com/people/mockee
ILLUSTRATION CREDITS: ALISTAPART