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/