And I'm really excited to see this talk.

And I heard something about it being maybe around 500 slides.

499.

All right.

Get excited.

Please welcome Lucas De Groot.

Ah, different button.

Thank you.

So, in the meantime you can read what this talk is about.

It's still on, yeah? Thank you.

Yeah, I started making type, really, very long ago, when I was, like, 14.

Made type out of tin cans.

Of course, they opened.

They were tiny boxes.

That was just before my punk period.

And after it, I had my hippy period.

This is in the Noordwijkerhout, a small village in the Bloembollenstreek.

And here, see the church, the Victorkerk? It was cool, Bollenstreek.

And then I had my arty period.

This is in art school, in Den Haag.

And then I already investigated making lots of weights.

And a year later, I came up with the interpolation theory, so how to make a range of weights.

It has to follow some rules.

The interpolation theory says that, if you have three weights, you want to have the middle optically correct, then it needs to be a little bit less thick than 50%.

And I came up with these formulas to calculate this kind of stuff.

So if you have a lot of weights, you can use this formula, and you get these nice weights definitions.

However, it only works for the vertical strokes because the horizontal strokes, they are limited by the total height of the letter.

You see that the horizontal in the euro sign is much thinner than the horizontal stroke in the L.

So the interpolation curve is different for the topology.

We have the verticals following the nice curve.

But the horizontals, at a certain moment, they have to stop because they can't grow any longer.

If this interests you, go to my website.

A three dimensional model of how the interpolation works between a very thin and a very thick font.

And it's called the anisotropic topology dependent interpolation theory.

This is Consolas, by the way, with some character variations.

Let's see if my movie works.

Yes it does.

Oh this shows how the interpolation works.

The verticals goes smooth.

The three horizontals in the A-- they… wait a moment… You don't see them moving.

I see them moving here.

Or did you see them moving? Ah good, OK.

So the three horizontals in the A, they stop growing at the third.

And the horizontal in the U, it grows all the way up to the top.

Oh, you get the idea.

All right, so in '93, I went to Berlin because I fell in love with these beautiful Trabant cars.

I drove it for about 12 years.

It had beautiful curves, super.

And in 2000 I started my own foundry, LucasFonts.

And well, I made my fonts lighter, tighter.

People call me up and say, please, I need an extra, extra, extra condensed version of your font, which I don't like at all.

But it's fun to make anyway.

And of course families keep on expanding.

Greek, Cyrillic, even Arabic and Hebrew by now.

And the fonts get more complicated all the time.

We add different number sets, all kinds of funky stuff, all being called by open type features.

Of course, we have a catalog.

You can order one, at least if our catalog ordering software is still working.

And you can look at the fonts yourself.

Then we'll send out a catalog through our internal post office.

And then it goes through the Estonian post office because they are using my font TheSans.

We never sold a font in Estonia, but, well, who cares.

It's a nice post office.

And of course, you can also look at the fonts on my website.

Not all of my fonts are on the website.

There's new stuff being done all the time.

And yes.

I don't have a name for this font yet, or else I would probably sell it as well.

So now, to the main topic, hinting.

Hinting is a really extremely boring subject for type designers.

So I have to make it a bit more colorful.

Hinting, yes! Wow.

PostScript hinting.

PostScript fonts, you know, hinting is very easy.

We have the hints at the glyph level.

This is more or less all.

We define the stems.

We defined ghost stems, where the stems end at the top and at the bottom.

And in Fontlab it works like this.

This is the letter.

We add the stems.

We see the values here.

And we add a few ghost stems here for the top and the bottom here.

And that's about it.

And these interact with the alignment zones.

And the alignment zones are already the font level hints.

And they make sure that everything aligns in small sizes.

So, it's called vertical alignment control.

And they're called top zones, BlueValues, OtherBlues, wonderful names.

However, we can only have six of them, six top zones.

And that might have been OK when PostScript was invented in the '80s.

But today it's really a big problem.

Here are the top zones from an intermediate big family.

So the ascenders of the superior stuff, the superior numbers, the ascenders of the lowercase, and the x height of the superiors, cap height, figures, intermediate figures, small caps, lowercase.

We see that I already have 11 top zones.

And if I want to add Hebrew and Arabic, I need much more top zones.

