SVG glyphs in OpenType: adding color and animation to fonts

DavidL's picture

So far the SVG OpenType project has been discussed only on email lists dedicated to specifications. I wanted to bring it up on Typophile since it will feature in discussions at TypeCon next week.

For a couple of years now Adobe has been working with Mozilla and others in a W3C community group to work out details around a proposal to extend OpenType with an optional ‘SVG ‘ table to allow for SVG-quality glyph descriptions, including color gradients and animation. The main use cases are creative titling and similar display uses, as well as emoji. Mozilla has had an implementation of the 'SVG ' table in Firefox for a year now, and we're currently all working on putting together an official draft for the font standard, getting the tooling in order, and sharing our ideas for these kind of richly expressive fonts.

Microsoft recently announced a color font implementation http://typophile.com/node/104174, which has brought the larger discussion about color fonts to the fore again. Everything Microsoft has included is clearly a step in the right direction. Our interest in SVG (which offers a superset of the features in the Microsoft implementation) is based on the belief that while flat color areas are good, other features of SVG are also valuable. In particular, gradations and animation add significantly to the expressive potential of graphic images. And while all the current color font implementations (unofficial bitmap formats from both Apple and Google, and now Microsoft’s outlines) appear to be driven largely by the desire to support emoji, the potential uses are much broader. We believe that when extending the OpenType format it’s important to look beyond the immediate use case and to build for the future. Now is the time to make sure we’re enabling what’s needed in the next decade.

Some existing bitmapped emoji designs already use gradations and animation to help communicate the icons’ meaning in the small space allotted. Adobe did some design explorations with emoji a couple years ago, but more recently we’ve been thinking about the benefit gradations and animation would bring to letterforms. My team is putting together a few examples to hint at the kind of opportunities this would bring, and I’m sure many designers on Typophile will come up with others we haven’t even thought of. We hope to have a handful of things to demonstrate at TypeCon next week, and will post links to samples in this thread as well. You can see some initial examples of animated emoji explorations at http://www.adobe.com/devnet-apps/type/EmojiGradient.html.

If you’re curious for additional details in the meantime, Caleb Belohlavek, Adobe’s product manager for type, has sent out a list of requirements and a value proposition: http://lists.w3.org/Archives/Public/public-svgopentype/2013Jul/0004.html.

thanks,
David L

Sairus Patel's picture

For those who don’t know me, I’m the Core Type Technology and OFF/OpenType spec lead at Adobe. I look forward to meeting many of you next week at TypeCon and pondering where these various moves to incorporate color and/or animation could take – and have taken! – the type and design communities.

If you’d like to see SVG OT in action in Firefox right now, follow the instructions below. Then go to http://people.mozilla.org/~jkew/opentype-svg/GeckoEmoji.html and you should see the emoji spring to color life. Note that these colored glyphs are specified in the ‘SVG ’ table in the OT font embedded on that web page and that what you’re seeing is Firefox’s implementation of this OT spec extension in action.

  • Firefox v24 and up (download at http://nightly.mozilla.org if needed).
  • Type about:config in the address bar to bring up Firefox's config prefs.
  • Narrow the prefs by searching for ‘svg’. Then change the values of gfx.font_rendering.opentype_svg.enabled to true and svg.display-lists.painting.enabled to false (the latter may not be needed after a particular bug is fixed).

The latest technical spec for SVG OT is at the bottom of http://lists.w3.org/Archives/Public/public-svgopentype/2013Jul/0003.html in case you’re interested.

Best,
Sairus

dberlow's picture

"In particular, gradations and animation add significantly to the expressive potential of graphic images."

...but these are fonts, not "graphic images". ;) In any case, is there a scaleable version of the demo at ".../type/EmojiGradient.html."?

DavidL's picture

@Emanual All type is graphic, and typography is about visual communication. The emoji (from the earlier experiment mentioned above) are scalable outline images, that use gradations & animation. As noted earlier, we'll get some more typographic images up shortly. The point of the site is to demonstrate that gradations and animation are useful in some font contexts, so it's a very simple site - no end-user scaling offered at this time.
thanks,
David L

John Hudson's picture

no end-user scaling offered at this time.

Other than that provided by browsers, I presume you mean.

to demonstrate that gradations and animation are useful in some font contexts

