Welcome to a Brave New World of Web Type

Slide 1

Slide 1 text

WELCOME TO A BRAVE NEW WORLD OF — JON TAN — Web T Thursday, 24 November 11

Slide 2

Slide 2 text

WILLKOMMEN IN EINER SCHÖNEN NEUEN WELT DES — JON TAN — Web T Thursday, 24 November 11

Slide 3

Slide 3 text

Hello! I’m Jon Designer at Analog, co-founder of Mapalong and Fontdeck Still likes Toblerone Used to have hair @jontangerine Thursday, 24 November 11 Designer at Analog where we do things like the mapping app, Mapalong, and run the Brooklyn Beta conference, and Mild Bunch co-working studio. Co-founder of Fontdeck.

Slide 4

Slide 4 text

Peter Behrens (1868–1940). Architect. Designer. Gestalt-Ingenieur. Thursday, 24 November 11 Peter Behrens studied painting in Düsseldorf, and was director of the Kunstgerwerbeschule here in Düsseldorf (1903–7). He co-founded the Deutscher Werkbund. He went on to be AEG’s Artistic Consultant from 1907. Responsible for all identity, type, marketing and advertising collateral, and designed products and buildings.

Slide 5

Slide 5 text

AEG Typeface Thursday, 24 November 11 AEG typeface: First corporate typeface? No ‘J’ or ‘Q’.

Slide 6

Slide 6 text

AEG Turbine Factory (1908–9). Thursday, 24 November 11 Behrens also designed publicity, packaging and products for AEG, as well as the famous Turbine Factory in Berlin (1908–9).

Slide 7

Slide 7 text

THE Adventure SO FAR Thursday, 24 November 11

Slide 8

Slide 8 text

The Goonies (1985) discover typography (sort-of). Thursday, 24 November 11 The Goonies (1985). 1985: Emigre released the Oakland bitmap font designed by Zuzana Licko (pronounced, Litchko) on a Mac. Now in the MoMA typography collection. 1985: Prof. Ian Witten wrote a paper in the International Journal of Man-Machine Studies, entitled, Elements of computer typography. I didn’t see the font, or read the paper. I was 12 years old, and about to leave the choir I joined because they had an Atari 1000.

Slide 9

Slide 9 text

Thursday, 24 November 11 In 1997, web type looked like this. (Aliased bitmap type in IE4.) Released in September 1997. Supported @font-face EOT ﬁle format. Who knew?

Slide 10

Slide 10 text

Thursday, 24 November 11 Analog ‘A’ in a Lego like a bitmap. I still like bitmaps. Mostly not on the screen, though.

Slide 11

Slide 11 text

Andale Mono by Steve Matteson Arial by Robin Nicholas and Patricia Saunders Arial Black by Robin Nicholas and Patricia Saunders Comic Sans MS by Vincent Connare Courier New by Adrian Frutiger and Howard Kettler Georgia by Matthew Carter Impact by Geoffrey Lee Times New Roman by Stanley Morison with Starling Burgess and Victor Lardent Trebuchet MS by Vincent Connare Verdana by Matthew Carter 1996–2002; Core Fonts for the web Thursday, 24 November 11 Luckily, in 1996 Microsoft had started the Core fonts for the Web project. (Wingdings doesn’t count.) 1996–2002. It was terminated in 2002, the same year that @font-face rule was re-included in CSS. The type was anti- aliased from a given ppem size, speciﬁed in the TrueType ‘GASP’ (Grid-ﬁtting and Scan-conversion Procedure) table.

Slide 12

Slide 12 text

Thursday, 24 November 11 Then, in 2007, with the usual DIY attitude of a webby, Rich Rutter widened the possibilities with his font matrix.

Slide 13

Slide 13 text

Thursday, 24 November 11 Rich produced a table with all Mac and Windows system fonts plus those bundled with MS Oﬃce and Adobe Creative Suite. NO Linux. Latin fonts only.

Slide 14

Slide 14 text

I was still using Georgia, but then … Thursday, 24 November 11 I was still using Georgia, but then…

Slide 15

Slide 15 text