And we can only have 6 stop zones.

It means that big PostScript fonts, stuff will start to jump onscreen.

Some letters are bigger, other letters are smaller, simply because I cannot define enough alignment zones.

Then we also have the family zones to make sure that, within a family, all the zones round to the same pixel size.

In this case, the light is rounding down because the zone is thinner.

So, after adjusting the family zones, it works nicer.

And then we have some nice parameters like the BlueFuzz, and the BlueShift, and the BlueScale that you can read all about.

It's a lot, actually, interesting stuff.

But you only have to set the settings, and that's all.

So let me introduce u to our hinting city.

Berlin is a really huge, big city.

It's a dirty city here.

I parked my beautiful car under the wrong tree.

You know, it's a Trabant.

It's not made out of metal.

It's made out of pressed cardboard.

So if you kick it, you don't get a dent, but it just breaks.

And on the 1st of May, we have a big party.

We can throw stones at the police.

That's my son, Floris.

I'm living in Schöneberg, the gay neighborhood, so in order to blend, in I walk around like this.

So I continue with the PostScript horizontal hints, horizontal font level hints.

It's called stem control.

We define the most used stems in the font.

So the most used vertical stem here is 98 units.

And the most used horizontal stem.

And these ways are really important.

Here's an example.

When they are not set correctly, the regular is going to 2 pixels at 18 point, and the italic at 19.

So adjust the values, and then they go to the second pixel step at the same points size, simple stuff.

So those of you who were awake in the last century, they might know about the first font war between PostScript and TrueType, between Adobe and Apple-- and Microsoft, of course.

Because Apple and Microsoft invented TrueType.

And this really was a big war.

And at the end of the war, Adobe had to give away their secret PostScript code.

And they printed the black book.

But they did a small mean trick because they wrote about the ghost hints in the book.

And they did something wrong because they say the ghost hints should be 20 or 21.

It's wrong.

It should be minus 20 or minus 21, which we can see today when we open up a font with the tools of today.

Here, minus 21 for the bottom zone.

And what happened is that the fonts that were made by other foundries following these specifications, they looked extremely bad onscreen.

See how does this jumping up and down.

So all Fontographer fonts were awful.

This is the Neue Syntax from Linotype.

Very expensive.

It comes in a cigar box with red felt inside.

And then you get this on your screen.

And a few years later, we had the second front war between the first tried to get fonts implemented in a way between the PFR, Portable Font Resources.

Probably you've never heard about this stuff.

But there used to be a big war, Netscape versus Explorer.

And it really took another 10, 15 years.

Of course, afterwards we had the cold font war, company Monotype eating up Linotype, and eating up ITC, and eating up Bitstream, and eating up MyFonts.

It's all one big soup right now.

Good.

The Rasteriser is the software that transforms the outlines into pixels on the screen.

And the Rasterizer, for PostScript fonts, is getting better all the time.

So we see here, the Adobe Type manager from, whatever, 20 years ago.

And they improved it a bit later.

They added greyscale.

And then, in the Acrobat Reader, they tried to do it even better again.

So in Reader 4, again, even better.

So within Adobe, they have several groups of people competing with each other, try to make the best out of the PostScript fonts, trying to find an even better rasterizer.

And you know, I could continue with this because all Adobe products, well, most of them, they all have a kind of different rasterizer.

And it's still being improved.

Some good news, since a few months, the PostScript rasterizer, the latest and greatest is integrated into FreeType 2.5.

So all devices that have the FreeType rasterizer, they can now display PostScript fonts really beautiful on screen, especially if you have tiny pixels.

In 1999, Microsoft came up with another great idea because they had seen that most flat screens have SubPixels.

And they said we can use the SubPixels.

And they invented this new technology called ClearType.

At the top, we see the old black and white display.

At the bottom, the ClearType display.

And here again, left top is black and white.

Right top is the greyscale anti-aliasing.

But Microsoft said, no, we have the pixel always consists of a red, green, blue SubPixel.

But we don't have to start on the red SubPixel always, like we did in the black and white times.

We can just start on the green SubPixel, on the blue SubPixel.

So, in theory, we can have a three-fold resolution in the x direction.

This is the theory.

So that's what I did.

And indeed, when you zoom in on the screen, it looks like this, or like this.