Hmm. Fonts have been, since Gutenberg, a convenient format in which to store some kinds of little graphics to be published in the same medium as text; hence renaissance ornament fonts, 19th Century cartoon slugs, etc.. What you really seem to be saying, David, is that you want fonts to be convenient for other kinds of little graphics, such as those with gradations and animation. This seems to be quite different from saying that these things are useful in some font contexts: rather, you want to make fonts useful for these things. The trouble I have with the whole notion of graphics in fonts is that, in fact, digital fonts are much less convenient as storage mechanisms for any kinds of non-text graphics than old trays of metal used to be; this is because accessing sorts in digital fonts relies on character encoding and text processing. So when people want to display little graphics with digital fonts, they first need to encode those little graphics as if they are text. This leads inevitably to either a bunch of stuff in fonts that is not reliably interchangeable in documents, or to pressure on text encoding standards to accept little graphics into their character sets.

Personally, I'd like to see little graphics given their own interchange architecture, suited to their characteristics, rather than bolting them into fonts and then determining that font formats are lacking if they don't support dancing penguins. But I understand that this would be more work than adding yet another outline format table to OFF.

_____

PS. I also take issue with the idea that 'typography is about visual communication'. Typography is about textual communication; it's communicative content is massively linguistic.

dberlow's picture

