Transcription
[Music]
Audience: [Applause]
Yves Peters: Hi. This is your little excursion into typography. All right, I’m not a native speaker, so I might mispronounce English words, but I know how to write them.
Who is using Illustrator? Okay. Who is using PhotoShop? Who is frustrated by how you can access certain type things in Illustrator and PhotoShop? Yeah, well, it gets better. Don’t worry about it.
Oh, this is not working now. Oh, this is bad. Okay.
Male: (Indiscernible)
Yves: It was working when I tested it earlier. Hold on. That’s because, yeah, it wasn’t on the PDF.
All right, so my bio says I try to be critical about type without coming across as a snob. I do not design type, I do not sell type, but I write about it. Right now, I work for Type Network, which is a conglomerate of independent foundries. We have now 20. We doubled in our first year. We offer quality typefaces from a diverse amount of foundries from Russia all the way to the States with stops in Barcelona, Germany, and so on.
I have my little place there that’s the news, the blog. The fact that I write about type, I started to realize a while ago is that, because I was raised by two teachers, that defined what I do in life. I want to give knowledge to our people and try it. I’m kind of like an evangelist for typography. My most popular series is Screen Fonts about movie posters. That was my talk at the very first Beyond Tellerrand.
But, another effect from being raised by two teachers is, I try to be an activist. I try to make things better. This happened in Barcelona, ATypI, which is an annual conference for all the type people. There was this talk about the current state of fonts, the OpenType fonts. I don’t know how many of you are aware of OpenType fonts. These are like if you compare old fonts with OpenType fonts, it’s like looking at an old VHS and then the Blu-ray. It’s an incredible advancement in technology. Unfortunately, the support and especially the user interface in almost any software is very, very bad. It didn’t evolve at all in the 15 years since OpenType was launched.
There was this talk. That was me getting up, literally getting off my ass to try to improve something. If you want to improve something, get off your ass and ask questions, engage in conversation with the people responsible, and try to improve things.
Audience: [Laughter]
Yves: What happened is one of the people on the panel at the conference was Nadine Chahine. She said, “You know what? Let’s start an open letter, and let’s talk to Adobe because they kind of like are the biggest player in the field.” We found support from ILoveTypography.com. This is a very influence typography website. We started this whole thing with an open letter and then asking for signatures. Finally, I wrote an article explaining why it was necessary that we improve the UI between humans and type on the computer.
Of course, this made me think about where do we come from and how do we actually interact with language because what you all do is write text. If it’s code, if it’s visible on the website, we communicate through text. It’s the most important way of spreading knowledge.
How do we interact with the written language? There are three things: calligraphy, lettering, typography. Calligraphy is what they were doing in the Middle Ages. When they wanted to issue a book, you had to write it by hand. What is important there is that, as you are trying to get content on a page, there’s a direct relationship between how you think, what you do with your hand, and getting the stuff visible. In that relationship, you create your own letterforms. Lettering is different because it’s not writing; it’s drawing. But, still, you create your own letterforms. There’s a big difference with typography.
Now, there are many definitions for typography. The one I like most is the most elegant. It is the shortest. It’s, typography is writing with prefabricated letters. It is still writing, but the letters have been made for you, so you don’t have to make them yourself. Somebody else made the letters, and you can use them to get content on a page.
How do we interact with these pieces of alphabets that somebody else made? Forget your history class. Johannes Gutenberg is not the inventor of movable type. We have to go back the 11th Century where it was invented in China, the first movable type. Then a little later it was in Korea, the first metal type. Then in China, again, the first movable wooden type.
This is the first recorded example of how we can see how people interacted with type. Those letters were put on this big rotating table, and you just could look at what you had, actually take what you needed, and use it to compose type. We have to wait 400 years after the actual invention of movable type that Johannes Gutenberg comes into play.
Why is he important? Because he modernized the process. He made it more fluid, more efficient. He improved the printing presses. But, what interests us is this little section of his workshop.
What you see is a person taking letters from a box that looks like this. The original way to interact with the type--this is a schematic of a letterbox--is that you think of a letter. I want a capital A. What you do is you look for it. You have this big box. You find it, so you take it, and then you compose it. There is a direct connection between what your brain thinks, what you see, what you take, and the result.
If you take a less common glyph, this fi ligature, you still can see it in that box. You still can take it with your hand and compose it. That’s very important.
Then, for 400 years, almost nothing happened until the 1860s where this was invented, the type machine. The type machine is not really for typesetting. It was more for the office environment to be able to create office correspondence and so in a faster, more efficient way.
There was the first important shift in paradigm because what you see on the keyboard would be the capital A. You press the capital A, but you get a lower case a. Actually, you have to shift your expectations and not really go for what you see, but what you know will be there. You want the capital A. You know you have to do the shift and the A, and then you have the capital A. It may seem like nothing, but that was the most important shift in how we interact with typography.
Then, of course, after the typewriter was invented, they tried to automate the professional setting for newspapers, books, and so on because taking letters took too much time. They wanted to have it more efficient, so they invented the Linotype machine. There’s a great documentary about the Linotype machine. If you can see it, go check it out. It’s incredibly educational.
The Monotype was their competition. You see that still there is this whole notion you have to be able to see what you need. You have to be able to visually look, all right, I need this character or this letter. I can just type that one and it will get this result.
Then something happened in the late ‘40s, early ‘50s; phototypesetting was invented. There, instead of having to type in little metal bits, they were on filmstrips or little film rotators. But, what is important is that, even though it was a professional typesetting machine, they used the keyboard of the office environment because, when you look at the keyboard of a phototypesetting machine, it moves, it looks almost identical to a keyboard of a typewriter.
You may wonder why. Well, it’s a very sad reason. The typesetters were unionized, so they said, “You know if we introduce a typewriter keyboard, we can hire typists or women, so we can pay them half what the unionized typesetters used to make.” It’s a very negative way of approaching this problem.
Then in 1984, of course, the computer arrives, and they still have the keyboard of the typewriter. Now if you need a special glyph, you’re looking at your keyboard, and you’re like, “Where is it?” because what you see is this, and it’s very limited. You kind of know that there are two modifier keys. Sorry. This is a Maccentric because I work with Mac. It applies also on Windows environments. You get the shift and you get the option.
You know from the olden days that if you use it without the shift, even though you see capitals, you have your lower case. When you use the shift, the capitals come up. But, then you had the second one, the option, and that gives you the extra characters that formerly you used to see in your type case, and now you have to kind of know where it is. Germans, for example, will see that the eszett is placed in the B, not because it’s the same sound, but because it kind of looks like the B. Some of them are logical places; other ones are completely random. You have to kind of memorize where everything is. This makes interaction with type a lot more difficult.
What happened is that these typefaces only had 256 characters. You may think that’s enough. That’s not true because they then felt the need to have extra typefaces. There was a different typeface with all the sorts, all the small caps, ligatures, different kind of figures that we used in professional typesetting and fine typesetting.
Then in 1998, it’s a pivotal point because then is when OpenType was launched. The big difference is now you had a single cross-platform file, so you didn’t need Mac fonts or PC fonts. Very important, Unicode character encoding. The last time I checked, there is room. Instead of 256 characters, you have room for almost 140,000 characters from 140 scripts, and you have also multiple symbol sets and emoji. Then the advanced typographic layout features, which make your fonts sometimes look like they’re magic. You type something, and then the previous letter or the next letter will change to make a better combination. It’s kind of intelligent typesetting.
The problem is that you’re still looking at those fonts through this little keyboard. It’s like looking at your typeface through a keyhole because what you see on the keyboard is this. Because of our experience with typewriters, we know that the lower case is also accessible when you don’t press the shift. But, what is in this font that I show here is all of this, and you have no idea.
What was the solution, the first solution that Adobe came up with? They created this. It is a glyphs panel where you can find all those characters. Now, if this looks familiar, it is, because you just go back to the very first days of movable typesetting where you have this case, and you have to visually look for everything that you need.
The problem is, of course, you’re working on the computer. You should not be doing that work. You should not be searching for any character. It should be able to come up in a logical, automated way.
They added some improvements, like for example with the dropdown so they can see all the different variations of the letter that you’re looking for. But, you can also narrow down your choices. For example, you want all the ligatures, and then you only see the ligatures that you might want and need.
When you go to InDesign, and you went there just before we started working, finding all that richness in typography, all these features that could improve your typesetting, that could make you a better designer, that improve the layout of pages both on paper and on the Web, it was all hidden away. If you look there, there’s no indication that there’s anything advanced. You have the character panel, but it doesn’t say much. There’s very, very little choice.
What you need to do, there’s this little thing that you can almost not see is the fly-out. Then you see, okay, there are a couple of more options. Then you see this one thing, OpenType. Okay. Let’s try this. Then we’re running out--
Okay. I’m going to move because we’re running out of screen. Then you see all the special features. But, for example, if you’re an advanced designer, advanced typesetter, you may need stylistic sets. Then they’re even further down. This is not the best way. This is not UX or UI design that’s sensible.
Why did this happen? Because OpenType was launched. One of the major players was Adobe. Literally, firsthand, the guy that was part of the Adobe type team walked over to the guy that was working at Adobe InDesign team. He said, “Oh, we’ve got these great new typefaces. We have all these special things happening. You should be able to access them in InDesign, Illustrator, and PhotoShop.” The guy said, “All right. That’s a fun idea. Just give me one of those fonts,” and so that developer from Adobe InDesign, over a weekend, cobbled up something.
Then, I don’t know if the managers or project leads were mad about it or they saw it, but they said, “Oh, that’s good.” What you see, actually, is a proof of concept. It was never meant to be a user interface that was workable. Unfortunately, that’s what we were stuck with for 15 years because they said, “Oh, we have it now, so that’s okay. We’ll leave it there.”
That means that there are all kinds of inconsistencies. For example, if you want to change the caps, small caps, all the small caps, they’re in different spots. There are even things that conflict. For example, superscript and superscript in the normal menu, they don’t work. They just make them smaller and lift them, while the other ones in the open template show you the actual glyphs. Then positional forms are also hidden, so all the richness that you could access in those fonts is actually very hard to access.
The same thing in Illustrator, very inconsistent. They always went, like, okay, Adobe, all the products are consistent in user experience. It’s not true because there you have the separate open type thing, and then you have all these little buttons. Many of them are missing, so you just try to find what you need, but half of it is missing. In PhotoShop, the same thing.
That was what I was protesting against in Barcelona at the ATypI conference. I think, two months after that, I got a call. Well, first a tweet, and then email, and so on from Adobe to say, “All right. We heard you. We know that we’ve been neglecting this for I don’t know how long, so we want to try and improve the whole thing.”
They set up the Adobe Typography Customer Advisory Board, and we started working. It was announced in December 2014. We’re a group of people that are looking at the apps and trying to make everything better for everybody - you.
There are other people also chiming in: Chris Sauer, a great type designer; also Sara Evans, who had an idea about our language because sometimes in those stat menus I can imagine that once in a while you see a certain word. What is this thing? Our language has to also be more accessible.
What are the user interface improvements since we have started this whole project? First, PhotoShop users, in June 2015, suddenly you had the glyphs panel. Before that, if you needed a special character, you had to go to Illustrator or InDesign and then copy it. Then go to PhotoShop and paste it. Now you can see, again, the whole thing like a letter case in front of you. You can find the characters that you need.
Then, InDesign, the first major development was on canvas selection of ultimate glyphs. This is great. When we write something, you can select. Then you see as a drop-down on canvas what the different possibilities are. If you want to fine-tune your typography, you want to make it look a little nicer or a little neater, you can actually do that on canvas. That’s our whole movement as well is trying to move away from the interaction between the type user and the fonts. Move away from panels and dropdowns, but actually, make it an interactive experience while you are working on the canvas.
PhotoShop then also adopted. Again, the three big players started from different code bases. Illustrator was created first. Then came PhotoShop. Then came InDesign. Even though they tried to integrate the whole experience, they are different code bases, so certain advancements only come later, after a while, after the first one was implemented in another app.
Yeah, I’m going to cycle through this. I’m going to show you what happens. What happens now is that when you select multiple features, you can see here, for example, if you don’t like ligatures, you have the option to select the short F. But, then there is this new thing that many people don’t know. There’s this little icon there. That’s the universal OpenType symbol. When you click it, you see all the options for the typography.
If you want the special thing with the short F, you just click that in the drop-down, if you want small caps. It also shows you what changes. We’re trying to make these things easier to understand for any type user because, as long as you don’t know what it is possible, if for example you’re driving a Porsche and you only know where the furthest gear is, you’re not going to make any speed. You need to know, all right, but I can do these other things with what I’m working with.
The same thing with fonts. People don’t know what typographic richness is available. It’s also available, of course, on the Web, so I’m going to quickly show you something. For example, if you want to know -- oh, shoot. If you want to know what’s available on the Web, there is, for example, this website that shows all the features that you can use. There are also similar things for browsers.
What’s next? This is a work in progress. We’ve started on this journey two years ago, two and a half years ago. It’s a long and difficult process because the advisory board, we do exactly what we do, so we advise. We send out signals to development teams, and we say, “As users, we understand what’s going wrong. Could you please do this and this and this?”
Then, of course, at Adobe, the budget has to be allocated. The teams have to make free time to work on this. Then we see stuff coming back. Sometimes it’s not in the order that we think is most important, but, little by little, it gets done.
What is amazing is that originally PhotoShop was really lagging behind when it came to type support, but they have one developer, Vinod Balakrishnan, who is out there, and now he’s leading the charge. Now PhotoShop is the first one to implement the enhancements that we’re asking for, so that’s really great.
One of the first things that we want to get away with is we still have this character menu and an OpenType menu. That makes no sense because it’s a division made on technology. When you are typing text, when you are making a Web page or doing a layout, you are not thinking about technology. You are thinking about what are the basics and what can I do to really make people see that I know what I’m doing. I’m doing fine typography. This is the next level. This is not just some basic Verdana.
Also, language. Language is really messed up here and there. People think that metrics, oh, that’s done by a robot. Optical, oh, that is the exact opposite. Metrics are just the spacing done by an expert type designer. Optical is just Adobe software guessing what could be the best spacing.
The same thing over and over again, stylistic sets, we want to make them more visible so you know all the richness that you can access, that you can actually see it and be able to use it. Figure styles, of course, for now, you have to go to combinations. We want to make it a simple grid that you know what you’re doing.
Type selection and discovery: I guess everybody wants to know. There are type kits. There are efforts now that you can have similar typefaces or you can show them a little scan. Oh, it’s that typeface, so you can find your typeface more easily.
I rushed a little bit through my main presentation because I wanted to show you this. The 14th of September 2016, the OpenType spec 1.8 was announced. This is again after 20 years, almost, a major advancement in typography. This is very important for anybody who works in Web design. That’s a major thing.
Who of you is old enough to have been working with multiple masters, Adobe multiple master typefaces? A couple of you. The technology that was launched, actually, Illustrator used the same code base as their type design development. They saw the thing where you can morph from one shape to the other. They applied it to type design as well.
Then they thought, you know, we use this to design the type. Maybe it would be nice to give it to the user, and then you had multiple master typefaces. You had a certain typeface. You wanted it a little bolder, a bit narrower just to make your copy fit in this space that was available. Got some sliders and so on. Unfortunately, the computing power was not there yet. The speed wasn’t there yet, so that died a slow and painful death. But, it’s back, and now it’s really implemented.
The good thing is it is supported by all the major players. The consortium that’s working on it, it’s Adobe, Apple, Microsoft, and Google. They’re making great advancements. Now we’re a little more than one year in, and there are already results.
The basic idea is that when you look at a certain typeface and you see the light and the bold, actually you could make it transition from one to the other. This has actually already been used in some type production just to try to find what the best weight is that you want to give to the user. Then we take the middle one. There’s also an application to width. Then when you apply it to the whole grid, you have all these possibilities.
Up to now, the only thing you can use are all the fixed instances. You have certain families that are larger, certain families that are smaller, but you have a limited amount of options to play with. It’s not the same thing as scaling because every single instance is redesigned. The actual narrow one will be properly designed. It’s not just squished.
Why OpenType font variance? Instead of having multiple files for a big family, you only have one file. All the variations are in there. Curling and hinting, especially for screen display, can be applied to a single set of type outlines, so there’s less work involved. It has to be very well prepared, of course. The work is more complicated. But, once you apply it to one set of outlines, then you can actually expand it to the whole family.
This is very important. We have considerably small font files. When you’re making a website and you want to have the typographic richness to show people what is a headline, what is the body, what is a caption, what is a little snippet of code, you do not have to download all the fonts one-by-one. You have this one font file, and then the CSS will determine what kind of variation is visible to your user. That can save up to 80% of bandwidth for certain websites with many typography styles.
Also, you can have a responsive Web design, your font adapt to your viewport. You can have a certain type style for large windows when you go to mobile. You can say, “Oh, I want a variation that’s like 80%,” so it’s a better letter fit because there are slightly more characters per line, and that improves the whole experience.
Also, when you make type small, the little bits tend to disintegrate. You can make sure that they’re a bit more solid, so the optical sizes can be adapted.
This is very neat. Before, the multiple master fonts were a bit marked by the fact that even if you have a very well-designed lightest weight and a very well-designed boldest weight, nothing can guarantee that the weights in between will be perfect. Sometimes you need a little bit different in the middle. Now you can install breakpoints where your design changes from one shape to the other to make the best possible representation.
I’m going to quickly showcase that on my computer. I think I’m first going to show Illustrator. No.
When you go in the latest release of PhotoShop, it changed. Now it says “properties.” They’re trying to get away from the type menu and then the fill menu, whatever, to just properties. Whatever you selected, it adapts the whole interface. You can show variable font usage. Again, we have lots of work to do. Again, this is a little bit hidden.
But, when you see this here, you have this little slider. This is one single; everything you see is one single font file. Imagine having to send all the typefaces or you only having to send one. If you drag the slider, you can really fine-tune the weight until you have exactly what you need.
What I was talking about earlier, certain characters may present problems when they go too black. For example, the vertical stroke in the dollar sign, it will mess with the whole counters becoming too small. If you increase the weight here, I hope it just shows it at some point. It’s not really super fluid. I think you saw that, so problem avoided.
You can also have all the widths. Then once you are in there, you can still change everything that you want. Then, of course, only certain designs can do that, but certain italics are designed a different way. Here, you can change the slant to create an italic and have the exact slant that you want.
Illustrator also works. What is fun is that the menu is also a little bit hidden. That’s why I’m showing this to you. If you want to use it, it’s there. It adapts to the available axis. For example, here when you look at -- hold on.
When you look at Source Sans, you see there’s only a weight axis because this is a serif face and, like I explained, when you make this smaller, those fine serifs will disintegrate, will not work, and screen rendering will not work as well. You can actually change the optical size by making it a little sturdier, making the serifs a bit thicker, a bit stronger, and increase the spacing so that you have the best possible representation on screen.
Google Chrome is the first browser that supports variable fonts in a public release. I invite you all to visit Axis-Praxis to start playing with this. What Axis-Praxis does is it offers an interface and a whole bunch of variable fonts just to allow users to start getting acquainted with the whole technology to understand the benefits that can be had. When you select something, so here we’re in Heading-1, this is the typeface. You see that there’s the font size, line height, and alignment, but also font variation. Then you can go for instances.
You don’t really have to look forever. You can already go, “All right. I want a bold.” Select the bold. But, then from there, you can really fine tune what you need exactly. Then, from there, you can make it a little bolder, a little lighter, and so on. Also, the optical size, again, this is for a headline if you wanted to make it for text, a little looser spacing, a little larger axis height. When you go here, then you see there’s also the width in this.
Again, the interface only shows you what’s available. When you try here, you get a little narrower, and there a little wider. What’s really interesting is that you can go and check the CSS. What it allows you to do is that you can try what you want, and then you see in CSS what you have to define to get that instance that you have chosen for this font to show up properly in your website. It makes it really very easy and very intuitive to apply.
There’s a whole bunch of typefaces that are now available for testing. We’re one year in into the technology. It’s improving fast. The thing that gives us confidence is the fact that, as I said, the four major players are all involved, and they themselves understand its value because Google wants to have faster websites, so they want this technology for themselves as well. This is going to become really, yeah, available very soon in commercial applications and, yeah, for everybody to use. Then the type foundries will have to follow suit and release the variable fonts, so you see there are a couple that are already available, but it is going to quickly grow.
This is the old one.
Yeah, I would invite you to go in there. Try out the technology. Get accustomed to it, and you will be amazed at what’s possible.
Now, these things that you saw, it’s like weight, widths, and optical size in other axis are just part of the story. What Type Network is doing now is, we are proposing other axes because we want even finer control over our type. There we have split up all these things into the white and the black of every single aspect of the typeface. Here is the white that’s getting increased. Here is the black, the opaqueness.
This is extra. It’s transparency in the X direction, opacity in the X direction, so you see that in the X-axis, the black gets increased. It’s not just width, but it’s actually every single component of the typeface can be manipulated. The same thin the Y direction, transparency, so the white increases. Here is the opaqueness in the Y direction. It gets increased or decreased. That’s the black. Then you have, of course, the X height, which a larger X height makes it easier to read in small sizes. These are the capitals.
You see there are a whole bunch of things happening, and we’re really working hard to get this technology to everybody as soon as possible. These are the two URLs. Go there. It’s going to be soon. It’s going to save you a lot of bandwidth and going to allow you better control over your type. Yeah, it’s going to improve your work tremendously.
That’s about it. I want to thank all those people, especially like Michael Ninness, a product designer for InDesign and also started the board; Matthew Rechs, who has been a rock for us and leads the Adobe Typekit team; and everybody who provided me images.
I hope this was useful to you. Go out and play with variable fonts because that’s going to be the future. Thank you.
Audience: [Applause]
