Advanced Typography for the Web

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

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

THIS AREA. HI THERE, I’M

THIS AREA. HI THERE, I’M the art and science of presenting textual I N F O R M AT I O N

THIS AREA. HI THERE, I’M typography fonts set a set B

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

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

THIS AREA. HI THERE, I’M CONTROL CONTROL CONTROL CONTROL

THIS AREA. HI THERE, I’M CONTROL CONTROL CONTROL none nil nada zero zip zilch nothing na no

THIS AREA. HI THERE, I’M HELVETICA? HELVETICA? HELVETICA? i can haz HELVETICA?

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

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

THIS AREA. HI THERE, I’M ASK ASK ASK ASK for what you want for backups setting type for the web:

THIS AREA. HI THERE, I’M print web March of Progress typog a y

THIS AREA. HI THERE, I’M UNITS UNITS UNITS UNITS CSS!

THIS AREA. HI THERE, I’M "#px "em or "$$% absolute relative

THIS AREA. HI THERE, I’M em ~ % EM ~ % em ~ % em ~ % relative units 1.2em == 120% http://clagnut.com/blog/348/ why ems?

THIS AREA. HI THERE, I’M "em or "$$% == "#px user-agent default for <body>

THIS AREA. HI THERE, I’M <html> <body> <header> <h1> ∅ !."em #em !.$em $.%em (! × !.# × $ × !.%) &'.%px (%.&em × !'px/!em) or ▾ ▾ ▾ defaults to !em

THIS AREA. HI THERE, I’M <html> <body> <header> <h1> h! { font-size: "em; } ▾ ▾ ▾ <article> ▾ <h1> header { font-size: !.#em; } article { font-size: !em; } ? ?

THIS AREA. HI THERE, I’M <html> <body> <header> <h1> h! { font-size: "em; } ▾ ▾ ▾ <article> ▾ <h1> header { font-size: !.#em; } article { font-size: !em; } &(px !em × !.#em × $em $#px !em × !em × $em

THIS AREA. HI THERE, I’M REM REM REM REM “root ems”

THIS AREA. HI THERE, I’M <html> !em <body> "em <header> $.%em <h1> !.#rem 㱺㱺㱺 × × × !em "em $.%em !.#em × × × "'px = '(."px = EMS REMS #.)ems !.%ems

THIS AREA. HI THERE, I’M webkit gecko trident presto http://caniuse.com/#feat=rem (>= IE!) REM REM REM REM

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; }

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

THIS AREA. HI THERE, I’M ! vh == ! % of viewport height http://jsbin.com/evenam/1

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

THIS AREA. HI THERE, I’M UNITS UNITS UNITS UNITS CSS! http://www.w3.org/TR/css3-values/#lengths

THIS AREA. HI THERE, I’M FONTS FONTS FONTS FONTS using web

THIS AREA. HI THERE, I’M font-family: Helvetica, Arial, sans-serif;

THIS AREA. HI THERE, I’M font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123 ⊗≄≃∭∑’ὐ <p> </p>

THIS AREA. HI THERE, I’M <p> Foo <span class=“amp”>&</span> Bar </p> 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/

THIS AREA. HI THERE, I’M FONT-FACE FONT-FACE FONT-FACE FONT-FACE CSS! control the font database!

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 }

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; }

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; }

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;}

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; }

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?

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

THIS AREA. HI THERE, I’M font-feature- settings font-feature- settings font-feature- settings Fancy Typography. font-feature- settings CSS$

THIS AREA. HI THERE, I’M ligatures Ligatures Ligat igat swash alternates

THIS AREA. HI THERE, I’M in 1956 I bought… oldstyle lining in "%&# I bought… NUMERALS NUMERALS NUMERALS NUMERALS $ !"! . #$ $ %&# . '' proportional tabular ()*) . +, (-.+ . //

THIS AREA. HI THERE, I’M .ligatures { font-feature-settings: “liga”; } .lining-numerals { font-feature-settings: “lnum”; } .tabular-numerals { font-feature-settings: “tnum”; }

THIS AREA. HI THERE, I’M HACKS HACKS HACKS HACKS oh my god, it’s full of …but what did you expect?

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

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

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

THIS AREA. HI THERE, I’M <span class="icon" data-icon="p"></span> @font-face { font-family: fico; /* reference font files here */ } .icon:before { content: attr(data-icon); font-family: fico; } modern browsers

THIS AREA. HI THERE, I’M <span class="icon">p</span> @font-face { font-family: fico; /* reference font files here */ } .icon { font-family: fico; } old browsers

THIS AREA. HI THERE, I’M h = ♥ ?

THIS AREA. HI THERE, I’M UNICODE UNICODE UNICODE UNICODE <span class="icon" data-icon="♥"></span> is awesome! but… but… * requires font support

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

THIS AREA. HI THERE, I’M NOT BAD

THIS AREA. HI THERE, I’M WHEW! WHEW! WHEW! WHEW! now you know kung-fu. Go make something!

THIS AREA. HI THERE, I’M Thanks! LONG http://gazit.me SHORT @idangazit CODE http://github.com/idan

Advanced Typography for the Web

Advanced Typography for the Web

More Decks by Idan Gazit

Other Decks in Design

Featured

Transcript