On the left, you have the black and white.

On the right, the ClearType display.

And really, it looks a lot better in the horizontal direction, of course, because the stripes are all vertical.

And when you make a screenshot of your screen, you get something like this because the SubPixels give these nice colors.

I love these colors.

It's great.

Well, this ClearType technology unfortunately only works with TrueType fonts.

And hinting TrueType fonts is really not easy at all.

I'll show you how to do it in font lab.

This is an ampersand.

And I start with a link on the grid with a value on it, and a link at the bottom.

It attaches an anchor to the zone, and another link there, and an interpolate in the middle, which also runs to the grid.

So the black outline is the designed outline.

The gray outline is the hinted outline.

And these gray pixels, which are really difficult to see.

The colors are a bit off, unfortunately.

But these are gray pixels-- it's the resulting image.

But you can look at the bottom right here.

This is also the resulting image in black and white.

So I add some interpolates to keep the form nice with all the rounding.

So this is kind of controlled rounding to the grid.

Some more interpolates.

And then, to keep this curve nice, I add some more interpolates here.

So these are all the vertical commands.

It's still quite simple and still not looking good, as you can see.

Time to save the font on my network.

Here it is.

Not very social, but it works.

Yeah, a short example in the meantime on why hinting web fonts is really important.

Find a nice website.

Find a nice website.

typecache.com,

you might know it.

They show fonts on the web.

But I zoomed in, and I saw, this is not looking very nice.

See, the top of the December line is very crumbly.

And here, I also saw something wrong.

The type cache word is not very good.

If you zoom in, you see there's this jumping.

The e is too big, and the tops of the letters are crumbling.

And if you zoom in here, you see that the top is really very blurry.

And here, the strokes, sometimes, are two pixels, sometimes are one pixel.

This is just because I zoom in a lot.

I have a huge screen, so I never watch the web at 100%.

Always Command-plus, Command-minus.

And a lot of fonts, it might look good, again, like this one.

So this is the stuff that can happen if you just auto hint a font, or if you don't buy a font, you just convert it to a TrueType.

And then you might get these results.

I also wanted to talk about licensing issues.

But I did some research.

But it's actually quite a boring subject.

Some foundry's, most of them, they sell you a license by amount of page views, or by bandwidth, one doing by unique visitors.

And then there's a limit on the amount of domains that you can use the fonts on.

And I don't want to go too much into this.

Maybe I put it on my website, or put it on your website, to look at the details.

It's too small anyway.

So I'll continue with the hinting.

The horizontal direction.

Oh, I forgot about this.

So I start with a round here.

It rounds to the grid.

Then a link referring to a table.

Another round, the width of the letter.

And then interpolate this one and round it to the grid, that one as well, and add some strokes, add some interpolates, as you've seen before, and all for the x direction.

And we see, at the right bottom, that, indeed, it's improving.

It's already quite good.

It's actually looking really good.

So this is the fully hinted ampersand.

The links are done.

A few more interpolates here.

Now, just one back.

We see here, still, a small problem.

This pixel, I want to remove.

So now I'm going to add a delta hint, which is a small kick on the outline right here.

It moves the outline a little bit so that this pixel here disappears.

So now we're going to the delta hinting.

Go to the next highest.

This was 18 PPM.

I'll now go to 17 PPM.

Add a few deltas.

We have middle deltas and final deltas.

The next PPM, 16, 15 PPM.

I have to go a bit faster here because this is hinting an ampersand in 80 steps, 11 point, 10 point.

You see, sometimes features move a whole pixel.

That's a middle delta.

So where are we now? 9 PPM.

And now, with the control table, I can do very nice things.

Look here, in 22 and 23 point, all the lines are one pixel.

And I might decide, no, I want to have them two pixels already at this size.

So I just add a value here in the table.

Change it to 22.

And then, at the top, look here.

It changes.

You can change the whole font by just changing a number, making it darker for a specific size.

That's the power of hinting.

Then I look at the big size, 23.

I see that the letters are really clean hinted there.

But the ampersand is still dirty.

So I need to do a bit more hinting on the big sizes of the ampersand.

another… value… So I add a few more deltas for these 23 point, 22 point.

I wish it would go this fast in reality.

20 point, 19 point.

The last size.

