SlideShare une entreprise Scribd logo
1  sur  15
Télécharger pour lire hors ligne
Variable Fonts
What just happened?
23 September 2016 ·
Thomas Phinney · fontlab.com · @FontLab ·
thomasphinney.com · @ThomasPhinney ·
Hi, I’m Thomas Phinney.
My story in brief is, I’m a font geek. My background:
Adobe (product manager for fonts & global typography) … Extensis (PM
for web fonts and font mgmt) … FontLab (President)
By way of background, let me briefly mention what has happened over
the last couple of years with color fonts: several different vendors
thought we needed a way of doing multi-color fonts for things like
emoji.
So we got four different solutions.
All four of them are in the latest OpenType spec. Adoption just may not
have been the fastest, although the latest version of Windows 10
supports all four formats.
I don’t think this background is entirely coincidental to last week’s
announcement:
photo by
Thomas Phinney
Obviously this was not a good outcome. So, since last January, a quiet
cabal of font geeks and engineers, first from the four companies began
meeting and plotting the next big thing.
photo by
Thomas Phinney
These are photos I took at the next-to-last meeting, which took place
during TypeCon in Seattle last month.
Behdad Esfahbod
GOOGLE
Peter Constable
MICROSOFT
Ned Hadley
APPLE
David Lemon
ADOBE
photo by
Alessia Mazzarella
Here is the Q&A from the announcement, with the speakers all hanging
out as friendly colleagues. Which, by the way, is how they acted in the
behind the scenes meetings leading up to the announcement. Just a
bunch of font geeks and engineers working together.
No more fragmentation. Now, I need to help you understand this: in the
font world, we’d never had a major new development involving more
than two big companies.

