Fronteers — vakvereniging voor front-end developers

Responsive typography by Oliver Reichenstein

Transcript

Yeah, thank you very much for this nice introduction.

I think the woo thing just doesn't sound manly enough probably to a European.

If there's a lower way, like a woo, whoa, then maybe that would work.

But I don't dare.

Maybe we're too inhibited, oh.

[LAUGHS] Yeah, you said it.

This is how it all started.

This web design is 95% typography article.

At the time I published this article, I didn't know much about typography.

Actually, I still really don't, but there are people that know much less about it.

There are much more people that know much less about it it seems.

And so I've become sort of an authority, which is quite funny sometimes, because when I am among people, typographers, I'm really insecure.

And I was at a dinner last night being promiscuous with a parallel conference group, and I think I got the people really angry, because they were like, who is this guy? What's he talking about, typography? This sounds all weird and wrong, so take it with the salt of grain.

I looked this up yesterday, being nostalgic.

I think this was the first iA website actually.

The idea when I started iA-- it had been a long time with iA, because I started it.

The idea was that there's just content there.

When I started my agency, I thought there's way too much noise on the internet.

There was all this talk about Web 2.0

and I thought maybe we're doing to our minds what we've been doing to our environment, by just sharing a lot of information, and increasing and increasing, spreading data like crazy people.

And we should be focusing on the essence, especially when you looked at the state of web design back in 2004, 2005.

It was in a really bad state, and it was tough, it was hard to even read a website.

The fonts were 12 pixels high at maximum, often 10, often less.

And there was advertisement everywhere.

I thinks there is still a lot of advertisement around.

It's still kind of hard to read websites, especially newspapers.

And I thought, yeah, well this is a nice design.

It looks like there's no CSS.

Maybe there was no CSS.

I can't really exactly recall, but I felt this is the way to go.

This is a good starting point.

Then I published this article on a website that looked quite different from this one.

Not exactly like the last one, but the idea was always to try and reduce.

And what I found out experimenting with reduction in the beginning this here is that it's not so much about leaving details out.

Reduction is not about leaving details out.

In contrary, reduction is about leaving everything superfluous out, and caring about the details.

And what does that mean when you're mainly dealing with text? It means that you start caring about typography, the little things.

And yeah, I think it's a pretty clear illustration of what I meant by web design is 95% topography when you compare the two.

How did I discover typography? Yeah, well, I was not completely virgin to the topic.

I used to work at the big branding agency before that for four years, and there are designers that went to design school at branding agencies.

I actually studied philosophy.

I'm not even a designer actually.

And they were always talking about this thing, typography.

Kind of freaking me out, because it seems something very similar to what [? Lucas ?] showed us yesterday.

That's something that you will never be able to even fathom, that you will never be able to practice.

It's so complicated, and you need to go to design school for four years to understand it.

And I discovered this image here.

I can't find it in the higher resolution.

This is how it's still on my server.

This is the specimen from the Renaissance, and really sorry you can't see it, but there is just one font here.

From what I've heard about typography so far, it was about choosing beautiful typefaces, and that's still what many branding agencies do choosing beautiful typefaces and the color for a company pretty much sets the visual identity of a corporation.

And I thought, how can that be so difficult to choose a typeface? But when they talk about it, when they talk about differences in serifs and stuff, it quickly gets very strange and you think, well, so choosing a typeface itself already's very difficult.

It's not just if you like it or not.

These typefaces have special characters, they have a tone, they have a voice, and they have all these words, the ascender, and the descender, and that's even the simple stuff.

But when I saw this, and I read that these people that did this only had one font-- there was no font choice-- but they did beautiful typography with it.

Weird things started to happen, because then suddenly I realized, oh ho! I thought the problem with web design was that there are not enough fonts to choose from, and this is why we can't do good typography.

So good typography is not necessarily related to being able to choose from a big pallet of fonts.

And so I thought, let's see what kind of typefaces we have at our disposal.