Speaking of massively linguistic, I was asked to make a type that wrote itself. Any folks done this know, when time is part of typography, as opposed to penguins, the expected behaviors are not so simple to achieve. Unicode, for example, while containing an unclear number of strokes, (like a "sans 'I' has just one!'), has no information about how much time each stroke takes, nor the time there is between, if there is any, or relates some time to the word space. 1 entire unicode font that drew itself would take one of the younger of us the rest of our life to figure out the timing of. Should that deter the standard, I'd not be surprised;)

But the alternative, storing the definitive drawing of a letter in the application that makes the animation, and copying that every time one needs the letter drawn, is not going to work, like it did for us back in 1994.

The relation of the glyph's contours to the clock are only one aspect of type time. So, where is the time table?

I would also like to say...from
http://lists.w3.org/Archives/Public/public-svgopentype/2013Jul/0004.html.

The analogy to surgery in this link is inappropriate. It is indicative of the attitude towards the OT format — designed, like a human chest, not to be cracked open at all.

Adobe wants to get it over with once? and for decade! time, size, gvar, cvar, fvar, krn2!, "improvement" to OS/2 width and weight, and the new MS color tables should do all you need.

And someone! please show how color gradations are going to scale in low resolution Cleartype.

dezcom's picture

I guess what I can't see is what good it will do compared to the harm? When animated GIFs first appeared, they drove me nuts. Everything was blinking and popping in DayGlo colors. I was so distracted that I could not read anything. I will be curious to see the presentation at TypeCon. Right now, I am still in WTF? mode.

DavidL's picture

@John Hudson I agree putting unencoded images into fonts is of questionable utility. While there's been no shortage of dingbat fonts, that's not inherently what I'd envision. The emoji on the sample page, and the other samples we hope to post soon, are all Unicode characters.

And while typography is certainly linguistic, it's also massively visual. You're the one reading this, not your computer, unless you're using a screen reader (in which case the font choice, line layout etc. are not having their intended effect).

thanks,
David L

John Hudson's picture

The emoji on the sample page, and the other samples we hope to post soon, are all Unicode characters.

Right, but that's because of pressure to handle those little pictures in the existing text encoding and interchange architecture, including pressure to be able to handle them in fonts, in the absence of a dedicated Little Picture Encoding and Interchange architecture.

And while typography is certainly linguistic, it's also massively visual.

But we were talking about communication, and the communicative content of typography is massively linguistic. The visual aspect of typography is simply the nature of writing as a visual representation of language, and what type communicates visually independent of that linguistic content -- the ideas conveyed by the particular visual representation of the text -- is mostly superficial and crude, expressible in simplistic adjectival terms: 'elegant', 'clear', 'friendly', 'grunge', etc.. That seems to me barely communicative.

It's a first-year design school adage that typography exists to serve text, one implication of which is that font formats exist to serve text too. Colour, gradations and animations only need to become part of the font format because things are being treated as text that were not previously treated as text. And I understand and accept this need -- somewhat grudgingly, it is true, but then I was one of the people who made the case against the encoding of emoji in Unicode --, but I think we should be clear about why we're now looking at things like SVG in OpenType and other mechanisms. It isn't because there is a use for such things in fonts or typography, but because we're trying to make fonts useful for pseudo-textual content that includes things that no one ever considered text before. I think it is important to be clear about this, because that's the only way we can understand and anticipate the pressures that may result in further expansions of our concept of what constitutes 'text'. Simply defining text as 'anything encoded in Unicode' is begging the question, because one of the things at issue is what should be encoded in Unicode.

dezcom's picture

"It isn't because there is a use for such things in fonts or typography, but because we're trying to make fonts useful for pseudo-textual content that includes things that no one ever considered text before. I think it is important to be clear about this, because that's the only way we can understand and anticipate the pressures that may result in further expansions of our concept of what constitutes 'text'. Simply defining text as 'anything encoded in Unicode' is begging the question, because one of the things at issue is what should be encoded in Unicode."

Bravo! Well said, John!

A picture "may" be worth 1000 words but 1000 pictures do not replace a word.

DavidL's picture

@ John Hudson I remember your opposition to adding emoji to Unicode. I'm still a bit surprised, because what you're dismissing as not linguistic or textual is a set of symbols that communicate well-understood meanings. Language is not just what is spoken, but what is communicated, and has had a visual dimension from the beginning. Emoji are simply one mechanism for restoring a bit of the bandwidth that is lost when language is reduced to written text.

As for graphic communication being crude compared to written text, I think that's true in some cases and not others; it depends largely on the purpose of the communication. People are paying far more to fine-tune the appearance of ads than to fine-tune their text.

I am also surprised at what seems to be a concern about the potential of expanding what "text" constitutes. Nobody's forcing anyone else to use emoji or other more expressive attributes of type, but the world sees a need for them. As you know, communication is enhanced when it incorporates standardized systems (such as Unicode and SVG).

thanks,
David L

John Hudson's picture

I didn't say that graphic communication was crude compared to written text, I said that what typography communicates independent of the linguistic content of the text is crude in comparison. My point is that typography is a technology that developed around the massively linguistic communicative content of text, and changing that technology to accommodate non-textual content should be done with eyes wide open and not passed as somehow just business as usual.

Please, please, note that I am not opposed to SVG in OT and related proposals, and I am not concerned about expanding notions of text. I am saying that we should try to be clear in our understanding of what is happening and what it means, and I found some of the initial statements in this thread a bit woolly. 'Visual communication' is a red flag phrase for me, because no one has ever been able to explain to me exactly what it is or how it works.

Si_Daniels's picture

>'Visual communication' is a red flag phrase for me, because no one has ever been able to explain to me exactly what it is or how it works.

It can't be explained. It has to be communicated visually! ;-)

dezcom's picture

I have been a Visual Communication Designer for over 50 years. If I want to tint and fade and color and slant and spin type, I know how. The trick is not overdoing it. Turning text into an amusement park snowcone is not visual communication. Visual communication involves the skill to know when and how is needed to communicate. Tools are tools for professionals. Don't make it so easy for amateurs to get gaudy.

John Hudson's picture

Nice one, Si.

dberlow's picture

John, "..because of pressure to handle those little pictures in the existing text encoding and interchange architecture, including pressure to be able to handle them in fonts,"

Yeah, but that seems to be done deal.

Little pictures now must be in MS font software, and (for every OT quadratic action, there is an unequal though non-opposite OT cubic reaction) Adobe font software.

The idea was to slip something useful under cover of Emoji Wars, but now, sigh, it's on to the philosophy of Glyph Wars.

Sairus Patel's picture

Are these proposed font spec extensions specific to – or mostly useful just for – emoji? I think that’s a question I’m hearing in some of the discussion above.

The answer, in my opinion, is a clear No. All the examples on http://www.photolettering.com are of Latin text. That website was one of the major inspirations behind the SVG OT project’s “color-by-numbers” or color palettes facility (as discussed a full year ago on svgopentype).

The potential uses of color, gradients, or animation in fonts are much larger than just for emoji.

Yes, we must continue to wrestle with questions of “what really constitutes text.” These questions are not new to OpenType. For example:

  • I have a sense that predictability or repeatability is a core property of text. However, OpenType’s contextual alternates, CFF’s random operator, and the tricks one can play with TT hinting – e.g. a three morphs into what looks like a four at a certain ppem – may push the limits of one’s comfortable understanding of the predictable display of text.
  • I can’t make up my mind what pummels my concept of text more: the encoding of symbols in Unicode (e.g. Zapf Dingbats, emoji), or the use of Unicode’s Private Use Area in fonts, e.g. as blessed by MS’ cmap symbol encoding. And on the OFF list it has even been suggested that since all car dashboard symbols have already been standardized, getting them into Unicode should be a trivial task. While I’m not involved in Unicode standardization efforts, I would probably strongly question any effort to significantly extend OpenType primarily for the benefit of symbols or icons, whether they were blessed by Unicode or not.
DavidL's picture

The samples that I promised are now available; you can view them at http://www.adobe.com/devnet-apps/type/svgopentype.html. This is all still very much proof-of-concept material, simply intended to indicate some non-emoji uses. Caveat: While the actual SVG material works fine in IE, there seems to be an issue in the HTML wrapper that kills the animation on that browser, at least in some cases. We're trying to figure it out. In the mean time, if it doesn't work in your IE installation, you'll have to view in a different browser.
thanks,
David L

dberlow's picture

:) ...