Pretty amazing stuff to me. On a hunch, I checked the weather for that
day.
(OT Font Variations)
Variable Fonts
OK, so that was interesting. What is this all about, anyway?
The formal label for the tech is OpenType font variations, or variable
fonts for short. Variable fonts are essentially an updating of Apple’s GX
Variations tech from the early 90s, which is functionally a superset of
Adobe’s multiple master technology of the same vintage.
Two Key Things
Compression for the whole family (70%?)
Design axes (hence the “variable” / “variaYons”)
Design Axes
The idea is that you can have different font designs and interpolate or
blend between them to get a near-infinite range of gradations, called
“instances.”
Each area of variation is called an AXIS. A variable font may have just one
axis, or several. Weight and width are the most common axes.
From a design perspective, what’s exciting is that you can get not just
some small number of specific values, but any degree in between.
Design Space
2
Figure 1 A multiple master design matrix
is established by the design axes integrated
into the typeface. Shown here is Myriad’s
two-dimensional matrix comprised of weight
and width axes, and a small sampling of the
possible font variations that can be custom-
generated within it.
For furth er tech n ical in form ation , please refer to Adobe’s tech n ical n ote
#5015 Adobe Type 1 Font Format Supplement.
Definition of Terms
Defin ition s for several key term s used in th is docum en t are listed below.
For a com plete glossary of defin ition s, see Appen dix B.
Multiple master technology
An en h an cem en t of Type 1 fon t tech n ology in corporatin g on -dem an d
in terpolation in to a fon t program .
Multiple master typeface
A super-typeface—a very large fam ily of related styles with in a sin gle Type 1
fon t program . Each m ultiple m aster typeface con tain s all th e in form ation
n ecessary to gen erate h un dreds of style variation s as in dividual fon ts, or
instances.
NOTE: In this document, the term typeface is not interchangeable with fon t.
Extended
Condensed
Light BlackW eight
Width
The range of possible designs is called a “design space”
So with a single axis font, you can visualize the design space or range of
possible instances as a simple line.
For a two-axis font, it’s a flat space, perhaps a square.
With three axes you get a 3-d space such as a cube.
This is an attempt to visualize a 4-axis design space, which would make
a hypercube.
But there is no real limit, you can have as many axes as you want!
Well, OK, I think maybe there would be a 64K limit. But 64K should be
enough for anyone.
DEMO
OpenType History
1996: Format announced by Adobe & Microso^
1998: Dropped MulYple Master (was only OT-CFF)
2000: First significant numbers of fonts
by 2006: Replaced PS Type 1 for new fonts
Now in sync with open ISO standard, OFF
Here’s some OpenType history.
Basically it’s been at least a decade since most vendors started making
their new fonts primarily in OpenType.
I think the other key thing is that OpenType is now an open standard. Or
technically, there is an open font standard, the Open Font Format or
O.F.F., that OpenType is kept in sync with. So now many aspects of
OpenType development are done in public.
This doesn’t mean backroom discussions are unimportant, nor does it
stop vendors from going off and doing their own things privately—as
we’ve seen in the past couple of years, with four competing ways of
doing color fonts—all of which are now enshrined in the OpenType spec.
The latest version of Windows 10 actually supports all four. It’s kinda
cray-cray.
Multiple Master fonts
Adobe extension to PostScript Type 1 format (1991)
Special flavor of PS Type 1 font files (Mac & Win)
Allowed axis-based designs
Briefly allowed for OpenType CFF (only)
• Dropped from OpenType spec in 1998
Adobe converted old MM fonts to OT by 2002–03
Gradually deprecated and reduced support
Apple’s GX/AAT
GX Typography (1991)
Rebranded Apple Advanced Typography (OS X)
Smart font format (like OpenType)
• Smart fonts almost enYrely Apple system fonts
Offers opYonal axis-based fonts (like MM)
• Lijle tracYon / 3rd-party support
OpenType
Microso^ + Adobe (later open as Open Font Format)
Compare vs PostScript Type 1 & TrueType
Single-file, cross-pla6orm fonts
OpYonal more language support
OpYonal “smart font” features
• typographic
• language related
So, what is OpenType?
Okay, I’m going to go all old geezer on you for a minute.
You kids today have no freakin’ idea how easy you have it with fonts.
Back in the ’90s, Mac fonts only worked on a Mac, and Windows fonts only
worked on Windows. If they were PostScript fonts, you had two files to make up a
complete font, and had to remember to copy both of them and keep them
together. If you wanted extended language support in a PostScript font, you’d
have to switch fonts, because even eastern European accented characters, like
say Turkish, couldn’t fit in the same font file as Western European accented
characters… the PostScript fonts were limited to 256 encoded characters. There
were even different standard character sets for Mac fonts and Windows fonts, so
moving documents across plaoorms was especially dangerous.
Oh, and did I menYon that you had to install a system extension to even get your
operaYng system to scale the PostScript fonts on screen?
It was crazy.
OpenType took us away from all that.
Variable Fonts
Single file for a family (two for upright plus italic)
Base font style plus other master designs
“Deltas” to specify the other masters compactly
Can switch glyphs in design space
So, back to our topic of the day, variable fonts. These now use a single
file for a family of fonts, or two files if the family includes italic styles.
Each variable font involves two or more master designs. Now, just to be
clear, those master designs don’t have to be in the corners of the design
space. There just has to be one master somewhere on each side.
Besides advanced typographic superfamilies, variable fonts are simply a
lot smaller. We will have to get further down the implementation road to
know just how much smaller, and it will vary wildly by family and
depending on how many fonts you would have otherwise installed
separately. But as a totally ballpark figure, 70% is what the allies are
using.
What do we see?
Non-savvy environment?
• single default style? (.p)
• nothing? (.oo)
Savvy OS + regular app: default instances
Savvy OS + savvy app, or savvy browser:
• arbitrary instances
• UI? sliders or other access method
CSS 3
Can map some CSS features to VF axes
Weight: 9 values (100–900)
Width: 9 values (1–9)
CSS 4
Access full range of variable font values?
Support standard pre-named axes + arbitrary axes?
Will variable fonts
succeed?
So, will variable fonts succeed?
Yes, I think they will. Back in the early 90s there were more pressing
problems of language support that hadn’t been solved yet. That was
more pressing. Moreover, both GX and MM were backed primarily by just
one company, Apple and Adobe respectively. One tech was Mac-only,
and the other had no system-level support and almost no app support.
Now we have the relaunch of some old ideas, carefully integrated with
the existing OpenType standard. It’s been done by a consortium of major
players. Microsoft, Apple and Google represent all the major operating
systems. Adobe, Microsoft and Apple represent the biggest sources of
apps—and you could add Google on the mobile side. Google, Microsoft
and Apple give you an overwhelming majority of web browser share,
both mobile and desktop. It’s simply a matter of critical mass of support.
Part of this is motivation as well. I’ve already mentioned how 20 years
ago there were more pressing issues, that have been solved.
Articles/Resources
Introducing OpenType Variable Fonts

