Slide 1

Slide 1 text

Meet the new web typography same as the old. web typography. * *Okay, not really!

Slide 2

Slide 2 text

senior developer VSA Partners http://www.vsapartners.com managing editor Typedia http://typedia.com Erik Vorhes

Slide 3

Slide 3 text

Typography

Slide 4

Slide 4 text

There are a lot of rules. Or rather, guiding principles. Set your text at a reasonable size. Use an appropriate line-length. Apply a line-height that works with the length of your line and with your choice of type. Give your text plenty of breathing room. Ensure sufficient contrast between the text and its background. Yada yada yada. Small caps don’t look so hot. (In other words, ignore how this paragraph is set. ;)

Slide 5

Slide 5 text

•Set your text at a reasonable size. •Use an appropriate line-length. •Apply a line-height that works with the length of your line and with your choice of type. •Give your text plenty of breathing room. •Ensure sufficient contrast between the text & its background. •Yada yada yada. •Small caps don’t look so hot. Respect your readers!

Slide 6

Slide 6 text

Type

Slide 7

Slide 7 text

.cascade  {        font-­‐family:        'Sarcastic  Robot',        'Anonymous  Pro',        Consolas,  'Panic        Sans',  'Andale        Mono',  Menlo,        Monaco,  Courier,        'Courier  New',        monospace,  serif; }

Slide 8

Slide 8 text

Azuro Web (FontShop, Typekit) Rosewood Std (Adobe, Typekit) Rosewood Std Fill (Adobe, Typekit) http://opisthenar.com h1  {        position:  relative;        font-­‐family:  rosewood-­‐        std,  serif; } h1:after  {        position:  absolute;        top:  -­‐0.018em;        left:  0;        z-­‐index:  -­‐1;        font-­‐family:  rosewood-­‐        std-­‐fill,  serif;        content:  'Opisthenar'; }

Slide 9

Slide 9 text

http://drasty.com/ wider screen Herb (JAF, Typekit) Fedra Serif Screen (Typotheque) narrower screen Herb Condensed (JAF, Typekit) Fedra Serif Screen (Typotheque)

Slide 10

Slide 10 text

What we (try to) do at VSA

Slide 11

Slide 11 text

Benton Sans (Font Bureau, Webtype) Preview in IE8 (ClearType), IE9 (DirectWrite), and Safari (OS X Core Text).

Slide 12

Slide 12 text

h1  {        font-­‐family:  herb,  serif;        font-­‐weight:  bold; } /*  Artificial  bold‽  *  Uh,  we're  only  loading  *  font-­‐weight:  normal.  OOPS.  */ http://drbl.in/bcPd

Slide 13

Slide 13 text

.pre-­‐ie9-­‐opacity  {        background:  white;        filter:  alpha(opacity=100); } .pre-­‐ie9-­‐opacity  {        background:  transparent;        filter:  alpha(opacity=100); }

Slide 14

Slide 14 text

Smile and grin at the change

Slide 15

Slide 15 text

“Zapfino” rendered in Safari

Slide 16

Slide 16 text

“Zapfino” rendered in Firefox

Slide 17

Slide 17 text

http://www.typotheque.com

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Thanks! Erik Vorhes http://erik.vorh.es @erikvorhes “The New Web Typography” · AIGA Chicago · 6 October 2011