Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Welcome to a Brave New World of Web Type

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Jon Tan
November 24, 2011
Design
1.9k
17

Welcome to a Brave New World of Web Type

From the closing talk of Beyond Tellerand conference in Düsseldorf, German. November, 2011.

Jon Tan

November 24, 2011

Transcript

135 slides

  1. WELCOME TO A BRAVE NEW WORLD OF — JON TAN

    — Web T Thursday, 24 November 11

  2. WILLKOMMEN IN EINER SCHÖNEN NEUEN WELT DES — JON TAN

    — Web T Thursday, 24 November 11

  3. 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.

  4. 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.

  5. AEG Typeface Thursday, 24 November 11 AEG typeface: First corporate

    typeface? No ‘J’ or ‘Q’.

  6. 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).

  7. THE Adventure SO FAR Thursday, 24 November 11

  8. 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.

  9. Thursday, 24 November 11 In 1997, web type looked like

    this. (Aliased bitmap type in IE4.) Released in September 1997. Supported @font-face EOT file format. Who knew?

  10. Thursday, 24 November 11 Analog ‘A’ in a Lego like

    a bitmap. I still like bitmaps. Mostly not on the screen, though.

  11. 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, specified in the TrueType ‘GASP’ (Grid-fitting and Scan-conversion Procedure) table.

  12. Thursday, 24 November 11 Then, in 2007, with the usual

    DIY attitude of a webby, Rich Rutter widened the possibilities with his font matrix.

  13. Thursday, 24 November 11 Rich produced a table with all

    Mac and Windows system fonts plus those bundled with MS Office and Adobe Creative Suite. NO Linux. Latin fonts only.

  14. I was still using Georgia, but then … Thursday, 24

    November 11 I was still using Georgia, but then…

  15. 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).

  16. Thursday, 24 November 11 Right after, Rich Rutter discussed a

    ‘web service for enabling downloadable fonts’ for the first time.

  17. Thursday, 24 November 11 Håkon wrote CCS @ Ten: The

    Next Big Thing for A List Apart in August, 2007.

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

    January, 2009.

  19. Thursday, 24 November 11 One of many.

  20. Thursday, 24 November 11 …hmm, I wonder who might be

    next? How do we navigate all this goodness?

  21. Web typograph … …i no thi trick Thursday, 24 November

    11 Web typography can seem tricky. (Auto Polo, c. 1913, Coney Island, Brooklyn, NY.)

  22. Typesettin SUBSTANCE OVER STYLE Thursday, 24 November 11 Reading is

    everything. This views are mine. There are no rules.

  23. 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)?

  24. Legibilit Thursday, 24 November 11 Legibility first…

  25. Micro typography Thursday, 24 November 11 Microtypography is concerned with

    the smallest details. How we read tells us why they’re important.

  26. We read by skipping along lines in ‘saccades’ with pauses

    or ‘fixations’ 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 ‘fixations’ (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

  27. “…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 scientific evidence says that we recognize a word’s component letters, then use that visual information to recognize a word.’

  28. Il1 (Gill Sans) Thursday, 24 November 11 Anyone tell me

    what these characters are? Gill Sans. i l 1

  29. Il1 (Helvetica) Thursday, 24 November 11 How about now? Helvetica.

    i l 1

  30. Il1 (Helvetica Neue) Thursday, 24 November 11 Any better? Helvetica

    Neue. i l 1

  31. Il1 (Sentinel) Thursday, 24 November 11 Now? Differentiating letter forms

    are important. Sentinel. i l 1 (by Hoefler Frere-Jones and used for this talk).

  32. Columbia is the world capital of gourmet junk Thursday, 24

    November 11 What does this say?

  33. Columbia is the world capital of gourmet junk Thursday, 24

    November 11 Now?

  34. Columbia is the world capital of gourmet junk (The upper

    part of letters are easier to differentiate.) Thursday, 24 November 11 The upper parts of letters are easier to differentiate. Letter

  35. Letterform is important for reading. u : Thursday, 24 November

    11 Letterforms are important for reading. Here’s an example…

  36. Comic Sans is ace! (Thanks, Vini.) Thursday, 24 November 11

    Comic Sans. Here’s a better example…

  37. Thursday, 24 November 11 FS Me by Fontsmith, designed with

    Mencap to aid legibility for those with disabilities.

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

    text is not optimal.

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

    is better.

  40. 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.

  41. 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.

  42. 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.

  43. Ah, that’s better. Trust the type designer with the tracking

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

  44. 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.

  45. 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.)

  46. 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.

  47. 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.

  48. 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.

  49. 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.

  50. 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).

  51. 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.

  52. CSS disabled Thursday, 24 November 11 CSS disabled.

  53. The reader comes first, always. Readers may use ears not

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

  54. Readabilit Thursday, 24 November 11 Stef: Who cares about content?

    I do! Trust the type designer with the tracking. (Mostly.)

  55. 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

  56. 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.

  57. Thursday, 24 November 11 http://jontangerine.com/about with approximate saccades and fixations

    showing flow (assuming a glance doesn’t bore you sill and you leave)! Georgia (primarily) Baskerville.

  58. Thursday, 24 November 11 http://jontangerine.com/about with approximate saccades and fixations

    showing flow (assuming a glance doesn’t bore you sill and you leave)! Georgia (primarily) Baskerville.

  59. 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.

  60. 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.

  61. I Love Typography: The origins of abc Thursday, 24 November

    11 I Love Typography: The origins of abc. Readable. Beautiful. Scala and Scala Sans.

  62. Thursday, 24 November 11 I Love Typography: The origins of

    abc. Readable. Beautiful. Scala and Scala Sans.

  63. 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).

  64. Analog.coop Thursday, 24 November 11 Analog.coop — there is a

    grid. It serves readability.

  65. Thursday, 24 November 11 And here it is.

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

    may help

  67. 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 fluid, flexible grid chapter is where it’s at. Buy it!

  68. Typographic hierarchy Thursday, 24 November 11 Typographic hierarchy

  69. 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.

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

    cases, colours.

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

  72. “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

  73. 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!

  74. 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 (fixations).

  75. 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.

  76. 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…

  77. 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…

  78. 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…

  79. Utilit befor for Thursday, 24 November 11 Utility before form.

    Form without utility is useless.

  80. 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.

  81. 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…

  82. 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.)

  83. 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.

  84. 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 differences 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…

  85. 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 difference.

  86. 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 difference. Test and test again.

  87. “…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…

  88. 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

  89. 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

  90. 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 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

  91. 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. Griffith (1879–1956), VP of Typographic Development at Mergenthaler Linotype — used from 1937 with letterpress. http://nicksherman.com/articles/bellCentennial.html

  92. 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’.

  93. Screen (what devices) and print? Display, running text, footnotes, tabular

    data? Choose and test the smallest text first. 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 first. Language support? Extra / OpenType features: Old style or lining numerals, fractions, math symbols? Small caps, contextual alternates, swashes, ligatures?Punctuation, symbols, ornaments?

  94. Emotio an styl Thursday, 24 November 11 Emotion versus style

  95. 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 film.

  96. Thursday, 24 November 11 Naomi: Pantone mention. Color. Our language

    is insufficient. 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).

  97. “Typography influences the subconscious so strongly that conditioning the observer

    with type is not only possible but definitely 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

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

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

  100. 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 (fixations).

  101. 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.

  102. Thursday, 24 November 11 London.

  103. Thursday, 24 November 11 New York.

  104. Thursday, 24 November 11 Paris.

  105. Thursday, 24 November 11 Barcelona. My favourite.

  106. Go armed into type galleries. Take emotions as a requirement,

    and find the historical and cultural forms that fit. Thursday, 24 November 11 Go armed into type galleries. Learn the historical and cultural context. Evoke emotion.

  107. Superfamilie & Combinin Thursday, 24 November 11 Trust the type

    designer with the tracking. (Mostly.)

  108. Impac v . immersio (Display vs. body.) Thursday, 24 November

    11 Impact versus immersion.

  109. Basic font metrics and terms Thursday, 24 November 11 Basic

    font metrics to keep an eye on when combining type, and creating font stacks.

  110. Thursday, 24 November 11 The mix of display and immersion.

    Trent Walton. http://trentwalton.com/ FF Meta Serif

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

  112. Thursday, 24 November 11 Aegir Hallmundur’s Ministry of Type blog

    using Bliss by Jeremy Tankard via Fontdeck. Stark simplicity and beauty.

  113. Thursday, 24 November 11 Hoefler & Frere-Jones on combining type.

    http://www.typography.com/email/2010_03/index.htm

  114. Thursday, 24 November 11 A palette with with wit. Mood

    interplay for energy. Hoefler & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

  115. Thursday, 24 November 11 A palette with with energy. Same

    historical period, different features. Hoefler & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

  116. Thursday, 24 November 11 A palette with with poise. Similar

    line width, different textures. Hoefler & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

  117. Thursday, 24 November 11 A palette with with dignity. Similar

    proportions, different roles. Hoefler & Frere-Jones on combining type. http://www.typography.com/email/2010_03/index.htm

  118. Thursday, 24 November 11 Method and Craft by Phil Coffman

    et al. http://methodandcraft.com/ Skolar and Proxima Nova Extra Condensed. Beautiful.

  119. Thursday, 24 November 11 The Boston Globe. Still hankering after

    that newspaper look on the screen, but whitespace joy! Miller Headline and Georgia.

  120. Thursday, 24 November 11 Display. Impact. Frank Chimero’s Lost World’s

    Fairs: Atlantis. Hellenic Wide. Proxima Nova & Extra Condensed.

  121. 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.

  122. Thursday, 24 November 11 Lettering.js http://lettingjs.com/ Trent Walton, Dave Rupert,

    and Reagan Ray of Paravel.

  123. Thursday, 24 November 11 FitText Trent Walton, Dave Rupert, and

    Reagan Ray of Paravel.

  124. 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/

  125. 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…

  126. Thursday, 24 November 11 Pimlico by Fernando Mello at Fontsmith,

    in one of the unreleased spreads for 8 Faces magazine #4 with swashes.

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

  128. Thursday, 24 November 11 Pimlico Black Italic EXPERT SUBSET on

    Fontdeck: http://fontdeck.com/font/fspimlicoweb/blackitalic

  129. Thursday, 24 November 11 Pimlico Black Italic on the Web

    via Fontdeck: http://fontdeck.com/font/fspimlicoweb/blackitalic

  130. Thursday, 24 November 11 Pimlico Black Italic with expert subset

    swashes on the Web via Fontdeck: http://fontdeck.com/font/ fspimlicoweb/blackitalic

  131. Mak your ow ! THERE ARE NO RULES Thursday, 24

    November 11 There are no rules. Make your own.

  132. 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.

  133. 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 finger pointing at the moon. Don’t look at the finger or you will miss all the heavenly glory.

  134. LASST UNS DAS ABENTEUER — VIELAN DANK — fortzusetze !

    Thursday, 24 November 11

  135. 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