And by the time it was very much Arial and Verdana that was being used.

And Verdana's OK.

At small sizes, it's actually very, very, very craftful and very sophisticated.

At big sizes not so much.

Now, I discovered Georgia.

It's 2005 and you should have been obvious.

As a web designer, I've been doing this since 1999.

I discovered Georgia, and I found this typeface quite pretty.

And I started trying to do something like this with my website, using small caps.

And then people told me, well, these are actually full small caps.

You shouldn't do that.

That's bad taste.

I started doing all kinds of crazy things.

Started reading books about it, because I didn't find anything about screen typography online.

There was nothing.

A couple of people said actually text is sort of an interface, and typography's important.

We have grids.

Some people were talking about grids already.

People that went to this design school knew some stuff about this, but I felt something like this doesn't exist, and I wanted to do to try and understand how this can be translated from paper to the screen, because obviously you can't do exactly the same thing.

Having columns on a website when what you mainly do is scroll doesn't make much sense.

You're making a big mess, and still a lot of people are making a mess with columns on even smaller devices like iPads, or iPhones I think I've seen columns as well.

But I focused on how can this be translated, and I had to do a lot of reading.

It's kind of shocking I've been designing websites for six years by then professionally among others for big corporations through my branding agency.

But actually typography, I felt, well, I let other people choose fonts, and in the browser, I can't choose fonts, but that's not what typography's about.

It's about how you use a typeface.

The font choice, of course, does play a role now that we can choose fonts.

We're in a much more comfortable position.

We can actually start talking about the voice, and the color, and little details, and find exact matching typeface for our clients.

But where do you start? If you have no professional training, if you didn't go to design school, you start reading a couple of books, and it all sounds kind of scary.

But what I found out quite quickly is that you start by choosing the appropriate size for your body text.

That's where it all begins.

And I quickly noticed that the biggest problem we had in screen typography was that the typefaces were too small.

And the reason for this is that web designers design like this.

That's the reason, so web designers are not relaxed, and they always look at the screen really close to make sure everything is OK.

And, of course for them, if you look at the screen from this close the typeface is always big enough.

Even at four point, it's more than big enough.

But for the average user, who actually likes to sit comfortably, not be like this.

Maybe some of you do that, but I'm not surfing like this.

But you like to sit comfortably in about this distance, and you know surf the web.

That's what you do with a desktop computer back in 2005 anyway.

And when you do this actually, if you compare it to a book, the screen is much, much further away from what the designer sees, right? And so what's the appropriate size for a typeface? Well, fortunately, back then the resolutions were not that different, and they were not retinal displays and different types of granularities in screens.

It was pretty much one standard, pretty much.

And the only way I could find out what works is to take a book that I felt has a nice size for the typeface.

And it's not too exotic.

Most books have more or less this size, something between nine and 12 points.

And I held it in a good reading distance, which is normally about like this.

And I sat in front of a computer, and then I compared.

So I looked at the book with this eye, and at the screen with this eye.

And what I found out is that most designers with a classic training used the type sizes that they're used to in print, which is held much closer.

And then, if you use that type size that you use in print, 12 pixels-- that was kind of a standard back in the days-- and you hold it away, it get really, really tiny.

Even though it's only couple centimeters, this difference in distance has a big impact.

Here, this illustration shows how big a letter appears if you hold it just a little bit further away.

So what was a good size? I found that if I don't change anything in the browser, big surprise, it's actually a pretty good size.

It was just surprising how big that is, about 16 pixels, so 100%, Georgia 100% 16 pixels.

At the time in 2005, this was crazy.

This was insane.

And it was stupid, and can't be done, and this man has to be stopped.

He can't tell us 16 pixels Georgia.

This is a bad man.

Stop him.

He can't be ruining it all for us.

The screens are too small.

If we have 16 pixels, what are we going to do? Where are we going to put all these columns and all these beautiful things we have, all the ornaments, and what makes good design, right? All we can have is a column of text, and where is the design.