Håkon Wium Lie at @media in June ’07. Opera and web fonts? Thursday, 24 November 11 @media, London, June 2007 Håkon Wium Lie (Howcome veeum lee) intimated that Opera will support web fonts. Later in June he published an article in CNET, and ‘CSS @10: The Next Big Thing’ in A List Apart in August. Håkon Wium Lie (Howcome veeum lee) proposed CSS in 1994. @font-face included in CSS level 2 in 1998. (Same time as synthesising font variants — ARGHHH). Removed in CSS 2.1 (http://www.w3.org/TR/CSS21/changes.html#c15). Re-appeared in CSS3 Web Fonts module (2002).

Slide 16

Slide 16 text

Thursday, 24 November 11 Right after, Rich Rutter discussed a ‘web service for enabling downloadable fonts’ for the ﬁrst time.

Slide 17

Slide 17 text

Thursday, 24 November 11 Håkon wrote CCS @ Ten: The Next Big Thing for A List Apart in August, 2007.

Slide 18

Slide 18 text

Thursday, 24 November 11 Fontdeck, started after a conversation in January, 2009.

Slide 19

Slide 19 text

Thursday, 24 November 11 One of many.

Slide 20

Slide 20 text

Thursday, 24 November 11 …hmm, I wonder who might be next? How do we navigate all this goodness?

Slide 21

Slide 21 text

Web typograph … …i no thi trick Thursday, 24 November 11 Web typography can seem tricky. (Auto Polo, c. 1913, Coney Island, Brooklyn, NY.)

Slide 22

Slide 22 text

Typesettin SUBSTANCE OVER STYLE Thursday, 24 November 11 Reading is everything. This views are mine. There are no rules.

Slide 23

Slide 23 text

How recognisable are individual characters / glyphs? Legibility How easy is it to understand the text (and interface)? Readability + Thursday, 24 November 11 Legibility: How recognisatble are individual characters / glyphs? Readability: How easy is it to understand the text (and interface)?

Slide 24

Slide 24 text

Legibilit Thursday, 24 November 11 Legibility ﬁrst…

Slide 25

Slide 25 text

Micro typography Thursday, 24 November 11 Microtypography is concerned with the smallest details. How we read tells us why they’re important.

Slide 26

Slide 26 text

We read by skipping along lines in ‘saccades’ with pauses or ‘ﬁxations’ that allow us to recognise and understand a group of letters before reading on. Jost Hochuli, Detail in Typography, new ed. p. 9 (Hyphen Press, 2008). Thursday, 24 November 11 Jost Hochuli, Detail in Typography, new edn. p. 9 (Hyphen Press, 2008). Dan: Don’t break what works! Inherent value testing. We read (left to right) by skipping along lines in ‘saccades’ (20-35ms) pauses or ‘ﬁxations’ (200-250ms) that allow us to recognise a group of letters before skipping on. - ‘10-15% of all saccades are regressive or backwards movements.’ ‘Fixations never occur between words, and usually occur just to the left of the middle of a word.’ —Dr. Kevin Larson. Psychologist, Advanced Reading Technology, Microsoft

Slide 27

Slide 27 text

“…letters within a word are recognised simultaneously, and the letter information is used to recognise the words.” —Dr. Kevin Larson. Advanced Reading Technology, Microsoft The Science of Word Recognition: http://microsoft.com/typography/ctfonts/WordRecognition.aspx Thursday, 24 November 11 ‘…letters within a word are recognised simultaneously, and the letter information is used to recognise the words.’ —Dr. Kevin Larson. Psychologist, Advanced Reading Technology, Microsoft describing parallel letter recognition. Also: ‘The bulk of scientiﬁc evidence says that we recognize a word’s component letters, then use that visual information to recognize a word.’

Slide 28

Slide 28 text

Il1 (Gill Sans) Thursday, 24 November 11 Anyone tell me what these characters are? Gill Sans. i l 1

Slide 29

Slide 29 text

Il1 (Helvetica) Thursday, 24 November 11 How about now? Helvetica. i l 1

Slide 30

Slide 30 text

Il1 (Helvetica Neue) Thursday, 24 November 11 Any better? Helvetica Neue. i l 1

Slide 31

Slide 31 text

Il1 (Sentinel) Thursday, 24 November 11 Now? Diﬀerentiating letter forms are important. Sentinel. i l 1 (by Hoeﬂer Frere-Jones and used for this talk).

Slide 32

Slide 32 text

Columbia is the world capital of gourmet junk Thursday, 24 November 11 What does this say?

Slide 33

Slide 33 text

Columbia is the world capital of gourmet junk Thursday, 24 November 11 Now?

Slide 34

Slide 34 text

Columbia is the world capital of gourmet junk (The upper part of letters are easier to diﬀerentiate.) Thursday, 24 November 11 The upper parts of letters are easier to diﬀerentiate. Letter

Slide 35

Slide 35 text

Letterform is important for reading. u : Thursday, 24 November 11 Letterforms are important for reading. Here’s an example…

Slide 36

Slide 36 text

Comic Sans is ace! (Thanks, Vini.) Thursday, 24 November 11 Comic Sans. Here’s a better example…

Slide 37

Slide 37 text

Thursday, 24 November 11 FS Me by Fontsmith, designed with Mencap to aid legibility for those with disabilities.

Slide 38

Slide 38 text

Small text is not optimal. Thursday, 24 November 11 Small text is not optimal.

Slide 39

Slide 39 text

Bigger text is better. Thursday, 24 November 11 Bigger text is better.

Slide 40

Slide 40 text

11pt = 16px (approx.); Wilson Miner’s relative readability photo based on iA’s work. Thursday, 24 November 11 11pt = 16px (approx.); Wilson Miner’s relative readability photo based on Oliver Reichenstein’s work in 2006.

Slide 41

Slide 41 text

Tight tracking is not good.Caution is required. Thursday, 24 November 11 Tight tracking is not good. Caution is required. Even with a superbly legible face like Sentinel.

Slide 42

Slide 42 text

Wide tracking is tiring on the eyes for any length of time. Thursday, 24 November 11 Wide tracking is tiring on the eyes for any length of time.

Slide 43

Slide 43 text

Ah, that’s better. Trust the type designer with the tracking . Thursday, 24 November 11 Trust the type designer with the tracking. (Mostly.)

Slide 44

Slide 44 text

Low contrast is not optimal. Thursday, 24 November 11 Low contrast is not optimal. Also beware thin type, it has a low contrast (like typographic “colour”) or colour density of positive space inside the glyphs on the page.

Slide 45

Slide 45 text

Err on the side of high contrast. But, very high contrast can also be tiring, especially in low ambient light. Thursday, 24 November 11 Err on the side of high contrast. (But, very high contrast can also be tiring, especially in low ambient light.)

Slide 46

Slide 46 text

Thursday, 24 November 11 I love their beautiful products. Carefully crafted site, but low contrast for body type. OK for those with perfect eye sight, and a good screen (preferably not in bight sunshine), but could be problematic for others.

Slide 47

Slide 47 text

Ligatures and alternates in running text should help not intrude. e ve upendous extra s of sweet ord truffles can offer something like 12,3456,890 sufficient avours. Thursday, 24 November 11 Ligatures and alternates in running text should help reading not intrude on it. E.g. Standard ligatures versus discretionary ligatures versus historical forms. Old style numerals (proportional) versus lining numerals.

Slide 48

Slide 48 text

Ah, nice. e ve stupendous extracts of sweet ord truffles can offer something like , , sufficient avours. Thursday, 24 November 11 Ligatures and alternates in running text should help reading not intrude on it. E.g. Standard ligatures versus discretionary ligatures versus historical forms. Old style numerals (proportional) versus lining numerals.

Slide 49

Slide 49 text

Web type must also be read by machines like screen readers, and search engines, as well as eyes. but… Thursday, 24 November 11 But: Web type must be read by machines like screen readers, and search engines, as well as eyes.

Slide 50

Slide 50 text

Thursday, 24 November 11 A good book. I like it! Yet, a bad website. Caslon. ‘st’ and ‘ct’ ligatures. Small caps. The Typographic Desk Reference, Theodore Rosendorf (Oak Knoll, 2009).

Slide 51

Slide 51 text

The Typographic Desk Reference, Theodore Rosendorf (Oak Knoll, 2009). Images disabled, ALT attribute text displayed Thursday, 24 November 11 Images disabled, ALT attribute text displayed.

Slide 52

Slide 52 text

CSS disabled Thursday, 24 November 11 CSS disabled.

Slide 53

Slide 53 text

The reader comes ﬁrst, always. Readers may use ears not eyes. web != prin Thursday, 24 November 11 Web != print. The reader comes ﬁrst, always! Design for reading before style. (We’ll get to the psychology of style later.)

Slide 54

Slide 54 text

Readabilit Thursday, 24 November 11 Stef: Who cares about content? I do! Trust the type designer with the tracking. (Mostly.)

Slide 55

Slide 55 text

Macro typography Layout. Rhythm. Hierarchy. Thursday, 24 November 11 Marcro typography: Readability. Page scanning and comprehension. UX designer, Joe Leech, who’s done hundreds of hours of

Slide 56

Slide 56 text

Simplified web site scan path from eye-tracking research done by The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools. Thursday, 24 November 11 Simplified scan path of web sites from research done by The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools. ‘Z’ pattern of fixations around the page, with regressive saccades then returning to the pattern.

Slide 57

Slide 57 text

Thursday, 24 November 11 http://jontangerine.com/about with approximate saccades and ﬁxations showing ﬂow (assuming a glance doesn’t bore you sill and you leave)! Georgia (primarily) Baskerville.

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Set type for readability Thursday, 24 November 11 Marcro typography: Readability. Page scanning and comprehension. With help from UX designer, Joe Leech, who’s done hundreds of hours of usability testing.

Slide 60

Slide 60 text

Grain & Gram. Thursday, 24 November 11 Grain & Gram. Beautiful stories, and concept. However, the three main columns that extended beyond viewport interrupt reading with scrolling and large saccades to the top of the next column.

Slide 61

Slide 61 text

I Love Typography: The origins of abc Thursday, 24 November 11 I Love Typography: The origins of abc. Readable. Beautiful. Scala and Scala Sans.

Slide 62

Slide 62 text

Thursday, 24 November 11 I Love Typography: The origins of abc. Readable. Beautiful. Scala and Scala Sans.

Slide 63

Slide 63 text

One column. Interrupt the flow gently. Use fixations in the scan path. Thursday, 24 November 11 A single column works best for longer text with elements that break up the scan path with pauses (fixations).

Slide 64

Slide 64 text

Analog.coop Thursday, 24 November 11 Analog.coop — there is a grid. It serves readability.

Slide 65

Slide 65 text

Thursday, 24 November 11 And here it is.

Slide 66

Slide 66 text

hashgrid.com Thursday, 24 November 11 And here it is. http://hashgrid.com/ may help

Slide 67

Slide 67 text

Flexible grids are better. Ethan Marcotte’s Responsive Web Design. Thursday, 24 November 11 If I was doing the Analog site again, Ethan’s felxible fonts and ﬂuid, ﬂexible grid chapter is where it’s at. Buy it!

Slide 68

Slide 68 text

Typographic hierarchy Thursday, 24 November 11 Typographic hierarchy

Slide 69

Slide 69 text

Size Size Size Size Size Size Hue & luminosity Hue & luminosity Hue & luminosity Hue & luminosity Hue & luminosity Style & case Style & Case Style & case style & case STYLE & CASE And, of course, white space. Thursday, 24 November 11 Typographic hierarchy. Hue and luminosity (colour and radiance). Style and case (typeface, font, and house style). Size.

Slide 70

Slide 70 text

typeface sizes cases colours Thursday, 24 November 11 typeface, sizes, cases, colours.

Slide 71

Slide 71 text

Measure (line lengt ) Thursday, 24 November 11 The measure.

Slide 72

Slide 72 text

“Anything from to characters is widely regarded as a satisfactory length of line for a single-column page[…] For multiple column work, a better average is to characters.” —Robert Bringhurst, Elements of Typographic Style, rd ed. p. (Hartley & Marks, ). Thursday, 24 November 11

Slide 73

Slide 73 text

Font size: em = px Line height: . em = px Measure: ~ characters Snappy text + generous leading = cool for school. Thursday, 24 November 11 However, in the Analog site, the lines are more. Why? Beacause context is everything. With snappy, relatively short prose, and generous leading, line length can be greater without harm. See, there are no rules, just applied knowledge in context!

Slide 74

Slide 74 text

Line height = one lead Thursday, 24 November 11 A single column works best for longer text with elements that break up the scan path with pauses (ﬁxations).

Slide 75

Slide 75 text

One lead i m go Thursday, 24 November 11 One lead. is my god. If the line height makes the text readable, then you’re cooking on gas.

Slide 76

Slide 76 text

Choosin Type Thursday, 24 November 11 Pick type for utility before form Choose for emotion before style Assembling a typography palette. So, let’s start with utility…

Slide 77

Slide 77 text

Choosin Type FUNCTIONAL TYPE IS BEAUTIFUL Thursday, 24 November 11 Pick type for utility before form Choose for emotion before style Assembling a typography palette. So, let’s start with utility…

Slide 78

Slide 78 text

Choosin Type . Utility before form . Emotion and style . Superfamilies et al. FUNCTIONAL TYPE IS BEAUTIFUL Thursday, 24 November 11 Pick type for utility before form Choose for emotion before style Assembling a typography palette. So, let’s start with utility…

Slide 79

Slide 79 text

Utilit befor for Thursday, 24 November 11 Utility before form. Form without utility is useless.

Slide 80

Slide 80 text

Choose from licensed web fonts. (Sounds crazy, I know.) Thursday, 24 November 11 Choose from licensed web fonts. May sound obvious, but many don’t. Disregard system fonts unless you know you can get a web font equivalent.

Slide 81

Slide 81 text

Thursday, 24 November 11 These guys have fonts that are prepared, licensed, and optimised for the screen. Why these guys? Because, this is our paper…

Slide 82

Slide 82 text

Our paper (sort of) 50cm Telefunken cathode ray tube (1938) Thursday, 24 November 11 Our very own adverse conditions. 1938 50cm Telefunken Cathode Ray Tube. (The year after Bell Gothic started to be used.) CRT to LCD to LED (CRT also sometimes know as the ‘Braun tube’ after German physicist and Nobel Laureate, Ferdinand Braun, who invented the earliest version in 1897.)

Slide 83

Slide 83 text

Relative resolution of common devices. Different OS, different browsers. Thursday, 24 November 11 Today… 2560 x 1440 (27-inch iMac) down to 320 x 480 (iPhone 3). All these devices support web fonts. Largest consumer display I could find: 2560 x 1650 (30-inch Dell) Different resolutions, different operating systems, different browsers.

Slide 84

Slide 84 text

XP: Standard smoothing XP / Vista: GDI + ClearType Win 7: DirectWrite + Cleartype 10.4(Tiger) and later: Core Text + Core Graphics FreeType Text rendering overview Windows OS X Else… Thursday, 24 November 11 Text rendering (an overview). Philosophical diﬀerences between the Windows and OS X approach to screen rendering. Windows gives the control (perhaps an onerous amount of control) to font developers. OS X tries to do the optimising for them. Browsers (in summary) use the rendering engine of the operating system. They have their quirks though…

Slide 85

Slide 85 text

Firefox 6.0.2 Chrome . . . Thursday, 24 November 11 Yaron Schoen’s lovely site using FF Unit Slab Web Pro in Firefox and Chrome showing the kerning diﬀerence.

Slide 86

Slide 86 text

Kerning Firefox 6.0.2 No kerning Chrome . . . ^ ^ Thursday, 24 November 11 Yaron Schoen’s lovely site using FF Unit Slab Web Pro in Firefox and Chrome showing the kerning diﬀerence. Test and test again.

Slide 87

Slide 87 text

“…the idea gives rise to a variety of forms” —Jonathan Hoefler Ampersand conference, Brighton, 2011. e goo new i … Thursday, 24 November 11 The good news is type designers and font developers are here to help. Yves: cultural considerations. Typefaces are an idea, a concept. Fonts are forms derived from that idea that are optimised for certain media like print or screen. An analogy might be a piece of music re-mastered for the radio or for hi-fidelity music systems. The idea remains constant but the form, the sound, may change to suit the platform. Fonts are designed and mastered for different technical conditions. Here’s an example…

Slide 88

Slide 88 text

Bell Centennial by Matthew Carter in 8 Faces (chosen by Nick Sherman) Thursday, 24 November 11 Example of type that’s perfect for purpose: 1976, AT&T — Bell Centennial by Matthew Carter. 6pt. High speed offset litho printing. Named in honour of the company’s 100th anniversary. Was to be used at 6pt on high-speed offset lithography presses. (Alex Kaczun credited with weapping outlines in bezier curves for our use today) . CRT composition. Bell Gothic — Chauncey H. Griffith (1879–1956), VP of Typographic Development at Mergenthaler Linotype — used from 1937 with letterpress. http://nicksherman.com/articles/bellCentennial.html

Slide 89

Slide 89 text

Matthew Carter featuring Bell Centennial Thursday, 24 November 11 Example of type that’s perfect for purpose: 1976, AT&T — Bell Centennial by Matthew Carter. 6pt. High speed offset litho printing. Named in honour of the company’s 100th anniversary. Was to be used at 6pt on high-speed offset lithography presses. (Alex Kaczun credited with weapping outlines in bezier curves for our use today) . CRT composition. Bell Gothic — Chauncey H. Griffith (1879–1956), VP of Typographic Development at Mergenthaler Linotype — used from 1937 with letterpress. http://nicksherman.com/articles/bellCentennial.html

Slide 90

Slide 90 text

Bell Centennial (image thanks to Nick Sherman, http://nicksherman.com Thursday, 24 November 11 1976, AT&T commission a new typeface for telephone directories — Bell Centennial by Matthew Carter. Named in honour of the company’s 100th anniversary. Was to be used at 6pt on high-speed oﬀset lithography presses. (Alex Kaczun credited with weapping outlines in bezier curves for our use today) . CRT composition. Bell Gothic — Chauncey H. Griﬃth (1879–1956), VP of Typographic Development at Mergenthaler Linotype — used from 1937 with letterpress. http://nicksherman.com/articles/bellCentennial.html

Slide 91

Slide 91 text

Bell Centennial (image thanks to Nick Sherman, http://nicksherman.com Thursday, 24 November 11 Ink traps. The device is paper. That was 1976. But, for the previous 40 years, Bell Gothic was used. Chauncey H. Griﬃth (1879–1956), VP of Typographic Development at Mergenthaler Linotype — used from 1937 with letterpress. http://nicksherman.com/articles/bellCentennial.html

Slide 92

Slide 92 text

Drawn for larger sizes. High contrast. Thin serifs. Complex details like the ear and loop of the ‘g’. Drawn for small sizes. Higher x-height. Lower contrast. Thicker serifs. Simplified ‘g’ and other features. Thursday, 24 November 11 Abril Display and Text by Type Together. Didone-like display, text inspired by 19th century slab serifs and Scotch roman type. Drawn for use at different sizes. (‘Opticals’; faces drawn for different sizes.) Different stroke contrast and serifs. Different details like the ear and loop of the ‘g’.

Slide 93

Slide 93 text

Screen (what devices) and print? Display, running text, footnotes, tabular data? Choose and test the smallest text ﬁrst. Test against fall back fonts. Language support? Extra / OpenType features: Old style or lining numerals, fractions, math symbols? Small caps, contextual alternates, swashes, ligatures? Punctuation, symbols, ornaments? Utility before form Thursday, 24 November 11 Screen (what devices) and print? Display, running text, footnotes, tabular data? Choose and test the smallest text ﬁrst. Language support? Extra / OpenType features: Old style or lining numerals, fractions, math symbols? Small caps, contextual alternates, swashes, ligatures?Punctuation, symbols, ornaments?

Slide 94

Slide 94 text

Emotio an styl Thursday, 24 November 11 Emotion versus style

Slide 95

Slide 95 text

Thursday, 24 November 11 Sometimes there are no words, and none are needed to be understood. WALL•E had no dialogue until 22 minutes into the ﬁlm.

Slide 96

Slide 96 text

Thursday, 24 November 11 Naomi: Pantone mention. Color. Our language is insuﬃcient. HTML 4.01 — 16 named colours. CSS3 — 78 X11 color names standardised in SVG 1.0 with gray/grey variants. New displays with 32-bit colour — 4.2 billion distinct colours (with some non-colour elements like alpha).

Slide 97

Slide 97 text

“Typography inﬂuences the subconscious so strongly that conditioning the observer with type is not only possible but deﬁnitely happens whether we want it to or not.” — Stefan Rögener, Albert Jan-Pool, Ursula Packhäuser, Branding with Type, English Translation (Adobe Press, ). Thursday, 24 November 11

Slide 98

Slide 98 text

Thursday, 24 November 11 Bello, by Underware. ‘Hate’ in Malay.

Slide 99

Slide 99 text

Thursday, 24 November 11 Graveblade, by Typodermic. ‘Love’ in Malay.

Slide 100

Slide 100 text

Websites are places not postcards Thursday, 24 November 11 A single column works best for longer text with elements that break up the scan path with pauses (ﬁxations).

Slide 101

Slide 101 text

Type shapes our experience. It echoes in our memory long after we’ve left. Thursday, 24 November 11 Type shapes our experience. It echoes in our memory long after we’ve left.

Slide 102

Slide 102 text

Thursday, 24 November 11 London.

Slide 103

Slide 103 text

Thursday, 24 November 11 New York.

Slide 104

Slide 104 text

Thursday, 24 November 11 Paris.

Slide 105

Slide 105 text

Thursday, 24 November 11 Barcelona. My favourite.

Slide 106

Slide 106 text

Go armed into type galleries. Take emotions as a requirement, and ﬁnd the historical and cultural forms that ﬁt. Thursday, 24 November 11 Go armed into type galleries. Learn the historical and cultural context. Evoke emotion.

Slide 107

Slide 107 text

Superfamilie & Combinin Thursday, 24 November 11 Trust the type designer with the tracking. (Mostly.)

Slide 108

Slide 108 text

Impac v . immersio (Display vs. body.) Thursday, 24 November 11 Impact versus immersion.

Slide 109

Slide 109 text

Basic font metrics and terms Thursday, 24 November 11 Basic font metrics to keep an eye on when combining type, and creating font stacks.

Slide 110

Slide 110 text

Thursday, 24 November 11 The mix of display and immersion. Trent Walton. http://trentwalton.com/ FF Meta Serif

Slide 111

Slide 111 text

Thursday, 24 November 11 Eden Spiekermann. http://edenspiekermann.com/ FF Unit Slab

Slide 112

Slide 112 text

Thursday, 24 November 11 Aegir Hallmundur’s Ministry of Type blog using Bliss by Jeremy Tankard via Fontdeck. Stark simplicity and beauty.

Slide 113

Slide 113 text

Thursday, 24 November 11 Hoeﬂer & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

Slide 114

Slide 114 text

Thursday, 24 November 11 A palette with with wit. Mood interplay for energy. Hoeﬂer & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

Slide 115

Slide 115 text

Thursday, 24 November 11 A palette with with energy. Same historical period, diﬀerent features. Hoeﬂer & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

Slide 116

Slide 116 text

Thursday, 24 November 11 A palette with with poise. Similar line width, diﬀerent textures. Hoeﬂer & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

Slide 117

Slide 117 text

Thursday, 24 November 11 A palette with with dignity. Similar proportions, diﬀerent roles. Hoeﬂer & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

Slide 118

Slide 118 text

Thursday, 24 November 11 Method and Craft by Phil Coﬀman et al. http://methodandcraft.com/ Skolar and Proxima Nova Extra Condensed. Beautiful.

Slide 119

Slide 119 text

Thursday, 24 November 11 The Boston Globe. Still hankering after that newspaper look on the screen, but whitespace joy! Miller Headline and Georgia.

Slide 120

Slide 120 text

Thursday, 24 November 11 Display. Impact. Frank Chimero’s Lost World’s Fairs: Atlantis. Hellenic Wide. Proxima Nova & Extra Condensed.

Slide 121

Slide 121 text

Thursday, 24 November 11 Many web sites need both experiences. Initial impact and immersion. Kitchen Sink Studios. Impact and some immersion. Bodoni & Poster Bodoni. Brandon Grotesque.

Slide 122

Slide 122 text

Thursday, 24 November 11 Lettering.js http://lettingjs.com/ Trent Walton, Dave Rupert, and Reagan Ray of Paravel.

Slide 123

Slide 123 text

Thursday, 24 November 11 FitText Trent Walton, Dave Rupert, and Reagan Ray of Paravel.

Slide 124

Slide 124 text

Thursday, 24 November 11 Fontshop group typefaces by genre, alternatives to famous faces, application, and period. Very useful to research a typographic palette, and get ideas for the kinds of web font you might want. http://www.fontshop.com/fontlists/

Slide 125

Slide 125 text

Ope Typ f r W b? Thursday, 24 November 11 Finally, OpenType for the Web. Works in FF thanks to John Daggett of Mozilla. Ligatures in Safari. We have an interim solution…

Slide 126

Slide 126 text

Thursday, 24 November 11 Pimlico by Fernando Mello at Fontsmith, in one of the unreleased spreads for 8 Faces magazine #4 with swashes.

Slide 127

Slide 127 text

Thursday, 24 November 11 Pimlico Black Italic on Fontdeck: http://fontdeck.com/font/fspimlicoweb/blackitalic

Slide 128

Slide 128 text

Thursday, 24 November 11 Pimlico Black Italic EXPERT SUBSET on Fontdeck: http://fontdeck.com/font/fspimlicoweb/blackitalic

Slide 129

Slide 129 text

Thursday, 24 November 11 Pimlico Black Italic on the Web via Fontdeck: http://fontdeck.com/font/fspimlicoweb/blackitalic

Slide 130

Slide 130 text

Thursday, 24 November 11 Pimlico Black Italic with expert subset swashes on the Web via Fontdeck: http://fontdeck.com/font/ fspimlicoweb/blackitalic

Slide 131

Slide 131 text

Mak your ow ! THERE ARE NO RULES Thursday, 24 November 11 There are no rules. Make your own.

Slide 132

Slide 132 text

Live the questions and one day grow into the answers. Thursday, 24 November 11 Live the questions and one day grow into the answers. A good idea for life, and typography. Keep asking questions of the decisions you feel your way to. Keep testing on the web. Develop your own style.

Slide 133

Slide 133 text

Thursday, 24 November 11 There are no rules, but there are patterns. With a good technical grounding in setting and choosing web type, and a palette based on use case, the patterns emerge. Substance. Legibility. Readability. Utility. Emotion. Typographic palette. Don’t think. feel. It’s like a ﬁnger pointing at the moon. Don’t look at the ﬁnger or you will miss all the heavenly glory.

Slide 134

Slide 134 text

LASST UNS DAS ABENTEUER — VIELAN DANK — fortzusetze ! Thursday, 24 November 11

Slide 135

Slide 135 text

http://en.wikipedia.org/wiki/File:Internet_Explorer_4.png http://en.wikipedia.org/wiki/File:Peter_Behrens,_um_1913.jpg http://nicksherman.com/articles/bellCentennial.html http://fontdeck.com/typefaces/all/tags/superfamily:abril Jost Hochuli, Detail in Typography, new edn. p. 9 (Hyphen Press, 2008). Matthew Carter Bell Centennial sample and Jan Middendorp photo: http://new.myfonts.com/newsletters/sp/200705.html http://www.flickr.com/photos/nickfindley/3528858451/ http://www.flickr.com/photos/37010090@N04/5136170057/ Credits Thursday, 24 November 11