Web Typography: State of the Art

typography and the web the state of the art #writethedocs
eu 2014

Idan Gazit Hello there! I’m @idangazit Please, Sit back. Relax.
Enjoy yourself! ! All of the slides will be online.

core designer for visualizing data at a lovely web framework
the popular platform-as-a-service

commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg

Daniel Kahneman The general principle is that anything you can
do to reduce cognitive strain will help you [be persuasive], so you should first maximize legibility.

typography SET A typefaces SET

Presenting Textual Information The Art & Science of

vs typeface kerning macro micro measure (aka “width”) leading (aka
“spacing”) flow of type on page elupton.com/2009/10/science-of-typography/

http://retinart.net/graphic-design/secret-law-of-page-harmony/

LIKE, NEW INFORMATION HAS COME TO LIGHT, MAN

control

none nil nada zero zip zilch nothing naught no no
control

@idangazit HI THERE, I’M flic.kr/p/6iLEF

@idangazit HI THERE, I’M flic.kr/p/89Utsr

typography and the web the state of the art #writethedocs
eu 2014

print web March of Progress IN WEB TYPOGRAPHY THE

Sometimes hard to use. Pays dividends.

Sizing Type

? ABSOLUTE ? RELATIVE

16px ABSOLUTE 1em or 100% RELATIVE

16px ABSOLUTE 1em or 100% RELATIVE =

The quick brown fox jumps over a lazy dog. The
quick brown fox jumps over a lazy dog. TIMES GEORGIA M “1 EM”

<html> ∅ defaults to 1em <body> 1.2em <header> 3em <h1>
1.5em 5.4em (1 × 1.2 × 3 × 1.5) or 86.4px (5.4em × 16px/1em) =

That wasn’t too bad RIGHT?

pop quiz! OK, DOCUMENTARIANS

<html> body { font-size: 1em; } <body> <header> <h1> <article>
<h1> header { font-size: 1.5em; } article { font-size: 1em; } ? ? h1 { font-size: 2em; }

<html> body { font-size: 1em; } <body> <header> <h1> <article
<h1 header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em ? h1 { font-size: 2em; }

<html> body { font-size: 1em; } <body> <header <h1 <article>
<h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }

<html> body { font-size: 1em; } <body> <header> <h1> <article>
<h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }

Root Ems “REMS” (to the rescue!)

EMS 1em 1em <html> 2em 2em <body> 1.5em 1.5em <header>
1.5em 1.5rem <h1> REMS

REMS 9+ github.com/chuckcarpenter/REM-unit-polyfill

Sometimes you want the cascade. Sometimes you don’t.

typography SET A typefaces SET

Foo <span class=“amp”>&</span> Bar .amp { font-family: SomeFancyFont, sans; }
Bar Foo&

font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123
⊗≄∭∑ὐ <p> </p>

DATABASE a of FONTS

@font-face { family-name src unicode-range font-variant font-feature-settings font-stretch font-weight font-style
} ! “FooBar” local(…), url(…) U+41-5A, U+C0-FF ! ! same as font-* rules ! !

@font-face { font-family: Alef; src: url(AlefNormal.woff); font-weight: normal; unicode-range: U+590-5FF;
/* Hebrew! */ } ! /* Use Alef font only for Hebrew */ p { font-face: Alef, Times, serif;} Unicode ranges

@font-face { font-family: MathFont; src: url(MathFont.woff); font-weight: normal; unicode-range: U+1D6B0-1D71B;
/* math */ } ! /* Consistent math symbols */ p { font-face: MathFont, Times, serif;} Unicode ranges

COOL, HUH?

CAREFUL.

@font-face { font-family: FooBar; src: url(FooBarNormal.woff); font-weight: normal; } !
p { font-face: FooBar; font-weight: bold } Faux-Bold alistapart.com/article/say-no-to-faux-bold Faux-Italic

FOUT the dreaded Flash Of Unstyled Text

FOUT the dreaded Flash Of Unstyled Text FONT the somewhat-better
Flash Of No Text

2s FOUT 2s FONT

3s FONT, 1s FOUT 4s FONT Soon (~v35ish) Now (v33)
>3 seconds

Adobe Blank blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html font-family: “My Custom Font”, “Adobe Blank”, sans-serif;

IE9 Data-URI fettblog.eu/blog/2012/11/16/preventing-fout-on-ie9/ @font-face { font-family: somefont; src: url(“data:application/x-font-woff;base64,AS8796ADS…”) }

Cache aggressively Don’t make users download the font more than
once

CSS3 Font Loading http://dev.w3.org/csswg/css-font-loading/

flic.kr/p/auuCWk

Type Rendering

RASTERIZERS

OSX WINDOWS GDI WIN DIRECTWRITE CLEARTYPE GRAYSCALE

FONT OUTLINES POSTSCRIPT, TRUETYPE

POSTSCRIPT TRUETYPE IE 6-8 IE 6-8 on Windows XP IE
9+ FIREFOX CHROME OPERA nope. nope. DirectWrite DirectWrite GDI Grayscale GDI Grayscale GDI Grayscale GDI ClearType DirectWrite DirectWrite GDI ClearType GDI ClearType HTTP://WWW.SMASHINGMAGAZINE.COM/2012/04/24/A-CLOSER-LOOK-AT-FONT-RENDERING/

TEST YOUR INTENDED TYPEFACES. TEST THEM EVERYWHERE TO BE SAFE.

ENOUGH OF THIS DOOM AND GLOOM. TELL ME ABOUT MORE
AWESOME STUFF.

Ligatures Ligat

The Four Numerals

in 1956 I bought… in 1956 I bought… OLDSTYLE LINING
FIGURES

PROPORTIONAL TABULAR $131.96 $589.22 $131.96 $589.22 FIGURES

.ligatures { font-feature-settings: “liga”; } ! .lining-numerals { font-feature-settings: “lnum”;
} ! .tabular-numerals { font-feature-settings: “tnum”; } Feature tag-value

font-feature-settings 10+ docs.webplatform.org/wiki/css/properties/font-feature-settings

whew. NOW YOU KNOW KUNG FU

IS OUR FUTURE BETTER?

CANIUSE.COM CAN I USE … ?

GO MAKE STUFF. BETTER.

@IDANGAZIT Don’t be shy. Thank you!

Web Typography: State of the Art

Web Typography: State of the Art

More Decks by Idan Gazit

Other Decks in Design

Featured

Transcript