So I had a couple of fights online, which I like, as you can probably sense already.

And so what I did is I started comparing these existing screen designs with good print design, and started to try to find more principles than just the type size.

How can we make things nice? As time goes by, and with a couple of pretty heavyweight clients, newspapers mainly, I started to find a couple of principles.

For instance, because of the reading distance, you have to give it a little bit more of line height.

The print designers would say there's a zebra effect, because there's too much line height.

But for some reason, which probably some scientists will find out someday, but I just have a speculation why that is.

For some reason, with a backlit display and this reading distance, you need to have a little bit more line height.

And who was I to say that? Philosophy student has worked on a couple of big branding projects, but he's in some back room in Tokyo, and he's just to find out these things.

And why he's trying to lead this conversation? Because no one was doing it at the time.

So after a couple of years, I had a good idea how it's done.

Most of what I know about typography I know from reading books.

And the success of our newspaper clients actually prove that we had a point.

You can imagine that on the way to telling newspapers that they have to have a 16 pixel typeface that takes away so much of their marketing space was not so easy.

There was this other misunderstanding that you can't have serifs online, because there's pixels and if you have serifs, they don't read so well.

There has been studies that have proven this.

And I went and researched it, because I found notes.

Actually, because it's so far away, you can hardly see the pixels anyway, even with these old screens.

And I started researching what's that study everybody citing that serifs don't work on the screen.

And it was a study made somewhere back in 1992, and that they were testing like 10 pixel Times New Roman against Verdana.

You can't have serifs at 10 pixels, but at 16 pixels there's no problem whatsoever.

But convincing newspapers that a serif typeface is more appropriate for them, and that it should come with a readable size, that cost me a lot of energy.

I think Mike Monteiro would be pretty proud of me, because I fought very, very hard fights back in the day.

These days, 16 pixels even is small size, again, with the high resolution displays that we have.

So I kind of got it, because it's not that difficult if you spent a couple of years.

Even a philosophy student can understand how typography works basically.

Personally, I'm still not the best typographer around, but we have pretty talented people that do good work and keep me in check.

I got kind of picky and I started using that same language that used to scare me when I was working at this brand agency.

But that's how geeks are, right? So you eventually go crazy.

Now, again, I think I got how this typography thing works.

And iA has made itself a name, it's grown a lot because of this, because no one or hardly anyone was occupying that space in 2005.

I think in 2007 or something, the [INAUDIBLE] said we were one of the most famous design agencies in the world.

Back then, we were two people in a really crappy office with an electric heater.

And it was really amusing what the internet can do in terms of fame.

So then these guys, tablets, smartphones, and that retina display.

And then the MacBook Air also with its weird intermediate high resolution.

Things were getting complicated.

And I remember that when we told Die Zeit in 2008, when we first met with them, that maybe they should try to go for a big layout.

Because they have this big newspaper, and it's part of their identity that you hold it like this.

And that there's maybe a way where the website, the design, adjusts to how big the browser window is.

We didn't have the appropriate vocabulary for this.

So when you make the browser bigger, than you have a bigger website.

And yeah, maybe you could also even use bigger fonts, and you could use that maybe even for other devices.

And they said that's crazy, that no one's going to understand that.

People are going to freak out when the layout changes.

You open the window and the layout is completely different.

They're going to be irritated when they come back, and the layout is different from last time, and they don't realize that it's just the window size that has changed.

And I've learned to fight with newspapers, and in that sense, they're a very, very cool client, because journalists like to fight, right? And not every client is that prone on fighting, but eventually we dropped it.

It was too early for these things.

But at the time, we started to think about what happens with different sizes, and with different reading distances again.

Because here, you do not only have a different view port, as we say now, but you also have a different reading distance.

And what's particularly annoying is that with these handheld devices, the reading distance can change considerably.