I'm almost done.

Super.

And now I look at the font in grayscale.

I'm not sure if you can see it here.

So this is now black and white rasterization.

And now I look at it in grayscale.

And what do we see? We see it's good.

But the v is disappearing.

It's way too light.

So what happened? I see that I hinted the v-- or actually, a colleague of mine did it, quite strong.

So the black and white pattern is good.

But now the grayscale pattern is way too light.

So I need to change this.

And by keeping the black and white pattern correctly, I need to make it stronger.

And I think you can see here that it gets a little bit darker.

So a lot of work.

To hint for grayscale is actually not very nice.

Another show of the power.

We see here, at nine point, that the x height is only four pixel, which is not enough for good readability.

So by adding a delta on the zone, I just move the whole zone upwards.

And all the glyphs, they jump to five pixel.

And suddenly, the font is readable.

That's cool.

At 11 point as well.

Low x height, I just raise it a bit.

And it has more impact.

It can be read better in small sizes.

And well, then this was just one letter in one font.

So then we need to hint the family.

We need to decide.

Where are the letters, one stroke horizontal, one stroke vertical.

Where are they two strokes vertical, one stroke-- well, you get the idea.

X 3, Y 2.

I think something is cut off of the screen.

Nevermind.

Poor hinting Floris.

My son.

Actually, it's also the name of a newspaper that you might have seen in the Vrij Nederland.

They're using it.

And this is kind of an incarnation of the font, a very wide slab serif.

This is the actual name, Floris Slab Wide SemiBold Roman High x-Height Short Descenders.

It's an awful name.

Yesterday evening, I thought maybe I should call it Floris LowRider.

I already have the movie for it.

And I want my son to become a good hinter, so I let him do pixel exercises in Minecraft.

He loves it, building stuff and crafting stuff, and actually learning quite good English by doing Minecraft.

Even my youngest niece, Renske, from Noordwijkerhout, had to make her own pixel font for me.

Beautiful.

So I love to come back to Holland.

And of course, I jump into the Albert Heijn and look for products that have my fonts on it.

And you know, it tastes so good with the mix on it.

You should try it.

And of course, in Germany as well, my kitchen is full with products with my own fonts in it.

So it's the only stuff I eat.

The sans italic, great.

Well, hinting is a lot of work, as you can see.

But there's a technique that makes it a bit more easy because we had this old technology called MultipleMaster in PostScript.

It means you have kind of a font object which goes from light to black and from narrow to wide.

My mouse is nervous.

So you only need the letter once.

And it's hinted for all the weights and all the widths.

It's really practical.

And then, many years ago, I needed to hint fonts for Microsoft.

And the regular end of both.

And I thought, my god, I don't want to do it twice.

So I wrote an email to Yuri [INAUDIBLE], the developer of my fonts over in St. Petersburg,

and told him I want TrueType MultipleMaster.

It does not exist as a font format.

But, two weeks later, he sent me an update in FontLab.

And there, I could do TrueType multiple master.

So I set the links only once.

And this is what Yuri did.

It has the TrueType points, TrueType multiple master.

And I make an instance.

And all my instances have these links already.

So it saves a lot of work.

But the real hinting work, we need to do it in VTT.

That's Microsoft software.

Official TrueType, much better than FontLab.

Hard to imagine with this old icon.

So I need to go on a PC.

And we here see the ClearType preview.

And there we have, this is already the hint at the anchors.

I just show this because it looks so nice.

Here we have the x and the y mixed.

And the interpolates, and the shifts, and it has much more possibilities than Fontlab.

It's really great software.

So much fun.

And if this becomes unclear, I dive into the code.

And I can change some things that I cannot see in the interface any more.

It becomes too much worms, too much spaghetti.

And I go in here.

And hardcore people go even a level deeper into the machine code.

And then we need to do to control table, which is just a huge file of text here with 1,500 entries.

And we can define our own functions.

And that's a lot of fun.

And then, of course, we also need to do the whole font, and all the sizes, and that's no fun.

So to recap, we have the black and white display, old fashioned stuff.

We have black and white with grayscale.

Then we have the ClearType, which only works in the x direction.

And then, some years ago, Microsoft came up with a combination of ClearType for the x-direction, and the grayscale rasterization for the vertical direction, seen here.

