View
1.187
Download
2
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
TYPOGRAPHY@clare_lisbeth
PRINT TO DIGITAL
TOOL COMPARISONInDesign vs HTML & CSS
“CAN WE HAVE OLD-STYLE NUMBERS?”
OPEN TYPE FONTS
READABILITY
Detail in Typography, by Jost Hochuli
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';
(Need browser prefixes)
CAN I USE?
“WHY DOES IT LOOKDIFFERENT ON HERE
AND THERE?”
“HOW ABOUT THEH&JS?”
SNAKES & LADDERS
CAN I USE?
“WHERE IS THE FUN IN WEB
TYPOGRAPHY?”
Thousand Origami Cranes is a group of one thousand origamipaper cranes held together by strings. An ancient Japaneselegend promises that anyone who folds a thousandorigami cranes will be granted a wish by a crane. Somestories believe you are granted eternal good luck,instead of just one wish, such as long life or recoveryfrom illness or injury. This makes them populargifts for special friends and family. The crane inJapan is one of the mystical or holy creatures(others include the dragon and the tortoise) and issaid to live for a thousand years: That is why 1000cranes are made, one for each year. In some storiesit is believed that the 1000 cranes must becompleted within one year and they must all be madeby the person who is to make the wish at the end.Cranes that are made by that person and given away toanother aren't included: All cranes must be kept by the personwishing at the end. The Japanese space agency JAXA used folding 1000cranes as one of the tests for its potential astronauts.
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; }
(Need browser prefixes)
FROM THIS...
... USING THIS...
... TO THIS
CAN I USE?
BUT THE WEB IS PRETTY GOOD TOO...
THANKS!(We're hiring)
REFERENCESJustification & Hyphenation
http://elliotjaystocks.com/blog/justification-hyphenation/http://www.bramstein.com/projects/typeset/
http://en.wikipedia.org/w/index.php?title=Word_wraphttp://defoe.sourceforge.net/folio/knuth-plass.html
Text rendering
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.aspxhttp://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
Open type fonts
http://ilovetypography.com/OpenType/opentype-features.htmlhttp://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_Guide.pdfhttps://www.typotheque.com/articles/opentype_features_in_web_browsers_-
_tests#onumhttp://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
Google Font Effects
https://developers.google.com/fonts/docs/getting_started#EffectsCSS Shapes
http://alistapart.com/article/css-shapes-101http://html.adobe.com/webplatform/layout/shapes/
Recommended