And from my early experiments, we used a camera and tried to capture the visual size of different typefaces, of different reading distances.

I know that the difference this makes, only a couple centimeters when you hold a device quite close, is massive So you can't really say any more 16 pixels is good or whatever.

Size is good.

You have to have a very good guess.

And if you look at typography on smartphones, still massive, massive difference there are very small, type sizes that you can hardly read.

And there are way too big type sizes where the measure, the width, the column width is so small that, especially in German, you can read two or three words per line.

And yeah, this made me very nervous.

And it also made me nervous that these two screens have different resolutions, because I felt that on this MacBook Air, my glorious 16 pixel Georgia rule didn't work anymore.

It's too small.

There's a slight difference in reading distance I think between a laptop and the desktop computer, but mainly I had to make Georgia so big that it all looked wrong.

It looked too bold I felt. And

I was entering a completely different realm of typography, which is closer to what Lucas de Groot was talking about yesterday that I didn't know about.

When we talk about responsive typography, sounds all new still, but actually this is an old thing.

People have been thinking about what should happen to a typeface as it gets bigger way before we had computers, and this opened the next chapter.

Now, if you think that this was boring, yeah, buckle your seat belts.

[LAUGHS] When the iPad with a retina display came out, I looked at our app.

I use it every day, and maybe this makes me overly sensitive.

I'm not exaggerating when I say that we spent half a year to find the appropriate typeface and to define it so it looks like it looks now.

Like I said, you start getting crazy.

Once you go into typography, it just sucks you in.

And you get more and more picky about things, so we changed the line height, we changed the spacing, we asked the type designer to change some characters.

We basically started fumbling around with the typeface of a very known type foundry Bold Monday.

They make the Audi font, among others.

You've seen him, a little bit of it yesterday, and Lucas was working on that as well.

And their response was not, you're changing my line height? You're crazy.

They were like, you're right, it looks much like this.

I was quite scared in the beginning to ask them for all these changes, because who am I? Type design is yet a completely different story.

That is really for specialists.

You can't just go and design a typeface when you study philosophy and fumbled around with typography a little bit.

This is really for the professionals, right? But they were very open to these changes.

And when I looked at this things on a retina display, it just seemed way too thin.

So that typeface that looked just perfectly on all the devices we had so far suddenly looked too thin.

And I wrote this letter to Paul van der Laan.

And Peter, You know writer for iPhone is coming soon.

We've been experimenting with fonts on retina display, and came to surprising conclusions.

Retina behaves a lot like paper, but then again not.

In the beginning when this came out, everybody's like, yes, now we can just use the old paper fonts.

We don't need to deal with hinting and all this crazy stuff anymore.

We can just use old fonts.

But I felt something's off.

In order to make [INAUDIBLE] look the same on iPhone as an iPod, we had to enlarge it by 7%.

Blah, blah, blah.

Keep this information for you right now.

I'm very secretive these days about things we find out.

So we went and did not only ask him for a modification of his typeface, a massive modification to change the weight, but we even did it in Fontographer ourselves.

So we just fumble around and I asked him, is this OK if we use it just like that, or you want to modify it yourself? Which, if you talked to another type designer, would probably result in some kind of Igor coming breaking all your fingers one by one.

But they're cool, and we've been working beautifully together.

It's fantastic if you can do typography together with a talented type foundry that knows what you want, and does it way better than you could ever do.

So I had to find out what is it that happens on the retina display that makes this typeface too thin, and what do I not know, not about typography but about type design, that irritates me so much? You've seen this yesterday.

And what Lucas was hiding was actually how ugly this is.

If you don't use your imagination to see Georgia behind these pixels, this is actually how this looks in vectors, right? It's pretty ugly.

It's all over the place.

And you have to do that, so we get the illusion in a pixeled environment that this is a pretty typeface.

But the actual shape of it, and this is quite-- it's like The Matrix.

It's like the actual shape, but this is the actual shape.

