Slide 1

Slide 1 text

David Demaree ChicagoWebConf • September 3rd, 2011 Saturday, September 3, 11

Slide 2

Slide 2 text

FONTS Saturday, September 3, 11

Slide 3

Slide 3 text

FONTS Fonts! Fonts! Fonts! Fonts! Fonts! Fonts! Fonts! Fonts! Saturday, September 3, 11

Slide 4

Slide 4 text

Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal user experience. — Oliver Reichenstein, 2006 Saturday, September 3, 11

Slide 5

Slide 5 text

Legibility Hierarchy Identity Context Good typography establishes or improves Saturday, September 3, 11

Slide 6

Slide 6 text

Things Helvetica Paprika Futura New York Times Georgia Conventional iOS UI patterns, made distinctive with type Saturday, September 3, 11

Slide 7

Slide 7 text

TO: Cs I need you. I need this. I need to know this is something we're willing to do. I am terribly in love with you. An actual text message Saturday, September 3, 11

Slide 8

Slide 8 text

I need you. I need this. I need to know this is something we're willing to do. I am terribly in love with you. REPLY – TXT MESSAGE CANCEL SEND Saturday, September 3, 11

Slide 9

Slide 9 text

Saturday, September 3, 11

Slide 10

Slide 10 text

Web type in practice Saturday, September 3, 11

Slide 11

Slide 11 text

CHAPTER I. MR. SHERLOCK HOLMES. In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other officers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties. The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the shoulder by a Jezail bullet, which shattered the bone and grazed the subclavian artery. I should have fallen into the hands of the murderous Ghazis had it not been for the devotion and courage shown by Murray, my orderly, who threw me across a pack-horse, and succeeded in bringing me safely to the British lines. Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded sufferers, to the base hospital at Peshawar. Here I rallied, and had already improved so far as to be able to walk about the wards, and even to bask a little upon the verandah, when I was struck down by enteric fever, that curse of our Indian possessions. For months my life was despaired of, and when at last I came to myself and became convalescent, I was so weak and emaciated that a medical board determined that not a day should be lost in sending me back to England. I was dispatched, accordingly, in the troopship "Orontes," and landed a month later on Portsmouth jetty, with my health irretrievably ruined, but with permission from a paternal government to spend the next nine months in attempting to improve it. I had neither kith nor kin in England, and was therefore as free as air—or as free as an income of eleven shillings and sixpence a day will permit a man to be. Under such circumstances, I naturally gravitated to London, that great cesspool into which all the loungers and idlers of the Empire are irresistibly drained. There I stayed for some time at a private hotel in the Strand, leading a comfortless, meaningless existence, and spending such money as I had, considerably more freely than I ought. So alarming did the state of my finances become, that I soon realized that I must either leave the metropolis and rusticate somewhere in the country, or that I must make a complete alteration in my style of living. Choosing the latter alternative, I began by making up my mind to leave the hotel, and to take up my quarters in some less pretentious and less expensive domicile. Saturday, September 3, 11

Slide 12

Slide 12 text

Chapter I. Mr. Sherlock Holmes

In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other officers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties.

HTML STRUCTURE Saturday, September 3, 11

Slide 13

Slide 13 text

