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.
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.
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).
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.
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?
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.
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.
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).
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)?
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
“…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.’
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).
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
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.
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.
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.
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.)
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.
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.
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.
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.
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).
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.
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.)
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.
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.
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.
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.
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.
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).
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!
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.
“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
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!
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).
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…
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…
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…
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.
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.)
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.
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…
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.
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.
“…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…
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
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
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
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
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’.
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?
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).
“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
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).
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.
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.
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
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
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
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
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.
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/
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…
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.
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.
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
jon
uxevents
y__ri9813
uxaustralia
hjmkth
ajstarks
sms_tech
mayunak
nextbeat
tammyeverts
jcasabona
andyhume
smashingmag
sonatard
skipperchong
mraible
philnash
chrislema
panda_program
chriscoyier
myddelton