No, if you vectorize this, this is how it looks.

So to make typefaces that work in an environment with raw pixels work, the vector reality of it is quite distorted.

And we forget that, because we always project the actual shape you want to see into the pixels, and we forget that the actual shape is different.

So this explains why.

Now even the computer gets bored.

Oh, I'm running low on battery.

Does anyone have a charger? Now at the most interesting point, huh? Is this running low on battery? I cannot even continue.

Thank you.

So this is a cliffhanger here.

Now it gets really, really interesting actually.

And it doesn't let me continue without the battery.

I should have thought of that, because I've seen the battery being low before I started, and I was like, ah, it's OK.

I don't know what to say, and it's going to be over soon, but no actually-- how am I doing in time? Half an hour.

Good, let's continue.

I'm ready? Yeah.

Come on.

Are you unplugged again? So we're back.

Now it gets very interesting, very, very, very interesting.

So the actual shape of this Nitti typeface that we used in a pixel environment is much thinner as a vector than what you see in a pixel environment.

You can imagine this a little bit like low resolution is like paper that's very grainy, that sucks in the ink, right? So you write on this paper with a felt pen, and then the line gets much thicker than the actual point of the felt pen, because it fades out like this.

The paper sucks in the ink, and that's pretty much what pixel screens do as well.

This anti-aliasing business that you can't see here, because this is not anti-aliased, it makes the typeface look a little bit bolded than the actual vectors.

And as you've learned yesterday, this is done on purpose.

They work with these things.

They go down to sub-pixel anti-aliasment to make sure that the font has the exact right weight that they want, that they have in mind.

So this is something we can see, because on the user side, you only see the finished shape, and you don't imagine how much time they spend to push each and every bezier to the exact point where they get this weight, this visual weight of the typeface.

But I noticed that our choice of Nitti Light as a typeface for IA Writer was the right one, because it looks a little bit bolder than light when it's in a low resolution environment.

But as soon as you go to a retina display, this effect disappears and you see the vector for what it is.

It's way too thin.

And that's only one thing, and it's not new, because as I said, these different grades for different kinds of papers is something that type designers have been dealing with for centuries before.

So if you use a different kind of paper, you need a more or less bold typeface to adjust the outflow and ink you have in different environments.

That's one thing.

The second thing is that-- and I didn't know that.

I had no idea that actually different sizes of fonts in print have different weights.

So they have different stroke thicknesses, because they have to adjust their appearance, depending on how big they are.

So you know the smaller you get, actually the bolder a typeface becomes to appear the same.

You see these now next to each other, but actually, visually, they get much smaller to the right.

A size four to size 10, but you can see how they increase in weight, and the bigger, the thinner the stroke.

So dealing with different sizes and different resolutions, it's not something that I invented, or anyone in our industry invented.

It's been there for a long, long time.

And I noticed that I don't know shit about type design, but to get to the next stage, I had to start investigating how own these typefaces were made, and start translating this as well into the new medium.

Here's another example for ink spread.

You know how different paper qualities require a different weight, and there are things like ink traps.

Let's not get too crazy.

They require different shapes to appear the same in print, and this is work that has been done for centuries, and so I started investigating what we can do with our Nitti before writing this email that I showed you before.

This is Nitti Light in a low resolution environment on top.

And if you used that exact same typeface on a retina display here in the middle, it looks much thinner.

I mean, there actually I know that not everyone will agree.

You could say like, well, it's kind of the same.

It doesn't really matter.

But the thing with typography is not everyone can see.

You need to spend a lot of time, like a watchmaker, and then you get very sensitive.

And then maybe you see a little bit too much, but everybody can feel it.

So when you actually manage to get things just right, and it takes a lot of time little effort, people will feel better about it.

They won't see it.

They won't say like, oh, yeah, that's a nice grading of the Nitti on the retina display.

It's good job, man, because actually, if you do this right, you can't see a difference, you can't notice a different.

