Type is Beautiful

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