by John Hudson
Variable fonts, a new kind of font for flexible design 

by Tim Brown, Adobe
Introducing OpenType font variaHons 

by Behdad Esfahbod & Sascha Brawer, Google
Lesson of color fonts for variable fonts 

by Thomas Phinney
OpenType 1.8 specificaHon
FontLab announces support for variable fonts
Questions?
For better fonts.
hjp://www.fontlab.com/
@FontLab · hjp://blog.fontlab.com · thomas@fontlab.com
@ThomasPhinney · hjp://www.thomasphinney.com

Contenu connexe

En vedette

Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...
Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...
Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...WebVisions
 
How to TEDx [Presentation Design Tips] - #TED #TEDX
How to TEDx [Presentation Design Tips] - #TED #TEDXHow to TEDx [Presentation Design Tips] - #TED #TEDX
How to TEDx [Presentation Design Tips] - #TED #TEDXEmpowered Presentations
 
Activism x Technology
Activism x TechnologyActivism x Technology
Activism x TechnologyWebVisions
 
The Business of Social Media
The Business of Social Media The Business of Social Media
The Business of Social Media Dave Kerpen
 
The hottest analysis tools for startups
The hottest analysis tools for startupsThe hottest analysis tools for startups
The hottest analysis tools for startupsLiane Siebenhaar
 
10 Steps of Project Management in Digital Agencies
10 Steps of Project Management in Digital Agencies 10 Steps of Project Management in Digital Agencies
10 Steps of Project Management in Digital Agencies Alemsah Ozturk
 
Lost in Cultural Translation
Lost in Cultural TranslationLost in Cultural Translation
Lost in Cultural TranslationVanessa Vela
 
All About Beer
All About Beer All About Beer
All About Beer Ethos3
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerLuminary Labs
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging ChallengesAaron Irizarry
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 

En vedette (13)

Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...
Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...
Christian Titze, "Hello From the Other Side: Adapting the Agile Agency to Cli...
 
How to TEDx [Presentation Design Tips] - #TED #TEDX
How to TEDx [Presentation Design Tips] - #TED #TEDXHow to TEDx [Presentation Design Tips] - #TED #TEDX
How to TEDx [Presentation Design Tips] - #TED #TEDX
 
Activism x Technology
Activism x TechnologyActivism x Technology
Activism x Technology
 
The Business of Social Media
The Business of Social Media The Business of Social Media
The Business of Social Media
 
The hottest analysis tools for startups
The hottest analysis tools for startupsThe hottest analysis tools for startups
The hottest analysis tools for startups
 
10 Steps of Project Management in Digital Agencies
10 Steps of Project Management in Digital Agencies 10 Steps of Project Management in Digital Agencies
10 Steps of Project Management in Digital Agencies
 
Lost in Cultural Translation
Lost in Cultural TranslationLost in Cultural Translation
Lost in Cultural Translation
 
Flyer
FlyerFlyer
Flyer
 
All About Beer
All About Beer All About Beer
All About Beer
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 

Similaire à Thomas Phinney, “Fonts. Everything is Changing. Again.”