The typeface feels the same, even though it's a completely different shape below it.

So in some ways, it's a lot like hinting.

It happens behind the scenes.

And on the front, you have the same impression, but it's much, much easier than hinting, or dealing with sub-pixel anti-aliasing for each little ledger.

So while for the typographer and the web designer, things get a little bit harder with different screen sizes.

For the type designer, things that get much, much easier, because all they need is-- and this is controversial-- deliver different grades for different resolutions.

Now, it's controversial, because when I said, this is how it's done, a lot of type designers were pissed.

They thought, well, now finally we're free of the hinting, and not this guy comes along and says we need grades.

And we can do grades, but let's just use the old print typefaces that define.

And actually, yeah, we have experience with different people qualities, but the way we used to deal with this is you choose a weight that somehow works for all the paper applications.

But I was not happy with this kind of answer, because these people spent thousands of hours on these typefaces making sure every little detail is just right.

And then suddenly they get sloppy when it comes to the screen.

No, we need these different grades, so on different screens, the typeface looks and feels exactly the same.

And we did that, and I was very happy, and the application continued to sell.

As before, I was completely freaked out when I first saw it on an iPad, and I thought this is the end of it.

I am actually convinced that 50% of the success of this application-- we're going to break a million users this year-- is because of this beautiful typeface.

It just feels so nice.

Not everybody agrees.

People have different tastes.

But to me, it was mainly about this.

So now it gets really, really boring.

Grading this Nitti and working with Bold Monday for so long, I started getting a little bit curious.

And in the same way, I felt I'd never be able to understand typography.

Not in the same, actually, it was much worse, like designing a typeface, are you nuts? This can't be done.

It's impossible as a philosophy student that stole his way into web design, and now is known for web typography, while actually he just read a couple of books at the right time, and published a couple articles at the right time, where no one wanted to think about it, because it's always more comfortable to do things as everyone else.

I got sucked into type design.

How did that happen? This is the view from a hotel on March 9, 2011.

Beautiful, isn't it? Mount Fuji.

I forgot to mention I lived in Japan for 10 years.

And this is the view from an apartment we were about to buy maybe March 5th or something.

I went through my photos last night to try to explain how I got sucked into type design.

And you might not think this is a very beautiful view.

Actually, it's quite beautiful.

If you live in this environment, it's all pretty nice.

It's quite high up.

It's old windows, all kind of shaky, and there's a [INAUDIBLE].

You use a lot of energy.

But that's how things are in Tokyo.

This is a nice apartment in Tokyo, a nice view.

So we were about to buy this apartment.

We had the contract on the table when the table started to shake on March 11.

This is a train station that was about to head for South by Southwest, was about to take the train here from Shibuya Station, but what I saw was this, and it was weird.

It was weird.

You've all seen these pictures how the tsunami came and then suddenly trains are on ships, on houses.

And everything seemed to break apart.

And I talked to a lot of friends in Europe, and they said, like, ah, the nuclear power plants.

This was March 13.

My friend Craig, where people are starting to say, maybe we have to evacuate the city.

There are four nuclear power plants melting down two and half hours away.

And should we? Should we not? We have to.

We have to.

We have to stand our ground, right? And you can see in his face here that we're not quite sure what to do.

This is a day later.

There used to be stacks of rice in here.

This is a supermarket.

And when you see this, being a westerner, you start freaking out.

When there is no chewing gum anymore, there's no batteries, there's no rice.

They even buy toys, as people start hoarding everything.

But mainly if they can eat it.

I think the first thing that went was toilet paper.

But this freaks you out, so we left.

And in the same way, as this was spinning my head in 2005, not in the same way, in a much more extreme way.

This was spinning my head, that I have to start looking at radiation levels, and start learning how this works, and what is propaganda? And what kind of propaganda? And I have kids that's two years old.

What am I doing? Am I putting my kids in danger? It resulted in, a couple weeks later, us flying back to Switzerland.