.chapter { color: #373737; font-family: 'Proxima Nova Condensed', sans-serif; font-size: 120%; margin: 40px; } .chapter p { line-height: 1.3em; max-width: 600px; } .chapter h1 { font-size: 161.8%; font-weight: 700; text-transform: uppercase; } .chapter .chapter-number { display: block; font-size: 85%; font-weight: 400; letter-spacing: 2px; margin-bottom: 0.5em; text-transform: uppercase; } CSS STYLES Saturday, September 3, 11

Slide 14

Slide 14 text

C H A P T E R I MR. SHERLOCK HOLMES In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other o cers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties. The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the shoulder by a Jezail bullet, which shattered the bone and grazed the subclavian artery. I should have fallen into the hands of the murderous Ghazis had it not been for the devotion and courage shown by Murray, my orderly, who threw me across a pack-horse, and succeeded in bringing me safely to the British lines. Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded su erers, to the base hospital at Peshawar. Here I rallied, and had already improved so far as to be able to walk about the wards, and even Saturday, September 3, 11

Slide 15

Slide 15 text

CHAPTER I. MR. SHERLOCK HOLMES. In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other officers who were in the same situation as myself, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties. The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the shoulder by a Jezail bullet, which shattered the bone and grazed the subclavian artery. I should have fallen into the hands of the murderous Ghazis had it not been for the devotion and courage shown by Murray, my orderly, who threw me across a pack-horse, and succeeded in bringing me safely to the British lines. Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded sufferers, to the base hospital at Peshawar. Here I rallied, and had already improved so far as to be able to walk about the wards, and even to bask a little upon the verandah, when I was struck down by enteric fever, that curse of our Indian possessions. For months my life was despaired of, and when at last I came to myself and became convalescent, I was so weak and emaciated that a medical board determined that not a day should be lost in sending me back to England. I was dispatched, accordingly, in the troopship "Orontes," and landed a month later on Portsmouth jetty, with my health irretrievably ruined, but with permission from a paternal government to spend the next nine months in attempting to improve it. I had neither kith nor kin in England, and was therefore as free as air—or as free as an income of eleven shillings and sixpence a day will permit a man to be. Under such circumstances, I naturally gravitated to London, that great cesspool into which all the loungers and idlers of the Empire are irresistibly drained. There I stayed for some time at a private hotel in the Strand, leading a comfortless, meaningless existence, and spending such money as I had, considerably more freely than I ought. So alarming did the state of my finances become, that I soon realized that I must either leave the metropolis and rusticate somewhere in the country, or that I must make a complete alteration in my style of living. Choosing the latter alternative, I began by making up my mind to leave the hotel, and to take up my quarters in some less pretentious and less expensive domicile. C H A P T E R I MR. SHERLOCK HOLMES In the year 1878 I took my degree of Doctor of Medicine of the University of Lo proceeded to Netley to go through the course prescribed for surgeons in the completed my studies there, I was duly attached to the Fifth Northumberland Assistant Surgeon. The regiment was stationed in India at the time, and befor the second Afghan war had broken out. On landing at Bombay, I learned that advanced through the passes, and was already deep in the enemy's country. however, with many other o cers who were in the same situation as myself, reaching Candahar in safety, where I found my regiment, and at once entered duties. The campaign brought honours and promotion to many, but for me it had noth misfortune and disaster. I was removed from my brigade and attached to the whom I served at the fatal battle of Maiwand. There I was struck on the should bullet, which shattered the bone and grazed the subclavian artery. I should ha hands of the murderous Ghazis had it not been for the devotion and courage my orderly, who threw me across a pack-horse, and succeeded in bringing me British lines. Worn with pain, and weak from the prolonged hardships which I had undergo removed, with a great train of wounded su erers, to the base hospital at Pesh rallied, and had already improved so far as to be able to walk about the wards Saturday, September 3, 11

Slide 16

Slide 16 text

Fonts in CSS Saturday, September 3, 11

Slide 17

Slide 17 text

.media-unit { font-family: "Lucida Grande", "Droid Sans", Verdana, Arial, sans-serif; font-weight: 400; font-style: normal; } Saturday, September 3, 11

Slide 18

Slide 18 text

font-family: "Lucida Grande", "Droid Sans", Verdana, Arial, sans-serif; Font-family stacks list acceptable typefaces in order of preference. Saturday, September 3, 11

Slide 19

Slide 19 text

.twitter { font-family: 'Helvetica Neue', Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif; } Twitter’s actual font-family stack Loads an appropriate, preinstalled, Helvetica-like font Saturday, September 3, 11

Slide 20

Slide 20 text

.twitter { font-family: 'Helvetica Neue', Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif; } Helvetica Neue on Mac OS X or iOS Arial for all Windows OSes Any other commercial Helvetica, if the user has one installed Liberation Sans and FreeSans are commonly found on Linux If all else fails, use the browser’s default sans-serif Saturday, September 3, 11

Slide 21

Slide 21 text

FACEBOOK "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; YAHOO arial, helvetica, clean, sans-serif MICROSOFT Georgia, Cambria, "Times New Roman", Times, serif; Common font stacks Saturday, September 3, 11

Slide 22

Slide 22 text

Font variations Saturday, September 3, 11

Slide 23

Slide 23 text

.media-unit { font-family: "Lucida Grande", "Droid Sans", Verdana, Arial, sans-serif; font-weight: 400; font-style: normal; } Saturday, September 3, 11

Slide 24

Slide 24 text

font-weight: 400; font-style: normal; Weights and styles aren’t modifiers, they’re di erent fonts of the same font family. Saturday, September 3, 11

Slide 25

Slide 25 text

Fanny pack trust fund

Fanny pack trust fund

Fanny pack trust fund

Fanny pack trust fund

Fanny pack trust fund

Fanny pack trust fund

Fanny pack trust fund

Fanny pack trust fund

Fanny pack trust fund

Saturday, September 3, 11

Slide 26

Slide 26 text

Fanny pack trust fund Fanny pack trust fund normal bold Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund 200 300 400 600 700 800 900 Arial 2 weights Saturday, September 3, 11

Slide 27

Slide 27 text

Fanny pack trust fund Fanny pack trust fund normal bold Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund Fanny pack trust fund 200 300 400 600 700 800 900 Proxima Nova Condensed 7 weights Saturday, September 3, 11

Slide 28

Slide 28 text

Saturday, September 3, 11

Slide 29

Slide 29 text

14 variations total size 453 KB Saturday, September 3, 11

Slide 30

Slide 30 text

Some typefaces come in only one style Saturday, September 3, 11

Slide 31

Slide 31 text

Jody, this ice cream is great. Saturday, September 3, 11

Slide 32

Slide 32 text

Jody, this ice cream is great. Jody, this ice cream is great. Lucida Grande, unlike most fonts in common use on the Web, does not have an italic. Saturday, September 3, 11

Slide 33

Slide 33 text

Web fonts Saturday, September 3, 11

Slide 34

Slide 34 text

Arial or Helvetica (Neue) Verdana or Lucida Grande Georgia or Times New Roman Our typographic palette, 1999–2007 Saturday, September 3, 11

Slide 35

Slide 35 text

@font-face { font-family: "Proxima Nova Condensed"; font-weight: 400; font-style: normal; src: url('/fonts/proxima-nova-cond-n4.woff'); } Saturday, September 3, 11

Slide 36

Slide 36 text

http://www.webkit.org/blog/124/downloadable-fonts/ 2007 @font-face support added to WebKit Saturday, September 3, 11

Slide 37

Slide 37 text

http://www.webdirections.org/blog/ubiquitous-web-font-embedding-just-got-a-step-closer/ 2008 Firefox, Opera, and Chrome get @font-face Saturday, September 3, 11

Slide 38

Slide 38 text

“Most fonts do not come with a license that allows you to share them. So, by uploading most fonts, regardless of their format, to a server, and linking to them, you are likely to be either breaching your license agreement with the vendor, or copyright laws, or both. And it’s not cool. John Allsopp October 2008 Saturday, September 3, 11

Slide 39

Slide 39 text

Saturday, September 3, 11

Slide 40

Slide 40 text

A type foundry is a company that designs and/or distributes typefaces. http://en.wikipedia.org/wiki/Type_foundry Saturday, September 3, 11

Slide 41

Slide 41 text

http://blog.typekit.com/2009/05/27/introducing-typekit/ Fonts as a service Saturday, September 3, 11

Slide 42

Slide 42 text

http://readableweb.com/mozilla-announces-support-for-web-open-font-format-wo -in-firefox-3-6/ A web-specific font format Saturday, September 3, 11

Slide 43

Slide 43 text

share of desktop browser usage w/ @font-face support based on July 2011 browser usage numbers from Net Applications 96%+ Saturday, September 3, 11

Slide 44

Slide 44 text

EOT Embedded OpenType TrueType/ OpenType WOFF Web Open Font Format 3 web font formats Saturday, September 3, 11

Slide 45

Slide 45 text

EOT TTF WOFF SVG Internet Explorer 4.0 ✔ Internet Explorer 9.0 ✔ ✔ Safari 3.1 ✔ ✔ Safari 5.1 ✔ ✔ ✔ Opera 10.0 ✔ Opera 11.1 ✔ ✔ Firefox 3.1 ✔ Firefox 3.6 ✔ ✔ Chrome 1.0 ✔ ✔ Chrome 6.0 ✔ ✔ ✔ Mobile Safari / iOS 3.2 ✔ Mobile Safari / iOS 4.2 ✔ ✔ Mobile Safari / iOS 5.0 ✔ ✔ ✔ Saturday, September 3, 11

Slide 46

Slide 46 text

OpenType/TTF 8% WOFF 40% EOT 46% based on July 2011 browser usage numbers from Net Applications “FORMAT SHARE” ON DESKTOP BROWSERS Saturday, September 3, 11

Slide 47

Slide 47 text

Cross-platform @font-face options • “Bulletproof” @font-face syntax • Browser detection, on the server or client side • Use a service (Typekit, Fontdeck, Google Web Fonts) Saturday, September 3, 11

Slide 48

Slide 48 text

@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } “Bulletproof” @font-face Saturday, September 3, 11