Webcast Presentation
Webcast PresentationWebcast Presentation
Webcast PresentationCOLINA
 
Typography - Understanding Font
Typography - Understanding FontTypography - Understanding Font
Typography - Understanding FontSabir Haque
 
Font file formats: TrueType (TTF), PostScript y OpenType (OTF)
Font file formats: TrueType (TTF), PostScript y OpenType (OTF)Font file formats: TrueType (TTF), PostScript y OpenType (OTF)
Font file formats: TrueType (TTF), PostScript y OpenType (OTF)David Fimia Zapata
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdfssusercc3ff71
 
Software for paper formatting
Software for paper formatting Software for paper formatting
Software for paper formatting salonibansal21
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalAshok Modi
 
Which programming language should you learn next?
Which programming language should you learn next? Which programming language should you learn next?
Which programming language should you learn next? Ganesh Samarthyam
 
Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014Me
 
Bay NET Aug 19 2009 presentation ppt
Bay  NET Aug 19 2009 presentation pptBay  NET Aug 19 2009 presentation ppt
Bay NET Aug 19 2009 presentation pptArt Scott
 
Adobe caslon pro readme
Adobe caslon pro readmeAdobe caslon pro readme
Adobe caslon pro readmeDenzel Leshay
 
Envisioning the Future of Language Workbenches
Envisioning the Future of Language WorkbenchesEnvisioning the Future of Language Workbenches
Envisioning the Future of Language WorkbenchesMarkus Voelter
 
Saw13 ch02-ppt
Saw13 ch02-pptSaw13 ch02-ppt
Saw13 ch02-pptCEPadgett
 

Similaire à Thomas Phinney, “Fonts. Everything is Changing. Again.” (20)

Webcast Presentation
Webcast PresentationWebcast Presentation
Webcast Presentation
 
Wide Open Faces
Wide Open FacesWide Open Faces
Wide Open Faces
 
Typography - Understanding Font
Typography - Understanding FontTypography - Understanding Font
Typography - Understanding Font
 
Font file formats: TrueType (TTF), PostScript y OpenType (OTF)
Font file formats: TrueType (TTF), PostScript y OpenType (OTF)Font file formats: TrueType (TTF), PostScript y OpenType (OTF)
Font file formats: TrueType (TTF), PostScript y OpenType (OTF)
 
Unit 2 graphics
Unit 2 graphicsUnit 2 graphics
Unit 2 graphics
 
Chap7
Chap7Chap7
Chap7
 
Multimedia chapter 2
Multimedia chapter 2Multimedia chapter 2
Multimedia chapter 2
 
Multimedia chapter 2
Multimedia chapter 2Multimedia chapter 2
Multimedia chapter 2
 
Intermediate Languages
Intermediate LanguagesIntermediate Languages
Intermediate Languages
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
Text
TextText
Text
 
Software for paper formatting
Software for paper formatting Software for paper formatting
Software for paper formatting
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for Drupal
 
Which programming language should you learn next?
Which programming language should you learn next? Which programming language should you learn next?
Which programming language should you learn next?
 
Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014
 
Bay NET Aug 19 2009 presentation ppt
Bay  NET Aug 19 2009 presentation pptBay  NET Aug 19 2009 presentation ppt
Bay NET Aug 19 2009 presentation ppt
 
About programming languages
About programming languagesAbout programming languages
About programming languages
 
Adobe caslon pro readme
Adobe caslon pro readmeAdobe caslon pro readme
Adobe caslon pro readme
 
Envisioning the Future of Language Workbenches
Envisioning the Future of Language WorkbenchesEnvisioning the Future of Language Workbenches
Envisioning the Future of Language Workbenches
 
Saw13 ch02-ppt
Saw13 ch02-pptSaw13 ch02-ppt
Saw13 ch02-ppt
 

Plus de WebVisions

The Importance of Side Projects
The Importance of Side ProjectsThe Importance of Side Projects
The Importance of Side ProjectsWebVisions
 