And this is really the best TrueType display that you can get at the moment.

I've always forgotten the name.

But it's in the latest Explorer.

However, it only works with ClearType displays.

And it doesn't work on a tablet.

Because, on a tablet, you're rotating your thing.

The SubPixels will be different.

So software makers decided to not use the SubPixel anymore and just switched back to grayscale.

And as long as the pixel is small enough, it looks fine.

But it's all stuff that we need to care about.

Now we need to rethink about the grayscale.

Then, in TrueType fonts we have a nice glass table.

And this we can say, between 10 and 15 points we have black and white.

And after that, grayscale is allowed.

And above 19 point, this vertical grayscale is smoothing into the font.

It's getting in.

So I also hint icons… I work for Miller, washing machine stuff.

It needs to look good on screen as well.

But I also use it as a design tool.

First, I designed the soap bucket.

And it needs to be implemented in pixel form in all these washing machines.

So with a few hints, I can get a good range of icons already.

I optimized them a bit with deltas.

And there they are, the pixel icons.

Another example of hinting as a design tool, let's see if I can open this.

Yes.

This is a PNG font.

So it's just a bunch of PNG files.

And this is a very special case because it's for Audi cars.

It's in front of the car in a small device, a small display.

And the designers, they had made mock ups in Photoshop.

And Photoshop blurs everything.

So when I came up with my hinted font, all the lines were 1 pixels.

And they said, oh, that's too thin.

In Photoshop it looks a bit thicker.

And then I sent them two pixels thick.

And they said, oh no, it's much too thick.

So then, I had to hint that these strokes to be one and 1 and 3/8 of a pixel.

So in black and white it's still 1 pixel.

And in grayscale, you see these half pixels here.

And here they are on the inside.

And I, of course, had to choose to make them on the right side.

And that was a lot of fun.

And they were happy with it.

So the font looks like this.

It's a transparent PNG files.

We don't see anything here, my god.

Sorry about this.

So what I see here is the Photoshop background, the check board, with some white shapes that are the letters.

And on a dark background, it looks like this, the hinted letter.

And I'm not satisfied with this because I think that the left stroke of the A is a bit too thin.

And I zoom in here.

And in the hinted stuff, I see, yes, it's rounded to 4 pixels.

It's a pity, the pixels are not visible.

And it rises to 5 pixels, rounded to 5 pixels.

So I add a few deltas, and we see the result. Yes,

it's better.

The end has too much overshoot.

And the horizontal stroke is rounded up.

The verticals is rounded down, not good.

So before and after.

I changed the contrast a little bit.

The E is not good.

The top and the bottom horizontals are too thick here.

And this one is rounded down.

It's too thin.

So what I do is, I have two big screens in front of me.

And I decide about 1/8 of a pixel on this big screen.

Here, add a few delta before and after.

And it looks much better in small sizes.

So a few years ago, I decided to buy some FontShop to see what all the foundries were doing with their hinting.

It's this unit web, specially designed for the web.

This is Safari browser.

Looks good, of course.

Microsoft's latest browser also looks good with the ClearType, then, on Mozilla Firefox, on a little bit older PC, it looks quite not good.

And in Chrome, quite fuzzy.

So I zoom in a bit, Macintosh again, Safari, Explorer, very nice.

And in big sizes, this is awful.

And I found out that they only hint in the vertical direction, not for the x direction because they've figured out, well, most computers are using the SubPixel technology these days.

So we don't need to him for x direction.

But still, a big percentage of the web is using Windows XP.

And they get to see this result.

My own fonts fonts, let's see, how the time is coming.

Not good, I'll hurry up.

My own fonts, I see a lot of mistakes.

But I also hinted for the x direction.

So it's much cleaner.

Well, you can see it.

You get the idea.

So I'll move on a bit faster.

This was the Thesis family.

That started out as a big family already in '94.

Back then, there were 144 PostScript fonts.

But it has grown since then.

Then there were 8 weights.

Now there are 17 weights.

Here they are, from the thinnest hairline that doesn't display even, well, on the beamer here Then there was one width.

Now there are 9 widths.

9 widths.

Extra, extra, extra condensed.

Back then, 580 glyphs.

Now, almost 6,000 glyphs.