Slide 49

Slide 49 text

@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } @font-face { font-family: 'MyFontFamily'; One @font-face block for every variation in your stylesheet Proxima Nova Condensed 17 variations 119 lines of code Saturday, September 3, 11

Slide 50

Slide 50 text

Use a service try{ Typekit.load(); }catch(e){} TYPEKIT FONTDECK Saturday, September 3, 11

Slide 51

Slide 51 text

• E ortless browser compatibility • Automatic updates • E ortless font licensing • A nice GUI for adding families & variations to your site’s stylesheet Benefits of using a web font service Saturday, September 3, 11

Slide 52

Slide 52 text

Giving your type too much coffee Or: Fancy display type with JavaScript & CSS3 Saturday, September 3, 11

Slide 53

Slide 53 text

Saturday, September 3, 11

Slide 54

Slide 54 text

http://letteringjs.com/ Saturday, September 3, 11

Slide 55

Slide 55 text

Put a bird on it

Saturday, September 3, 11

Slide 56

Slide 56 text

#title h1 { font-size: 72px; line-height: 72px; font-family: franklin-gothic-urw, Arial; } Saturday, September 3, 11

Slide 57

Slide 57 text

Saturday, September 3, 11

Slide 58

Slide 58 text

Saturday, September 3, 11

Slide 59

Slide 59 text

$(function(){ $('#title h1').lettering('words'); }); Saturday, September 3, 11

Slide 60

Slide 60 text

Saturday, September 3, 11

Slide 61

Slide 61 text

#title span { display: inline-block; padding: 10px 10px; background: #000; color: #fff; } Saturday, September 3, 11

Slide 62

Slide 62 text

Saturday, September 3, 11

Slide 63

Slide 63 text

#title span:nth-child(odd){ -webkit-transform: rotate(-13deg); background-color: #690; } Saturday, September 3, 11

Slide 64

Slide 64 text

Saturday, September 3, 11

Slide 65

Slide 65 text

#title span:nth-child(odd){ -webkit-transform: rotate(-13deg); background-color: #690; } #title span:nth-child(even){ -webkit-transform: rotate(13deg); background-color: #069; } Saturday, September 3, 11

Slide 66

Slide 66 text

Saturday, September 3, 11

Slide 67

Slide 67 text

#title span.word3 { -webkit-transform: none; text-transform: lowercase; font-family: baskerville; font-style: italic; font-weight: normal; font-size: 128px; line-height: 120px; padding: 0 10px; background-color: #fff; color: #960; } Saturday, September 3, 11

Slide 68

Slide 68 text

Saturday, September 3, 11

Slide 69

Slide 69 text

$(function(){ $('#title h1').lettering('words'); }); Saturday, September 3, 11

Slide 70

Slide 70 text

$(function(){ $('#title h1').lettering('letters'); }); Saturday, September 3, 11

Slide 71

Slide 71 text

Saturday, September 3, 11

Slide 72

Slide 72 text

#title span { display: inline-block; padding: 0 3px; } #title span:nth-child(1n){ -webkit-transform: rotate(-13deg); color: #690; } #title span:nth-child(2n){ -webkit-transform: rotate(13deg); color: #069; } #title span:nth-child(3n){ -webkit-transform: rotate(13deg) scale(1.3); color: #960; } #title span:nth-child(5n){ -webkit-transform: scale(0.8); color: #609; } Saturday, September 3, 11

Slide 73

Slide 73 text

Saturday, September 3, 11

Slide 74

Slide 74 text

/* Just the spaces */ #title span.char4, #title span.char6, #title span.char11, #title span.char14 { margin-left: 8px; margin-right: 8px; } Saturday, September 3, 11

Slide 75

Slide 75 text

Saturday, September 3, 11

Slide 76

Slide 76 text

Saturday, September 3, 11

Slide 77

Slide 77 text

No kerning Auto-kerning Manual kerning Saturday, September 3, 11

Slide 78

Slide 78 text

http://blog.typekit.com The Typekit Blog Saturday, September 3, 11

Slide 79

Slide 79 text

On Web Typography Jason Santa Maria Coming in 2012 from A Book Apart Saturday, September 3, 11

Slide 80

Slide 80 text

thanks! [email protected] @ddemaree on Twitter Saturday, September 3, 11

Slide 81

Slide 81 text

Q&A? Saturday, September 3, 11