Commit to the Crazy
Commit to the CrazyCommit to the Crazy
Commit to the CrazyWebVisions
 
Intuition and Reason in Design
Intuition and Reason in DesignIntuition and Reason in Design
Intuition and Reason in DesignWebVisions
 
Data and Algorithmic Bias in the Web
Data and Algorithmic Bias in the WebData and Algorithmic Bias in the Web
Data and Algorithmic Bias in the WebWebVisions
 
Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"
Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"
Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"WebVisions
 
Mark Wyner, "A New Dawn of the Human Experience"
Mark Wyner, "A New Dawn of the Human Experience"Mark Wyner, "A New Dawn of the Human Experience"
Mark Wyner, "A New Dawn of the Human Experience"WebVisions
 
Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"
Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"
Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"WebVisions
 
Art + Commerce
Art + CommerceArt + Commerce
Art + CommerceWebVisions
 
Users are People Too
Users are People TooUsers are People Too
Users are People TooWebVisions
 
Happily Ever After: Pain-Free Prioritization
Happily Ever After: Pain-Free PrioritizationHappily Ever After: Pain-Free Prioritization
Happily Ever After: Pain-Free PrioritizationWebVisions
 
Taming Context in the Internet of Things
Taming Context in the Internet of ThingsTaming Context in the Internet of Things
Taming Context in the Internet of ThingsWebVisions
 
Mind Melds and BattleBots: Creating the Right Kind of Designer/Developer Dynamic
Mind Melds and BattleBots: Creating the Right Kind of Designer/Developer DynamicMind Melds and BattleBots: Creating the Right Kind of Designer/Developer Dynamic
Mind Melds and BattleBots: Creating the Right Kind of Designer/Developer DynamicWebVisions
 
Poetry for Robots: A Digital Humanities Experiment
Poetry for Robots: A Digital Humanities ExperimentPoetry for Robots: A Digital Humanities Experiment
Poetry for Robots: A Digital Humanities ExperimentWebVisions
 
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"WebVisions
 
Robert Stulle, "Stories From the Agile Agency"
Robert Stulle, "Stories From the Agile Agency"Robert Stulle, "Stories From the Agile Agency"
Robert Stulle, "Stories From the Agile Agency"WebVisions
 
Mona Patel, "Excuses, Excuses, Excuse Personas"
Mona Patel, "Excuses, Excuses, Excuse Personas"Mona Patel, "Excuses, Excuses, Excuse Personas"
Mona Patel, "Excuses, Excuses, Excuse Personas"WebVisions
 
"Burn Down the Blocks! Sparking Collaboration Through Creative Play"
"Burn Down the Blocks! Sparking Collaboration Through Creative Play""Burn Down the Blocks! Sparking Collaboration Through Creative Play"
"Burn Down the Blocks! Sparking Collaboration Through Creative Play"WebVisions
 
Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"
Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"
Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"WebVisions
 
Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...
Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...
Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...WebVisions
 
Stephanie Sansoucie, "Future of Omnichannel Immersion"
Stephanie Sansoucie, "Future of Omnichannel Immersion"Stephanie Sansoucie, "Future of Omnichannel Immersion"
Stephanie Sansoucie, "Future of Omnichannel Immersion"WebVisions
 

Plus de WebVisions (20)

The Importance of Side Projects
The Importance of Side ProjectsThe Importance of Side Projects
The Importance of Side Projects
 
Commit to the Crazy
Commit to the CrazyCommit to the Crazy
Commit to the Crazy
 
Intuition and Reason in Design
Intuition and Reason in DesignIntuition and Reason in Design
Intuition and Reason in Design
 
Data and Algorithmic Bias in the Web
Data and Algorithmic Bias in the WebData and Algorithmic Bias in the Web
Data and Algorithmic Bias in the Web
 
Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"
Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"
Mike Monteiro, "This is the Golden Age of Design...and We're Screwed"
 