This is Zurich.

Switzerland's beautiful.

It's very beautiful actually.

There's nothing wrong with living in Switzerland.

But after 10 years in Japan, it was not every happy actually.

You can see my boy there.

He's not very happy either.

How can you not be happy here? I mean, it's beautiful right? What made me happy is I had my old books.

I used to collect old books.

And I have my library back.

We were living with my mother, and I went to my books and I saw this.

This is a book about an earthquake in Italy, and this is the dedication.

[SPEAKING ITALIAN] It's a dedication to some count of Venice or something.

And that was a pretty dark place after like nuclear meltdowns and stuff.

Not knowing where to move, not knowing if we can have go back to Japan at the time.

You just didn't know.

And I was looking at this and thought, this is beautiful.

This is a guy that dealt with his earthquake there, and this is really beautiful.

I like this typeface.

What is this? Why does this look so good? I had, I think, three pages of this.

And I thought, I'm going to research this typeface.

What is this type face? And I didn't find it.

I found it later.

Matthew Carter did something very similar.

But I didn't find it, so I thought, well, if it doesn't exist, why don't I do it? And that's how I fell into the rabbit hole.

One of 304 selected.

I think there are at least 3,000 versions.

This is reverendissimo.

This is the construction of this typeface.

But at the same time, I also made a thing called IABC, which is my own serif.

Just to understand how Georgia works, I did Georgia again, and then I did a couple of other typefaces again, just to understand how this actually works.

And doing my own typeface in a pretty bad state of mind, this is how I felt.

But fortunately, I have my boy next to me, and he was starting to do type design as well on the iPad.

Now he can draw things.

And I came up with this.

I was at some point very close to this in 2012.

And I thought, well, since it worked out so nicely with our iPad having different grades, I want to do the same thing with our website.

And the big motivation to finish this typeface was that no one lets me do it.

The typefaces out there, either they don't have grades, or they forbid being altered if they're nice, which I understand.

it's a lot of work to do a typeface like that.

I'm actually going to show you quickly how much work this is.

Here we go.

This is the Aleutian of IABC.

Looks almost finished here, doesn't it? It doesn't let me do this.

Why not? Sorry, wait a second.

I have to do it here in this window.

That's why.

So this is what happens.

At some point, I thought, well, maybe I'll make a sans.

It's easy to-- no, no, I'm doing a serif.

And then you start fumbling, and fumbling, and fumbling, and fumbling, and fumbling, and fumbling, and fumbling.

These are all hours, and hours, and hours of work of a completely bloody beginner.

And I'm citing Lucas all the time, but it's great fun.

Especially if you don't want to hear anything about reality out there, you focus on this thing, and you're like Alice in Wonderland.

And suddenly, letters that were somewhere between this size, they become gigantic, right? You can zoom in on a u or an o, and have it very close to you.

You can almost touch it.

At some point, I wish they were physical, so I could just rub the curve a little bit like this.

And you zoom out again.

You look at it from a distance, and you're big Alice again.

Zoom in again, and you're small Alice again.

Yeah, but that's nothing, right? It goes on.

I'm going to go quicker now.

This is what you do for hours, and hours, and hours, and hours, and hours, and hours, and hours, and hours, and hours, and hours, and hours, and hours, and hours, and hours.

It doesn't stop, and you never get bored.

That's what Lucas didn't tell you.

You never, ever get bored.

And then you think, when you're almost done, you think, why not make an italic, right? How difficult can that be? And in order to do an italic, I felt that maybe I could use my reverendissimo.

There were the letters I found in the book, because Italian doesn't have so many letters, and the rest I had to come up with.

Italian also doesn't have so many capital letters as German.

So in order to do the italic, I went back to my reverendissimo and started optimizing it.

I was such a bloody beginner that I didn't realize that this is not an italic and it can't be combined with some serif typeface.

It's ridiculous, I was in a special state of mind.