Arabic adds a lot of glyphs.

Hebrew.

So it figures.

Oh, you get the idea.

So, I have to keep track of the amount of fonts by using big tables.

Also, I have redesigned the font.

I see a lot of glyphs that I don't like anymore.

So I am still making these sketch things and improving stuff.

And sometimes, customers coming up and say, oh, I don't like the r.

Can you make us a new r? And I say, sure, no problem.

The @ sign wasn't very good.

People didn't like the q.

So I have made at least five different q's.

The right one is now the default new q.

And this is the evolution of the g.

The top left is 1993.

The right bottom is 2013.

And it says allemachtig prachtig, if you can read it.

Apple doesn't care about hinting at all.

They don't use the hinting on their computers.

Don't need it on a retina display anyway.

But here, I wanted to install QuickTime on Windows.

And we see that the Windows interface is extremely clean in this size.

But the Apple software is extremely blurry, simply because they have never realized that the Windows operating system is totally scalable and that, on a big screen, you set your type to medium instead of to small.

And then everything gets scaled.

And a lot of stuff goes wrong.

Good.

Some more LucasFonts.

Serif fonts are a big problem because the serifs, in small sizes, are as big as the strokes.

So they don't work that well.

Hinting components is fun.

First I hint the glyph.

And then I hint the component.

And that's about it.

I combine them, but I see that it's not centered.

So I can add a line of code here, a call that centers the accents on top of the O. It's too much work.

I have only done it once.

And then I thought, no, no, no.

Don't exaggerate.

The Taz family has also been hinted quite well.

It's been growing a lot here in the last years, especially the fat ones.

Italic, black extended, super.

And we are the only type design company that can drink coffee with the name of their own font on it.

Because Taz is also a newspaper.

And they bring out their own coffee.

And I designed a font for the newspaper.

And we drink Taz coffee all the time.

So let me introduce you to our hinting office.

Here it is.

This is our hinting garden, with tulips of course.

This is the team that worked on the Calibri light last year, or two years ago.

Here's my Russian hinting slave.

[LAUGHTER] Hinting a Croatian d.

His hinting notes.

I have a hinting programming slave helping me to convert the hinting from Fontlab to VTT, so we don't have to do it twice.

And we're also working on the next office.

Stuff like this a few months ago.

This is just one month ago.

So we're about to move in the next few months.

And when I have enough of hinting, I go to my basement.

I cut a few letters out of foam.

I have a hot wire foam cutting machine.

And I fill up the letters with concrete.

And so, what you saw before, this is the ultra heavy ampersand in my garden.

A colleague of mine compiled a bit of information about web fonts.

Some examples of other colleagues that are really nice.

So lucasfonts.com/webfonts.

I suppose you're all on the internet, so it's a bit slow right now.

I'm done.

Thank you.

That was great.

That was great.

Thank you.

Wow.

Wow.

Wow.

499 slides in record time.

That was really awesome.

There's a lot of curiosity around the process of creating a font-- Of hinting a font? Of creating a font.

Of creating, all right.

So, to start off, kind of, how do you get the inspiration for new fonts? Like, inventing a totally brand new font seems very difficult to imagine.

Well, when doing topography, of course, I first would look at an existing font to see if something fits.

And I've had several occasions where there was nothing that would fit.

For instance, the Taz, we tried to redesign a newspaper.

And we couldn't find a proper font.

So in the meantime, I started just sketching and doing something from the guts.

Actually, that's probably the best explanation.

It's coming from the guts.

When you're deep in the type design process, what is the most time time consuming part? Is it the hint? No it's not.

You know, the design process is actually quite small.

You get the idea for a form language.

That can happen in just a few hours, by sketching on paper.

And then you need to make the first 250 glyphs to complete the fonts so that somebody can use it.

And then you might need to make another weight, or more weights.

And then you expand it into Greek and Cyrillic.

And then it gets really a lot of work.

It took me six years to learn Greek.

It took me six years to learn Cyrillic.

And I spent seven years on Arabic.

And I still don't know how to do Arabic right now.

So expanding it into global fonts, that really is a lot of work.

And then the hinting is just a piece of cake.

OK.

I believe you.

How much is there an ability to use any sort of automation in creating a font for either, like, kerning pairs or anything? Is there anything that software can automate? No.