Mark Wyner, "A New Dawn of the Human Experience"
Mark Wyner, "A New Dawn of the Human Experience"Mark Wyner, "A New Dawn of the Human Experience"
Mark Wyner, "A New Dawn of the Human Experience"
 
Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"
Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"
Kevin Hoyt, "On the Verge of Genius: Smart Cities Workshop"
 
Art + Commerce
Art + CommerceArt + Commerce
Art + Commerce
 
Users are People Too
Users are People TooUsers are People Too
Users are People Too
 
Happily Ever After: Pain-Free Prioritization
Happily Ever After: Pain-Free PrioritizationHappily Ever After: Pain-Free Prioritization
Happily Ever After: Pain-Free Prioritization
 
Taming Context in the Internet of Things
Taming Context in the Internet of ThingsTaming Context in the Internet of Things
Taming Context in the Internet of Things
 
Mind Melds and BattleBots: Creating the Right Kind of Designer/Developer Dynamic
Mind Melds and BattleBots: Creating the Right Kind of Designer/Developer DynamicMind Melds and BattleBots: Creating the Right Kind of Designer/Developer Dynamic
Mind Melds and BattleBots: Creating the Right Kind of Designer/Developer Dynamic
 
Poetry for Robots: A Digital Humanities Experiment
Poetry for Robots: A Digital Humanities ExperimentPoetry for Robots: A Digital Humanities Experiment
Poetry for Robots: A Digital Humanities Experiment
 
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
Kent Nichols, "Downshifting Your Life to Rev Up Your Creativity"
 
Robert Stulle, "Stories From the Agile Agency"
Robert Stulle, "Stories From the Agile Agency"Robert Stulle, "Stories From the Agile Agency"
Robert Stulle, "Stories From the Agile Agency"
 
Mona Patel, "Excuses, Excuses, Excuse Personas"
Mona Patel, "Excuses, Excuses, Excuse Personas"Mona Patel, "Excuses, Excuses, Excuse Personas"
Mona Patel, "Excuses, Excuses, Excuse Personas"
 
"Burn Down the Blocks! Sparking Collaboration Through Creative Play"
"Burn Down the Blocks! Sparking Collaboration Through Creative Play""Burn Down the Blocks! Sparking Collaboration Through Creative Play"
"Burn Down the Blocks! Sparking Collaboration Through Creative Play"
 
Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"
Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"
Jesse Lozano, "The Future of Manufacturing – a Desktop Sized Revolution?"
 
Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...
Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...
Matthew Thomas Maloney, "Digital Diegesis: Multi-platform Story-World Develop...
 
Stephanie Sansoucie, "Future of Omnichannel Immersion"
Stephanie Sansoucie, "Future of Omnichannel Immersion"Stephanie Sansoucie, "Future of Omnichannel Immersion"
Stephanie Sansoucie, "Future of Omnichannel Immersion"
 

Dernier

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 

Dernier (19)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 

