Tweet
Tweet

Slide 1

Slide 1 text

@idangazit ADVANCED TYPOGRAPHY FOR THE WEB • HTML!-IL, JAN "# RD "$%# HI THERE, I’M TYPOGRAPHY TYPOGRAPHY TYPOGRAPHY TYPOGRAPHY for the web advanced

Slide 2

Slide 2 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M djangoproject.com

Slide 3

Slide 3 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 4

Slide 4 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M the art and science of presenting textual I N F O R M AT I O N

Slide 5

Slide 5 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 6

Slide 6 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M typography fonts set a set B

Slide 7

Slide 7 text

@idangazit HI THERE, I’M HTTP://FLIC.KR/P/5VWCOW

Slide 8

Slide 8 text

2 2 3

Slide 9

Slide 9 text

2 2 3

Slide 10

Slide 10 text

2 2 3

Slide 11

Slide 11 text

2 2 3

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M CONTROL CONTROL CONTROL CONTROL

Slide 15

Slide 15 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M CONTROL CONTROL CONTROL none nil nada zero zip zilch nothing na no

Slide 16

Slide 16 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M HELVETICA? HELVETICA? HELVETICA? i can haz HELVETICA?

Slide 17

Slide 17 text

@idangazit HI THERE, I’M HTTP://FLIC.KR/P/6ILEF

Slide 18

Slide 18 text

@idangazit HI THERE, I’M HTTP://FLIC.KR/P/89UTSR

Slide 19

Slide 19 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 20

Slide 20 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M ASK ASK ASK ASK for what you want for backups setting type for the web:

Slide 21

Slide 21 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 22

Slide 22 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M print web March of Progress typog a y

Slide 23

Slide 23 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M UNITS UNITS UNITS UNITS CSS!

Slide 24

Slide 24 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M "#px "em or "$$% absolute relative

Slide 25

Slide 25 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M em ~ % EM ~ % em ~ % em ~ % relative units 1.2em == 120% http://clagnut.com/blog/348/ why ems?

Slide 26

Slide 26 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M "em or "$$% == "#px user-agent default for

Slide 27

Slide 27 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

∅ !."em #em !.$em $.%em (! × !.# × $ × !.%) &'.%px (%.&em × !'px/!em) or ▾ ▾ ▾ defaults to !em

Slide 28

Slide 28 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

