A quick dive into the state of typography on Web, a look at some exciting new things we’ll be able to do in the near future, and some details about text rendering in browsers. Using digital publishing apps as case studies.

1. TYPOGRAPHY@clare_lisbeth

4. PRINT TO DIGITAL

6. TOOL COMPARISON
InDesign vs HTML &CSS

8. “CAN WE HAVE OLD-
STYLE NUMBERS?”

10. OPEN TYPE FONTS

11. READABILITY
DetailinTypography,byJostHochuli

12. CSS FONT FEATURE
font-feature-settings: 'onum' 1;
/* enable discretionary ligatures */
font-feature-settings: "dlig" 1;
/* enable small caps */
font-feature-settings: "smcp" on;
/* enable caps to small caps */
font-feature-settings: 'c2sc';
/* no common ligatures */
font-feature-settings: "liga" off;
/* enable tabular numbers and historical forms */
font-feature-settings: "tnum", 'hist';
(Needbrowserprefixes)

13. CAN I USE?

14. “WHY DOES IT LOOK
DIFFERENT ON HERE
AND THERE?”

18. “HOW ABOUT THE
H&JS?”

20. SNAKES & LADDERS

22. CAN I USE?

23. “WHERE IS THE
FUN IN WEB
TYPOGRAPHY?”

24. Thousand Origami Cranes is a group of one thousand origami
paper cranes held together by strings. An ancient Japanese
legend promises that anyone who folds a thousand
origami cranes will be granted a wish by a crane. Some
stories believe you are granted eternal good luck,
insteadof just one wish, suchaslonglife or recovery
from illness or injury. This makes them popular
gifts for special friends and family. The crane in
Japan is one of the mystical or holy creatures
(others include the dragon and the tortoise) and is
said to live for a thousand years: That is why 1000
cranes are made, one for each year. In some stories
it is believed that the 1000 cranes must be
completed within one year and they must all be made
by the person who is to make the wish at the end.
Cranes that are made by that person and given away to
another aren't included: All cranes must be kept by the person
wishingat the end.The Japanese space agencyJAXAusedfolding1000
cranesasone ofthe testsfor itspotentialastronauts.

26. CSS SHAPES
.shaped-element {
width: 450px;
height: 520px;
-webkit-shape-outside: url(../myimages/bird.png);
-webkit-mask-image: url(../myimages/bird.png);
-webkit-mask-clip: content;
background-image: url(../myimages/bird.png);
background-repeat: no-repeat;
background-size: contain;
}
(Needbrowserprefixes)

27. FROM THIS...

28. ... USING THIS...

29. ... TO THIS

30. CAN I USE?

31. BUT THE WEB IS PRETTY GOOD TOO...

34. THANKS!
(We'rehiring)

35. REFERENCES
Justification &Hyphenation
http://elliotjaystocks.com/blog/justification-hyphenation/
http://www.bramstein.com/projects/typeset/
http://en.wikipedia.org/w/index.php?title=Word_wrap
http://defoe.sourceforge.net/folio/knuth-plass.html

36. Textrendering
http://blog.typekit.com/2010/12/17/type-rendering-review-
and-fonts-that-render-well/
http://szafranek.net/works/articles/font-smoothing-explained/
http://maximilianhoffmann.com/posts/better-font-rendering-
on-osx http://usabilitypost.com/2012/11/05/stop-fixing-font-
smoothing/http://www.edwardsprot.co.uk/FontSmoothing.aspx
http://bjango.com/articles/subpixeltext/
http://dougitdesign.com/blog/2010/11/safari-web-browser-on-
windows-and-font-rendering-philosophies-between-the-oss/
http://24ways.org/2012/science/
http://en.wikipedia.org/wiki/Font_rasterization

37. Open type fonts
http://ilovetypography.com/OpenType/opentype-features.html
http://clagnut.com/sandbox/css3/
http://www.smashingmagazine.com/2011/03/02/the-font-face-
rule-revisited-and-useful-tricks/
https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Gui
https://www.typotheque.com/articles/opentype_features_in_web_bro
_tests#onum
http://meyerweb.com/eric/css/tests/css3/show.php?p=font-
variant-numeric http://www.sitepoint.com/cross-browser-web-
fonts-part-3/http://caniuse.com/font-feature
http://dev.w3.org/csswg/css-fonts/#propdef-font-feature-
settings

38. Google FontEffects
https://developers.google.com/fonts/docs/getting_started#Effects
CSS Shapes
http://alistapart.com/article/css-shapes-101
http://html.adobe.com/webplatform/layout/shapes/