Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TYPOGRAPHY@clare_lisbeth
PRINT TO DIGITAL
TOOL COMPARISON
InDesign vs HTML &CSS
“CAN WE HAVE OLD-
STYLE NUMBERS?”
OPEN TYPE FONTS
READABILITY
DetailinTypography,byJostHochuli
CSS FONT FEATURE
font-feature-settings: 'onum' 1;
/* enable discretionary ligatures */
font-feature-settings: "dlig" 1;
/*...
CAN I USE?
“WHY DOES IT LOOK
DIFFERENT ON HERE
AND THERE?”
“HOW ABOUT THE
H&JS?”
SNAKES & LADDERS
CAN I USE?
“WHERE IS THE
FUN IN WEB
TYPOGRAPHY?”
Thousand Origami Cranes is a group of one thousand origami
paper cranes held together by strings. An ancient Japanese
lege...
CSS SHAPES
.shaped-element {
width: 450px;
height: 520px;
-webkit-shape-outside: url(../myimages/bird.png);
-webkit-mask-i...
FROM THIS...
... USING THIS...
... TO THIS
CAN I USE?
BUT THE WEB IS PRETTY GOOD TOO...
THANKS!
(We'rehiring)
REFERENCES
Justification &Hyphenation
http://elliotjaystocks.com/blog/justification-hyphenation/
http://www.bramstein.com/...
Textrendering
http://blog.typekit.com/2010/12/17/type-rendering-review-
and-fonts-that-render-well/
http://szafranek.net/w...
Open type fonts
http://ilovetypography.com/OpenType/opentype-features.html
http://clagnut.com/sandbox/css3/
http://www.sma...
Google FontEffects
https://developers.google.com/fonts/docs/getting_started#Effects
CSS Shapes
http://alistapart.com/artic...
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Web Typography in Digital Publishing
Upcoming SlideShare
Loading in …5
×

Web Typography in Digital Publishing

1,910 views

Published on

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.

Published in: Technology, Art & Photos
  • Be the first to comment

Web Typography in Digital Publishing

  1. 1. TYPOGRAPHY@clare_lisbeth
  2. 2. PRINT TO DIGITAL
  3. 3. TOOL COMPARISON InDesign vs HTML &CSS
  4. 4. “CAN WE HAVE OLD- STYLE NUMBERS?”
  5. 5. OPEN TYPE FONTS
  6. 6. READABILITY DetailinTypography,byJostHochuli
  7. 7. 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)
  8. 8. CAN I USE?
  9. 9. “WHY DOES IT LOOK DIFFERENT ON HERE AND THERE?”
  10. 10. “HOW ABOUT THE H&JS?”
  11. 11. SNAKES & LADDERS
  12. 12. CAN I USE?
  13. 13. “WHERE IS THE FUN IN WEB TYPOGRAPHY?”
  14. 14. 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.
  15. 15. 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)
  16. 16. FROM THIS...
  17. 17. ... USING THIS...
  18. 18. ... TO THIS
  19. 19. CAN I USE?
  20. 20. BUT THE WEB IS PRETTY GOOD TOO...
  21. 21. THANKS! (We'rehiring)
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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/

×