h! { font-size: "em; } ▾ ▾ ▾ ▾

header { font-size: !.#em; } article { font-size: !em; } ? ?

Slide 29

Slide 29 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

h! { font-size: "em; } ▾ ▾ ▾ ▾

header { font-size: !.#em; } article { font-size: !em; } &(px !em × !.#em × $em $#px !em × !em × $em

Slide 30

Slide 30 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M REM REM REM REM “root ems”

Slide 31

Slide 31 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M !em "em $.%em

!.#rem 㱺 㱺 㱺 × × × !em "em $.%em !.#em × × × "'px = '(."px = EMS REMS #.)ems !.%ems

Slide 32

Slide 32 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M webkit gecko trident presto http://caniuse.com/#feat=rem (>= IE!) REM REM REM REM

Slide 33

Slide 33 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M ELASTIC PX ELASTIC PX ELASTIC PX ELASTIC PX http://jsbin.com/acide4/8/edit html { font-size: 6.25% } body { font-size: 16px; font-size: 16rem; } .box { width: 10px; width: 10rem; }

Slide 34

Slide 34 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M vh VH VH VH viewport units VW VW VW VW VMIN VMIN VMIN VMIN http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Slide 35

Slide 35 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M ! vh == ! % of viewport height http://jsbin.com/evenam/1

Slide 36

Slide 36 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M VIEWPORT UNITS VIEWPORT UNITS VIEWPORT UNITS webkit gecko trident presto http://caniuse.com/#feat=viewport-units (>= IE"#) VIEWPORT UNITS

Slide 37

Slide 37 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M UNITS UNITS UNITS UNITS CSS! http://www.w3.org/TR/css3-values/#lengths

Slide 38

Slide 38 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M FONTS FONTS FONTS FONTS using web

Slide 39

Slide 39 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M font-family: Helvetica, Arial, sans-serif;

Slide 40

Slide 40 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123 ⊗≄≃∭∑’ὐ

Slide 41

Slide 41 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Foo & Bar

p { font-family: Elena, serif; } .amp { font-family: Abril Fatface, Baskerville, serif; } Foo & Bar Foo & Bar ENHANCED FALLBACK http://simplebits.com/notebook/2008/08/14/ampersands-2/

Slide 42

Slide 42 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M FONT-FACE FONT-FACE FONT-FACE FONT-FACE CSS! control the font database!

Slide 43

Slide 43 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @font-face { family-name src unicode-range font-variant font-feature-settings font-stretch font-weight font-style “FooBar” local(...), url(...) U+'!-#A, U+C$-FF same values as font-* rules }

Slide 44

Slide 44 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @font-face { font-family: FooBar; src: local("Foo Bar Bold"), local("FooBar-Bold"), url(FooBarBold.ttf); font-weight: bold; } p { font-family: FooBar, sans; font-weight: normal; }

Slide 45

Slide 45 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @font-face { font-family: FooBar; src: local("Foo Bar Bold"), local("FooBar-Bold"), url(FooBarBold.ttf); font-weight: bold; } p { font-family: FooBar, sans; font-weight: bold; }

Slide 46

Slide 46 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @font-face { font-family: Alef; src: url(AlefNormal.ttf); font-weight: normal; unicode-range: U+!"#-!FF; /* hebrew! */ } /* Use Alef font only for hebrew */ p { font-face: Alef, Times, serif;}

Slide 47

Slide 47 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @font-face { font-family: FooBar; src: url(FooBarNormal.ttf); font-weight: normal; } @font-face { font-family: FooBar; src: url(FooBarBold.ttf); font-weight: bold; } p { font-face: FooBar, sans-serif;} strong { font-weight: bold; }

Slide 48

Slide 48 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @FONT-FACE @FONT-FACE @FONT-FACE webkit gecko trident presto http://caniuse.com/#feat=fontface @FONT-FACE …or is it?

Slide 49

Slide 49 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: /* IE6-IE8 */ url('webfont.eot?#iefix') format('embedded-opentype'), /* Modern Browsers */ url('webfont.woff') format('woff'), /* Safari, Android, iOS */ url('webfont.ttf') format('truetype'), /* Legacy iOS */ url('webfont.svg#svgFontName') format('svg'); } http://cl.ly/1t1z2S2g0P1u

Slide 50

Slide 50 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M font-feature- settings font-feature- settings font-feature- settings Fancy Typography. font-feature- settings CSS$

Slide 51

Slide 51 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M ligatures Ligatures Ligat igat swash alternates

Slide 52

Slide 52 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M in 1956 I bought… oldstyle lining in "% I bought… NUMERALS NUMERALS NUMERALS NUMERALS $ !"! . #$ $ % . '' proportional tabular ()*) . +, (-.+ . //

Slide 53

Slide 53 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M .ligatures { font-feature-settings: “liga”; } .lining-numerals { font-feature-settings: “lnum”; } .tabular-numerals { font-feature-settings: “tnum”; }

Slide 54

Slide 54 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M HACKS HACKS HACKS HACKS oh my god, it’s full of …but what did you expect?

Slide 55

Slide 55 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M font-feature- settings font-feature- settings font-feature- settings is pretty awesome. don’t forget your vendor prefixes! font-feature- settings but still https://developer.mozilla.org/en-US/docs/CSS/font-feature-settings http://caniuse.com/#feat=font-feature http://blog.fontdeck.com/post/15777165734/opentype-1

Slide 56

Slide 56 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M icon fonts icon fonts icon fonts Vector! Styleable! No sprites! One HTTP req! GZips well! Makes coffee! icon fonts

Slide 57

Slide 57 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M icon fonts icon fonts icon fonts http://css-tricks.com/examples/IconFont/ http://fico.lensco.be/ http://pictos.cc/font/ http://symbolset.com/ http://icomoon.io/ http://somerandomdude.com/work/iconic/ …may the google be with you. icon fonts

Slide 58

Slide 58 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M @font-face { font-family: fico; /* reference font files here */ } .icon:before { content: attr(data-icon); font-family: fico; } modern browsers

Slide 59

Slide 59 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M p @font-face { font-family: fico; /* reference font files here */ } .icon { font-family: fico; } old browsers

Slide 60

Slide 60 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M h = ♥ ?

Slide 61

Slide 61 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M UNICODE UNICODE UNICODE UNICODE is awesome! but… but… * requires font support

Slide 62

Slide 62 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M TOYS TOYS TOYS TOYS lettering.js wrap each letter in a span for styling fittext.js aspect-preserving text resize to fit container

Slide 63

Slide 63 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 64

Slide 64 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 65

Slide 65 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 66

Slide 66 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

Slide 67

Slide 67 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M NOT BAD

Slide 68

Slide 68 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M WHEW! WHEW! WHEW! WHEW! now you know kung-fu. Go make something!

Slide 69

Slide 69 text

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M Thanks! LONG http://gazit.me SHORT @idangazit CODE http://github.com/idan