There's a lot of autokerning software.

And I tried a lot of them.

And they are all totally shit.

So I would never-- you can autokerning in InDesign, and it's awful.

I could have shown some slides before and after.

So always keep your InDesign stuff on-- somebody is calling me.

There's a lot of curiosity around how this stuff plays out in the browser.

So first up, how does high DPI screens and retina screens affect hinting and affect typing.

Very good because, on retina displays, we don't need hinting anymore.

I'm totally happy.

That was my-- So it's just not even necessary.

No, for retina displays, it's not necessary.

So hopefully it will disappear.

Hopefully, the whole world will have retina displays in five years.

Then the problem will be solved forever.

So you mentioned Mac OS X just completely throws out the hinting information.

So that captures iOS as well.

Do you know what story is on Android? Does Android use hinting data? Yes, it does.

Android uses hinting.

So TrueType fonts can look really crisp in small sizes.

Because I do know, I think, Google web fonts and maybe, I think, TypeKit as well, when a request comes in, they detect, you know, if it is OS X, they serve an asset without the hinting data at all.

So the payload is smaller.

Yeah.

OK, so interesting.

Can you take a stab at explaining why type looks different between browsers and platforms? I think Windows and Chrome is one that comes up a lot compared to Safari on OS X.

Why is it that the same font file looks completely different in many cases.

Well, that's indeed the hinting.

On a Macintosh, type always was looking too dark.

So we've sold a lot of fonts, and then the customers come back and say, oh, the font is too dark.

Can we get a lighter weight.

That's just because-- and then we tell the customer, oh, please take a look on Windows.

Oh, the font is OK.

So it must be the Safari browser.

And the reason is, of course, that Apple doesn't use the hinting.

And their algorithm wasn't very good.

I don't know if they've improved it.

Of course, I can't see it on my retina display.

It just looks awesome.

You know, I use my retina display in native resolution.

So I have 3,600 pixels.

It's cool.

Everything gets small.

So I've actually seen this as well, people complain about ClearType when it's enabled.

And for instance, actually, Chrome, recently changed its policies.

So any web font, Chrome immediately forces on font smoothing for that typeface.

And a number of people were very upset about this change because they prefer font smoothing to be off.

Are they wrong, or are they right, or is it just all preference? Well, the first version of ClearType wasn't very good.

Because it only improved the x direction.

In the y direction, we still had these jaggies.

We had the tops and the bottoms of round elements, which still have these ugly dark stairs.

So only after Microsoft decided to do the vertical anti-aliasing, it started to look real nice.

And they wanted to do it in Windows Vista already.

But some jerk decided to do it later.

So I think that set a lot of bad mood along people looking at ClearType.

You showed a few type specimens.

And then, when you showed the letter pairs across languages, that was awesome.

Is there any sort of specimen text that takes into account the common letter pairs so that, like, we as developers can kind of test things out and see what the common-- I mean what a common.

I mean, everyone basically uses lorem ipsum.

And I don't know if that is representative of what real type looks like in either Dutch, or English, or German.

Not that I know of, no.

I've turned this research into a filter.

So if I have a class kerning, it expands to half a million kerning pairs, then, some font technologies, they cannot cope with this.

So they only need to have like 1,000 kerning pairs, or 2,000 kerning pairs.

And then, with my filter, I can say, I want kerning for Estonian, for Latvian, and for, whatever, Russian.

And then the software filters out only the pairs that are needed in these languages and throws out the rest.

So I can make a very compact kerning table just for a newspaper project.

And of course, kerning is bloating up fonts in the web.

Most web fonts come without kerning.

And if we really add this big class-based kerning, it really adds lot of data on the font.

So it's something to really be careful with.

Yeah, I can imagine.

The last question I'll ask, I think a lot of people in the audience were just like, wow, that's a lot to take in.

And so how does one get started in type? How do you begin to even start designing your own typeface, and move in to this field? That's a bit of a-- my mother told me that I made my first type face when I was six.

We had a flat toilet.

And I was making really shitty letters in the toilet.

And I was really proud.

Mama, look.

I made a p today.

So that's how I got started.

Sorry.

[APPLAUSE] Yeah.

I think that'll do it.

Thank you very much.

You're welcome.