And I had great fun doing this.

But if you think that I'm done, no way.

So we're here at ABC regular six.

You can see how sloppy I am when you look at the names here.

Spitze latest Spitze ein, Zwei But you can also see how obsessed I am with this, right? I'm just doing one thing after the other.

So I'm going quickly here again.

These are days.

And in the end, I had an italic, and I had it in different grades.

And type designers went to Typo Berlin, showed it to a couple of professionals, and they were like, yeah, you can't show this to the world.

This is nice, I'm quite impressed actually.

You did this in a year? Oh, pretty good, but don't show this.

You're the Mr. typography now?

You're going to ruin your career.

And I say, OK, just tell me what's wrong.

And then they do what they do.

They take this red pen, and they're like [MARKING].

And it's all wrong, it's all wrong.

So I went and corrected everything, and send it back and forth.

A lot of great people looked at this.

I don't want to mention their names, because they don't want to probably be associated with this.

But I went quite far.

The hardest part though was not just making sure that the letters looked nice and worked together.

That's what I thought in the beginning it's all about.

It's actually the spaces in between.

It's the kerning, the spacing, and what shapes happen in between.

You get so obsessed with details that you start caring more about the things people don't see.

But at the certain point, I felt I have to finish this whole craziness.

This helped me getting out of this madness, this traumatic experience, because I was focusing just on shapes, on beautiful shapes.

And I learned so much about typography alone, so much about design as I never did before.

Now when I look at letters and I look at shapes, it's like listening to music if you're not a musician.

You're like, yeah, I know this.

I know this.

This is the certain kind of, [HUMMING].

I still don't have the vocabulary.

A musician would say this is C sharp or something.

I don't have that vocabulary really at hand.

And the same for dealing with shapes.

I think there is no vocabulary for these different kinds of shapes.

We do have emotions for these things, but we don't have the vocabulary.

But when you deal with this day and night with the letters so close and letters far away, you get to know form and content much better, and that's the beauty of type design.

There, form and content is really one.

I could go on and on, but I think I'm running out of time.

And if you have still some questions, I'm happy to take them.

Yeah, we made this, so our website now comes with responsive typography.

It has a different grade for a MacBook Pro.

It has a different grade for retina displays.

It even has different grades if you turn you're cell phone up and down.

And every time I look at it, I see millions of mistakes, and I know why people warrant me.

But the beauty is that only type designers will really, really see it.

You can easily find some spacing mistake, but only type designers will see how bad this is.

Most of you are not type designers.

Hope I'm not offending you when I saw that.

And you'd say, that's pretty good, that's pretty nice.

A lot of people liked it, so much they want to buy this, and this is not going to happen.

It's really too bad.

It'd be sub par to what we usually sell, especially the numbers.

I have to fix these numbers.

The numbers are so ugly.

So they're wrong.

The numbers I did it at the very end, because I said, well, numbers, I know numbers.

There's no big deal.

Been writing numbers forever.

And I found out that actually those so-called Arabian numbers are actually of Indian origin.

They call them Arabian numbers, but actually they're of Indian origin, and they have a completely different logic.

The shapes in there are not shapes we know, because these shapes I was talking about before, that are similar, like different kinds of music things, they're completely different in numbers.

They come from India, and they speak a completely different language, and I totally failed, but the thing had to go out.

It went out, and yeah, people kind of like it.

One day I'm going to get back into it, but I don't know, it's like heroin or something.

I'm kind of scared to open type design programs, because I know it's just going to suck me in again.

What I didn't tell you is that for almost a year, I did client work just like, yeah, that looks pretty good.

Go ahead.

That's good.

I have something important to do.

So almost cost me my position as CEO.

There was a little revolt actually happening, but everything's cool now.

And people also in the company are quite happy that we have our own typeface now, even though you can still feel it as a crazy person, or a person in a special state of mind that did it.

Thank you.

[APPLAUSE]

Post a comment