Theunis de Jong's picture

Nice concept showcase -- and it works on my iPad!

Karl Stange's picture

They work on my iPhone but I feel like I have just been rudely returned to the 90s. This really does not feel like moving forwards for either fonts or animation but I am intrigued to see how it develops.

dberlow's picture

No scale yet, though.

"...– e.g. a three morphs into what looks like a four at a certain ppem..."

Are you Sairus?

You really need a time table and a size table if the unicode of a glyph is going to vary, by size. Here, (https://vimeo.com/72744590), it's varying by time.

Watching this combinatorial implosion is going to be painful. As more stuff is added for narrow requirements, less becomes broadly possible.

Sairus Patel's picture

Emanual, my "three morphs into what looks like a four at a certain ppem" example was simply to show that visual tricks could be done using existing TT technology. It was not meant to be a use case for the color/animated font solutions.

dberlow's picture

Sairus: "It was not meant to be a use case for the color/animated font solutions."

If you say so. But what if that's what people want to use animation for? What would you suggest type developers do with a glyph that covers a range of unicode values over time (as I show in the video), or a range of unicode values in space as you suggest?

John Hudson's picture

The answer to that question depends on how the animation is triggered. I think we have to take it as read that character encoding drives glyph display, and not the other way round. Introducing animation is unlikely to turn this on its head. So I see a couple of different options for animating something like a countdown, as shown in David's video:

1. A single glyph level animation representing a single 'countdown) character (probably PUA, possibly culminating in an explosion or rocket launch animation) ;

2. Multiple glyph level animations, one for each numeral transform, responding to a multiple digit character countdown driven by software; i.e. the software counts down, changing the digit Unicode at each step, and the font provides a different glyph animation for each digit (coordinating the timing of the character changes and the animations will be the tricky bit).

dberlow's picture

John, " So I see a couple of different options for animating something like a countdown, as shown in David's video:"

I know how to animate it... I want to store it. "It" being a discrete place or range in an otherwise indiscrete range. In that place is a "something" the user needs to know.

"1...."
Forgetting about PUA, and this 1995 demo video, or probablies — Any unicode glyph, via animation, can become any other(s). Store it how?

"2...."

John, I think you'd agree then, coordinating the timing in animation, is pretty much, animation.

So, if there is anything in the animated font that crosses any bound as defined by the current format the font is within, (and the user needs to know where), then shouldn't the format know how to store it?

With only Adam talking of sourcing all this, bless his heart, we're all pretty busy I'm sure, but one more question?

If we are talking about fonts for the next decade, size 'n time tables for all, or not, don't things that are scaleable, rotatable, skew-enabled and responsive in the way outlines are, need a separate format from bitmaps?

I see why this neandering font format society persists at apple and on the web. Can't they take what they need 'n make the best gosh darn OBFF on planet earth, including links to OFFs, and leave the future of OFF without bitmaps, but with links to them, so OFF can see it's responsive responsibilities more clearly, which clearly it hasn't and don't at this time.

Part of that, of course, is in the standards process, where it is the biggest pile of fonts that stops the progress. This time, perhaps it should be the fastest pile that the progress stops at, instead... just for variety ;)

Syndicate content Syndicate content