More Decks by Jon Tan

See All by Jon Tan
Language and the lizard brain
jon
3
430

Other Decks in Design

See All in Design
信頼をデザインし、ブランドで市場を拓く。/ Designship2026
assuredjp
PRO
0
290
MUUUUU.ORG 協賛バナーのご案内
quoitworks999
0
760
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
210
言語化しきれなくてもいい〜勉強会を「完璧な成果を出す場」から「不確実な刺激と体験を持ち帰る場へ〜
hott3
0
230
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3.7k
いいUIとは？初心者向けに事例をもとにUIデザインを分解
yuichi_hara7
13
7.4k
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
muture
PRO
1
420
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
170
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
ottatto
3
2k
デザインハーネスはじめの一歩
satty9556
1
1.9k
Luna's Light
shemeetscity
0
730
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
420

Featured

See All Featured
Designing for humans not robots
tammielis
254
26k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
430
The SEO identity crisis: Don't let AI make you average
varn
0
630
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.9k
The Cult of Friendly URLs
andyhume
79
7.1k
Code Review Best Practice
trishagee
74
20k
The untapped power of vector embeddings
frankvandijk
2
2k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
460
WCS-LA-2024
lcolladotor
0
990
The Pragmatic Product Professional
lauravandoore
37
7.5k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Raft: Consensus for Rubyists
vanstee
143
7.9k