Thomas Phinney, “Fonts. Everything is Changing. Again.”

  • 1. Variable Fonts What just happened? 23 September 2016 · Thomas Phinney · fontlab.com · @FontLab · thomasphinney.com · @ThomasPhinney · Hi, I’m Thomas Phinney. My story in brief is, I’m a font geek. My background: Adobe (product manager for fonts & global typography) … Extensis (PM for web fonts and font mgmt) … FontLab (President) By way of background, let me briefly mention what has happened over the last couple of years with color fonts: several different vendors thought we needed a way of doing multi-color fonts for things like emoji. So we got four different solutions. All four of them are in the latest OpenType spec. Adoption just may not have been the fastest, although the latest version of Windows 10 supports all four formats. I don’t think this background is entirely coincidental to last week’s announcement:
  • 2. photo by Thomas Phinney Obviously this was not a good outcome. So, since last January, a quiet cabal of font geeks and engineers, first from the four companies began meeting and plotting the next big thing. photo by Thomas Phinney These are photos I took at the next-to-last meeting, which took place during TypeCon in Seattle last month.
  • 3. Behdad Esfahbod GOOGLE Peter Constable MICROSOFT Ned Hadley APPLE David Lemon ADOBE photo by Alessia Mazzarella Here is the Q&A from the announcement, with the speakers all hanging out as friendly colleagues. Which, by the way, is how they acted in the behind the scenes meetings leading up to the announcement. Just a bunch of font geeks and engineers working together. No more fragmentation. Now, I need to help you understand this: in the font world, we’d never had a major new development involving more than two big companies.
 Pretty amazing stuff to me. On a hunch, I checked the weather for that day.
  • 4. (OT Font Variations) Variable Fonts OK, so that was interesting. What is this all about, anyway? The formal label for the tech is OpenType font variations, or variable fonts for short. Variable fonts are essentially an updating of Apple’s GX Variations tech from the early 90s, which is functionally a superset of Adobe’s multiple master technology of the same vintage.
  • 5. Two Key Things Compression for the whole family (70%?) Design axes (hence the “variable” / “variaYons”) Design Axes The idea is that you can have different font designs and interpolate or blend between them to get a near-infinite range of gradations, called “instances.” Each area of variation is called an AXIS. A variable font may have just one axis, or several. Weight and width are the most common axes. From a design perspective, what’s exciting is that you can get not just some small number of specific values, but any degree in between.
  • 6. Design Space 2 Figure 1 A multiple master design matrix is established by the design axes integrated into the typeface. Shown here is Myriad’s two-dimensional matrix comprised of weight and width axes, and a small sampling of the possible font variations that can be custom- generated within it. For furth er tech n ical in form ation , please refer to Adobe’s tech n ical n ote #5015 Adobe Type 1 Font Format Supplement. Definition of Terms Defin ition s for several key term s used in th is docum en t are listed below. For a com plete glossary of defin ition s, see Appen dix B. Multiple master technology An en h an cem en t of Type 1 fon t tech n ology in corporatin g on -dem an d in terpolation in to a fon t program . Multiple master typeface A super-typeface—a very large fam ily of related styles with in a sin gle Type 1 fon t program . Each m ultiple m aster typeface con tain s all th e in form ation n ecessary to gen erate h un dreds of style variation s as in dividual fon ts, or instances. NOTE: In this document, the term typeface is not interchangeable with fon t. Extended Condensed Light BlackW eight Width The range of possible designs is called a “design space” So with a single axis font, you can visualize the design space or range of possible instances as a simple line.
  • 7. For a two-axis font, it’s a flat space, perhaps a square. With three axes you get a 3-d space such as a cube.
  • 8. This is an attempt to visualize a 4-axis design space, which would make a hypercube. But there is no real limit, you can have as many axes as you want! Well, OK, I think maybe there would be a 64K limit. But 64K should be enough for anyone.
  • 9. DEMO OpenType History 1996: Format announced by Adobe & Microso^ 1998: Dropped MulYple Master (was only OT-CFF) 2000: First significant numbers of fonts by 2006: Replaced PS Type 1 for new fonts Now in sync with open ISO standard, OFF Here’s some OpenType history. Basically it’s been at least a decade since most vendors started making their new fonts primarily in OpenType. I think the other key thing is that OpenType is now an open standard. Or technically, there is an open font standard, the Open Font Format or O.F.F., that OpenType is kept in sync with. So now many aspects of OpenType development are done in public. This doesn’t mean backroom discussions are unimportant, nor does it stop vendors from going off and doing their own things privately—as we’ve seen in the past couple of years, with four competing ways of doing color fonts—all of which are now enshrined in the OpenType spec. The latest version of Windows 10 actually supports all four. It’s kinda cray-cray.
  • 10. Multiple Master fonts Adobe extension to PostScript Type 1 format (1991) Special flavor of PS Type 1 font files (Mac & Win) Allowed axis-based designs Briefly allowed for OpenType CFF (only) • Dropped from OpenType spec in 1998 Adobe converted old MM fonts to OT by 2002–03 Gradually deprecated and reduced support Apple’s GX/AAT GX Typography (1991) Rebranded Apple Advanced Typography (OS X) Smart font format (like OpenType) • Smart fonts almost enYrely Apple system fonts Offers opYonal axis-based fonts (like MM) • Lijle tracYon / 3rd-party support
  • 11. OpenType Microso^ + Adobe (later open as Open Font Format) Compare vs PostScript Type 1 & TrueType Single-file, cross-pla6orm fonts OpYonal more language support OpYonal “smart font” features • typographic • language related So, what is OpenType? Okay, I’m going to go all old geezer on you for a minute. You kids today have no freakin’ idea how easy you have it with fonts. Back in the ’90s, Mac fonts only worked on a Mac, and Windows fonts only worked on Windows. If they were PostScript fonts, you had two files to make up a complete font, and had to remember to copy both of them and keep them together. If you wanted extended language support in a PostScript font, you’d have to switch fonts, because even eastern European accented characters, like say Turkish, couldn’t fit in the same font file as Western European accented characters… the PostScript fonts were limited to 256 encoded characters. There were even different standard character sets for Mac fonts and Windows fonts, so moving documents across plaoorms was especially dangerous. Oh, and did I menYon that you had to install a system extension to even get your operaYng system to scale the PostScript fonts on screen? It was crazy. OpenType took us away from all that. Variable Fonts Single file for a family (two for upright plus italic) Base font style plus other master designs “Deltas” to specify the other masters compactly Can switch glyphs in design space So, back to our topic of the day, variable fonts. These now use a single file for a family of fonts, or two files if the family includes italic styles. Each variable font involves two or more master designs. Now, just to be clear, those master designs don’t have to be in the corners of the design space. There just has to be one master somewhere on each side. Besides advanced typographic superfamilies, variable fonts are simply a lot smaller. We will have to get further down the implementation road to know just how much smaller, and it will vary wildly by family and depending on how many fonts you would have otherwise installed separately. But as a totally ballpark figure, 70% is what the allies are using.
  • 12. What do we see? Non-savvy environment? • single default style? (.p) • nothing? (.oo) Savvy OS + regular app: default instances Savvy OS + savvy app, or savvy browser: • arbitrary instances • UI? sliders or other access method CSS 3 Can map some CSS features to VF axes Weight: 9 values (100–900) Width: 9 values (1–9)
  • 13. CSS 4 Access full range of variable font values? Support standard pre-named axes + arbitrary axes? Will variable fonts succeed? So, will variable fonts succeed? Yes, I think they will. Back in the early 90s there were more pressing problems of language support that hadn’t been solved yet. That was more pressing. Moreover, both GX and MM were backed primarily by just one company, Apple and Adobe respectively. One tech was Mac-only, and the other had no system-level support and almost no app support. Now we have the relaunch of some old ideas, carefully integrated with the existing OpenType standard. It’s been done by a consortium of major players. Microsoft, Apple and Google represent all the major operating systems. Adobe, Microsoft and Apple represent the biggest sources of apps—and you could add Google on the mobile side. Google, Microsoft and Apple give you an overwhelming majority of web browser share, both mobile and desktop. It’s simply a matter of critical mass of support. Part of this is motivation as well. I’ve already mentioned how 20 years ago there were more pressing issues, that have been solved.
  • 14. Articles/Resources Introducing OpenType Variable Fonts
 by John Hudson Variable fonts, a new kind of font for flexible design 
 by Tim Brown, Adobe Introducing OpenType font variaHons 
 by Behdad Esfahbod & Sascha Brawer, Google Lesson of color fonts for variable fonts 
 by Thomas Phinney OpenType 1.8 specificaHon FontLab announces support for variable fonts Questions?
  • 15. For better fonts. hjp://www.fontlab.com/ @FontLab · hjp://blog.fontlab.com · thomas@fontlab.com @ThomasPhinney · hjp://www.thomasphinney.com