Waiting..
Auto Scroll
Sync
Top
Bottom
Select text to annotate, Click play in YouTube to begin
welcome so uh room five last session on Thursday is not mik stype talking about advanced graphql stuff um so if anyone was hoping to learn anything interesting about how to query your your web-based
apis and stuff uh I mean stick around anyway I can't tell you how to make the queries work but I will tell you how to make the results look pretty because uh this talk is uh a late change to the schedule I found out I was doing this
about an hour ago and this is it's from Hot Metal to HTML the story of typography and you know that because I have this title slide and uh now I may be assuming that everyone in here can see and read English and everything and
this slide doesn't really say a great deal what if I'd come up here and my title slide look like this now it's the same words in the same letters in the same alphabet but this sends a slightly different message doesn't it this is
like oh he's British he must be from the times of London let's see what he's going to say about it and if I put this up the people in the front are going wow this guy is really cool look at that and the people at the back are going what
does that say or uh I could put this one up welcome to the castle of King Henry or this one full metal jacket or even
this one the Norwegian death metal font which is brilliant I mean you don't know what the talk is who it's by or what my email is but you know it's going to be angry right or we could go for Comic Sands the
world's most misunderstood type face and all of those just the choice of font sends a a different kind of message about who I am and how I am expecting
you to receive the information that I have displayed up here for you and when we come full circle and we go back to this one this one kind of doesn't say anything this is very very neutral and this is neutral by Design This font this
type face is called frutiger and it was created by this guy Adrian frutiger one of the greatest type designers of the last century and he was hired to create a font for the signs at shardul airport
in Paris in the 1960s and uh frager's perspective was that some fonts are supposed to be memorable they are supposed to be decorative but if you are putting up signs in an airport that people are
relying on the font shouldn't matter he had this quote on it he said uh if you remember the of a spoon with which you just ate some soup then the spoon had a poor shape and if any of you have been
like you know that's a bad spoon like as a tool it doesn't really work because it's trying to be pretty and this was the kind of perspective that he had on that uh that frutiger type face and this
is the story of typography of how we human beings got to a point today where all of us uh whenever we send an email when we create a web page when we put a button on one of our web applications there's a font and those fonts send a
message about who we think we are and how we would like the world to perceive us so how did we get here well we started out here about 5,000 years ago ancient Mesopotamia the river valley between the
tigis and the Euphrates in uh this is now Iraq and uh this is a really interesting point in human history because uh this is the first time ever that we had first world problems because
what has happened here this is an incredibly fertile Valley the far Land There is really good and so for the first time in history people start growing crops they stop moving they stop hunting and Gathering and foraging and they start actually cultivating land
they start growing food and for the first time in history we have humans who have more food than they need now this never happened before and uh the priests in the temples look at this and go this
nice pile of food you've got there why don't you give it to us and we'll keep it safe for you in the temple and then when the winter comes round if you don't have any food you come to us and we'll give you some food and of course this meant that the priests had loads of food
and they never needed to worry about anything but very rapidly after this system was adopted it was decided that it would be a good idea if they could keep track of who had given how much
food to the temples to look after and so people started making marks in clay tablets to record how many cows how many sheep how many bushels of grain by who
and when had been logged in these temples now there is a huge amount going on here human beings have had spoken language for probably tens of thousands of years by this point we don't know exactly but language is developed people
already have Concepts like uh debt and credit and loans and something being due five days from now things that are difficult to make marks to communicate in the surface of a piece of clay so
we're going to play a little game now this a real easy game we're going to get some audience part participation going what I'm going to do I'm going to show you a picture I'm going to count 3 2 1 and when I get to zero I want you all to shout out the name of the country that's
in that picture okay and to start out with a nice easy one you ready 3 2 1 Australia very good Australia let's take a look at another one 3 2 1 SW
excellent three two one Paris Paris is not a country but at least not yet but no I mean you got it you got the meaning that communicated the correct
you were thinking in the right place just not thinking quite wide enough at this one 3 2 one very good this one 3 two
one yeah I realize it's bold putting that in a Portuguese conference but here we go how about this one 3 2 1 Thailand is the correct answer 3 2
one one more 3 2 1 Canada excellent we got some people read Japanese can in Japanese now these These are
pictograms and pictograms are when you you communicate an idea by literally making a picture of the thing you want to talk about if the aliens arrive from alpha centory there's this lovely quote from Bill Bryson if you were giving
aliens directions of where to meet in planet Earth you tell them to find the big round flat thing with the hole in the top and meet at the bump in the middle and they're all going to land aturu in the middle of Australia if you look at Australia from space it's that shape you recognize it if you have been
to Paris or you've seen pictures of Paris you recognize the Eiffel Tower it's very visually distinctive now a lot of modern pictographic language comes from the Tokyo Olympic Games
1964 because this was the first time Japan had hosted a really high-profile International Event and most of the people the athletes the journalists The Spectators who were coming to Japan for the games they could not read or speak
or understand Japanese they couldn't even make sense of the alphabet and so the organizers of the game designed a set of symbols to help people navigate around this a if you're hungry knife and fork if you want to get something to
drink there's a cup of tea if you're looking for the showers in the Olympic athletes Village you follow the pictorial sign for the shower there now this idea of pictographic writing this goes all the way back to ancient Babylon
when the scribes would make marks in a piece of clay by literally drawing a picture of a cow's head to depict the fact that there was a cow had been lodged with the temple and the priests owe you one cow and as this became more
and more popular they kind of stopped drawing all the details and the cow turned into this and then at some point it got rotated 90° there's a theory this is cuz when you're writing in wet clay
you want to turn the tablet so that you don't get it smudged on things but this ended up being rotated a little bit and Trad started to spread and we got to a point where there were people who recognized this sign as meaning a cow
who had never seen the original they're just like oh yeah the sideways with the line threat that means one cow has been lodged with the temple and the pictorial connection had been lost now this point we've progressed from pictograms to
ideograms it's not a picture of a cow anymore but this picture stands for the idea of a cow if you've seen this picture we've all seen this picture this picture is in every online collaboration and uh you know video chat applic this
is the chat icon it's the thing you click when you want to talk to someone now nobody has ever seen a chat bubble in real life I don't have a little thing above my head right now with words appearing in it maybe when we all buy our Apple VR headsets that's going to be
a thing it's not there yet nobody's ever seen this it's not a pictogram but we all understand it because comic books is a kind of culturally Universal Convention of having speech appear written in these kinds of bubbles now I
love the fact that this visual language is still evolving there is a symbol that within my career as a software developer has gone from being a pictogram to being an ideogram and it's
this because when I first started using word 997 that was a picture of the disc that you saved your work on and now that symbol has survived that's still in the toolbar there are people out there who
have never seen a physical floppy disc but they know that click that button means save your work and there is a lovely and possibly apocryphal story about a little girl who found a stack of floppy discs in her mom's desk drawer
and comes downstairs going Mommy why have you printed the save button now the thing about ideograms is that they are to do with context you need to know what they mean but also you know this goes back to what Eli was
talking about in their keynote yesterday you need to be sure that the person on the other side also knows what they mean now I'm in 43 different slacks right now because I'm in slacks for conferences and clients I consult with and I'm in a
bunch of different chats and things and uh I can put a question in one of these slacks that hey it looks like the media cdm's gone down there's no images are loading anyone know what's up with it and someone replies with eyes now I've
been in teams where eyes means I am looking into this for you right now give me a few minutes I've also been in teams where eyes mean I'm watching this cuz I also want to know what's happened it's like sitting back there eating popcorn
yeah I can't wait to see what's going now those are diametrically opposite meanings in terms of what do I do next you know do I wait and let them deal with it or do I try and find someone who can help with the problem now slack
officially says that eyes means let others know have you ever seen this documentation before yeah this is apparently officially what these mean but that meaning has not gone on and uh if I send
my girlfriend a photograph of me and a bunch of you later in a bar doing Jaga Meister shots I will get back eyes and it will not mean I am looking into this for you now it will be oh what have you
done now one ideogram that uh or one kind of ideographic thing that came out of the Tokyo Olympics first time this had been used 19 64 was this symbol which people very rapidly figured out means something very important that you
do not want to draw an accurate picture of it might get the meaning across but let's not even go there but these symbols have meaning because we've learned them we know that that means the bathrooms we know that means Norway that
means Spain that means the Olympics it has to be drummed into us we have to learn this back in ancient Mesopotamia the trade routs are spreading ships are sailing from uh the Babylonian Coast
they're getting as far as Greece North Africa Rome bits of what is now Italy and this cow has been turned another 90° that one has gone missing and people have stopped using it to stand for cow
instead they are recognizing this as the first sound in the Hebrew word Alf which means a cow it means cattle and so this shape doesn't mean cow anymore it means the sound ah and then there is another
symbol in here or another word in Hebrew start out as this Beth it's a house Bethlehem in the Bible in the story Bethlehem literally the House of Bread in Hebrew and this symbol got simplified
to this and somewhere along the line that one got rotated as well and then the ancient Greeks got hold of Alf and Beth and when that doesn't sound Greek Alpha and beta that sounds Greek and this is how we got the alphabet but this
was a paradigm shift in how useful written language was as a way of communicating because suddenly we had a way of writing down sounds we had this we had what are called phonograms where the symbols represent noises so any word
we know how to say in theory we know how to write it if you have ever tried to read written Danish you know that this is still not actually true but it's a good theory now at this point we're going to
fast forward a little bit we're going to jump forward to uh around about the first century of the Common Era first century ad and uh there's a bunch more stuff we want to invent here now uh the
earliest writing system something that I find quite amazing is that in about the year 100 AD we had paper and we had books and we didn't have paper books for
another thousand years because paper was invented in China in the first century but in China they didn't print books the technical term for a book is a codex pages with two kind of hard covers around it so in China they had paper
Scrolls for about a millennium and in Europe we had codexes printed on Vellum which is parchment it's leather parchment and so it took about a thousand years before these ideas were sort of match together now the uh
invention of mechanical printing is a really big deal in the history of communication and typography for a long while there if you wanted to make a book what you had to do is find another book that had the book you wanted in it and
take it probably to some monks and say can you copy this for me and they would copying say the Christian Bible took about 2 or three years books were incredibly rare they were incredibly expensive most people couldn't read most
people couldn't right and so the scarcity was self- sustaining people weren't literate therefore there was no markets there was no incentive to drive down costs to streamline production now the uh invention that is generally
creditors of changing all that was a thing called the movable type printing press now uh the history that you learn in Europe says that movable type was invented by johanes Guttenberg in M
Germany one afternoon in about 1546 kind of not like he took a bunch of things that already existed kind of like how Steve Jobs didn't invent the iPhone what he did is he had a bunch of people who took technology that was already
being developed in the society around him and yeah came up with a brilliant new way of synthesizing all of this technology into a new kind of device um Guttenberg invented the printing press by combining some ideas that had already
been uh kind of ratified in in medieval China he took a bunch of ideas like using a press that was used to press grapes to make wine and he combined them into something that would revolutionize printing now to understand why you know
the inventor of movable type why is this a big deal well to do that we need to understand what is type and why was making it movable exciting uh there are not enough words for all the stuff that we do if the type of type equals type
you type your program here this is a perfectly valid piece of English but the word type is massively overloaded we talk about strongly typed languages weakly typed language so strongly typed if you don't know is when you push the
keys really hard that's strongly typed and and weakly typed as when you're like doing this and you know we talk about typists and typing and data types and record types and all these kinds of things but the word type all these derivations come via printing from an
ancient Greek World Greek word ttin which means to punch something to strike something and a piece of type looks like this this is a single letter of a single alphabet that has been painstakingly
carved in metal and uh the first kind of origins of this is a guy called bang and uh bang Z the year 1040 ad bang created the first industrial printing movable type system in China history has
basically forgotten this guy certainly in the west but there is a crater named after him on the moon which I think is pretty cool and his system used a ceramic the the tight pieces were made out of cast porcelain and it used a
combination of wax and Ash as a printer ink it worked up to a point but the porcelain tyght pieces would wear out so any piece you made you'd get a couple of Scrolls out of it then you'd need to make another one Johannes gutenberg's
big idea was to make the punches out of steel so you'd start off with the punch this is the one on the left now these things once you got one of those you hit this thing with it this is literally a stereotype this is where that word comes
from is you punch that and it creates the counterpart it creates the other side of the pair and then you use the stereotype pipe to churn out loads of these These are cast in a Thing Called printer's lead it's a soft metal with a
low melting point you churn out a whole bunch of these and then you arrange them in a matrix you clamp The Matrix shut you smear it with ink and bang you get a page Guttenberg is kind of remembered
for producing a thing called the Gutenberg Bible this was uh you know one of the first books ever to be Mass printed using his techniques there now he printed around about 200 Bibles there
were we think 200 Gutenberg Bibles fewer than 200 were ever printed over the course of about 5 years jump forward five centuries from 1450 to
1950 within the United States alone there are more than 50 million newspapers being printed and distributed every morning and they are doing it using the same technique as guttenberg's
movable type press they're just doing it on a scale that we couldn't imagine now the of Heyday the peak of print journalism and mechanically printed media was all done thanks to this
machine a thing called a linotype if you ever get the chance to see a linotype machine working I promise you it will be one of the coolest things that you have ever seen they have one this is in ambery which is about an hour south of
London in England and I went down there a couple of months ago and I took some photos of that machine and stuff now this thing is it's just unbelievable it has a cruci of molten lead hanging on
the side of it it has a keyboard it has a handbrake it has all of these incredibly precisely machined parts and the key to it all is this thing here it's a linotype matrix and if you look
closely you can see the letter stereotypes on this thing and you can see this little grooved pattern at the top looks kind of like your front door key for your house the key there at the top that is a sbit binary encoding
machined into Hardware now now there is a wonderful visualization Sylvia itel created this for a museum in Hamburg and this is how the Lino type Machine Works you've got your keyboard across the bottom
here so you punch a bunch of keys on the keyboard and every key you punch one of those matrixes drops down out of this magazine down one of these little things one of these things gets jammed or stuck it's never going to let you down and
then the cartridges are moved across here into What's called the mouth piece this thing is then opened up to The Crucible full of molten lead and molten metal is squirted through the mouthpiece
into that Matrix takes a couple of seconds it CS down what you get is a printed slug of molten metal you take a bunch of those rack them up that's your column of newsprint ready to go off and
be printed but then what happens is every one of those matrixes is returned up to the top of the machine there's a thing called The Collector cranks them up to the top and threads them onto this bar and the bar at the top here this
thing is the distributor and the distributor has that binary code encoded into it as a set of gaps so every letter drops into exactly the right place in the magazine now this magazine here
weighs about 60 or 70 kilos so if you want to change fonts this isn't a drop- down list you got to get a friend to help you carry the magazine and get another magazine out and bring it back
and uh at the end of the process one of the things that they have down in the print Museum in Amy this is the the Lino type matrixes from the last edition of the Sunday Express Newspaper to be
printed in England using this technique you'd print this you'd take an impression of that and you'd use the impression to make a single cast on a revolving steel drum and that's the thing you see in the movies when it's the presses and the newspapers are
rolling that is the press that's the thing that does the rolling now these Lio type machines they are fantastic they are masterpieces of engineering um Thomas Edison once said that the Lino
type combines the power of a locomotive with the Precision of a wristwatch and he wasn't wrong you know they're astonishing things back 1970 there were over a 100,000 of these machines in use around the world at the moment I don't
think there is a single operational one in Europe I know about four of them and they're all broken right now because the guy who fixes them hasn't gone back out on the road after the pandemic there's one in Berlin in Germany there's one in Hamburg there's one in ambery there's
one in the science museum in London right now none of them's working there's a guy in the US who restores them but we're talking fewer than a thousand of these machines survive so what happened that took us from a 100,000 linotype
machines to fewer than a thousand now the linotype corporation that survives today the machines no no no no one needs the machines no one needs the lead no one needs the Slugs the matrixes but
linotype owned something else linotype owned the fonts and as we're going to see in the second half of the talk it turns out that even when you take all of the wonderful mechanical engineering out of the equation the fonts are still a
pretty big deal now when we talk about fonts and type faces what we are talking about we saw at the beginning is a whole bunch of decisions about how you are going to draw the letters of your alphabet you take a vertical bar like
this well is it going to be just like a rectangle like this one maybe we're going to round off the corners maybe we want this to be kind of a little bit oblique a little bit like it looks like it was done with a pen maybe we're going to draw a crossbar across the top of it
we're going to turn this into a something like a capital letter T so we stick that are they going to be the same size the same height the same width how tall is our letter going to be this sends a message it creates an illusion
in people's heads are we going to go with fine type are we going to go with heavy type are we going to go with fine type in One Direction heavy in another Direction maybe we're going to hang little fril bits off the corners here maybe we're going to round the shamers
on those frilly bits maybe we're going to combine them and we're going to have block SS is the technical term for this kind of thing all of those decisions just to draw a capital letter T we're going to draw a y what does the tail look like is it got a little hook in it
is it going to be shaped like a bucket or like a bowl is the letter O going to be a circle or maybe it's going to be a rounded square or maybe we're going to make the letter O into a thing but we're going to make the hole in the middle a slightly different shape we're going to make that oval we're going to stretch it
we're going to slant it we're going to make all of these decisions that affect the way people perceive the type we're going to establish some conventions we've got an O Okay so the O's going to get reused in the P we got a letter e
how tall is it going to be where is this crossbar going to go is it going to be at an angle maybe we go all the way and we make this look like it was drawn by hand we make it look like a handwriting font now most of the type faces that
companies like linotype originated were designed by hand this is the original handrawn design for what I think is one of the most beautiful and enduring type faces in history does anyone recognize
this from anywhere it's the London Underground it's called Johnston and it was designed for the London Underground Transportation Network um Johnston is distinctive because letters like the C and the queue they are perfect circles
that's how you can you can spot Johnston it uses circles and this was hand drawn by Edward Johnston and then handed over to the machinists who would make the types the type punches for producing this in all the different different
fonts and weights and sizes and then that would be used to do the printing now while all this stuff is going on a revolution is happening somewhere else behind the scenes now the earliest
computer systems typography wasn't really something they were concerned with because they didn't have the capability to do very much the earliest computers this is the earliest computer I I could find that had a screen but the
screen on this this is I think a pdp1 the screen on this was basically an oscilloscope and for anything important you use the typewriter now we're going to take a little diversion here into the incredibly misogynistic world of
electronics in the 1970s because this is Radio Electronics the magazine for men with ideas in electronics from uh 1973 and this had an article by a guy
called Don Lancaster about how to build a television typewriter now a TV typewriter is a particularly useless piece of technology because you push a key and it puts the letter on a screen you can't edit it you
can't save it you can't print it you can't email it all it does is it puts the letter on the screen so you can see what keys you pressed and then you switch it off and thank you for playing television
typewriter but a lot of the ideas and the techniques and the circuits that were pioneered on these kinds of projects would end up driving the first wave of bitmap character displays used
on personal computers now the period we're talking about ASI has been a standard for about a decade asy is kind of 1965 so by the mid1 1970s we knew ASI we had that that was International and established as a good idea we had asky
table so what actually happened when you were on your mini computer in the 1970s you press the letter a and what happens that sends the asy code 65 into your machine's firmware and then it uses 65
to look it up in a thing called a character generator which is just a big dictionary of numbers and it says well 65 maps onto to this anyone know what that number is in binary it looks like
that and the number doesn't matter because what that number is is a bit map we take that number we cut it up we Shuffle it around and then we say right the ones are solid and the zeros are blanks and that is literally how the
letter A gets drawn on your screen on ROM based character mapping systems and if you go online you get into the terminal emulation stuff like you get the the open source vt220 terminal emulators people have reverse engineered the chips to get exactly the right
bitmap fonts out so that they can make them look as authentic as possible now while all this bitmap font stuff is going on there is a a guy called Donald kth who uh is producing his uh you know
great Masterwork the art of computer programming now you know the thing when you're you're doing a piece of work and then you kind of get distracted and you go down a rabbit hole and you're like oh I don't like my email I'm going to see if I can change the color on my email program and you spend 10 minutes goofing
off kth was halfway through writing volume one of his book and he went I don't like the fonts and he took a 10-year break down the rabbit hole to invent the first computerized type setting system which is called Tech now
uh Tech produced wonderful high quality output but you didn't know what it was going to look like you took your Tech Source Code which looked like this any of you folks written in Tech or worked with it I think hands down if that
wasn't just for that one paper at University that you had to do in Tech yeah I I did like one semester of tech and then I was like word is a good idea I like this because Tech's big problem is this is what you saw and this is what
you got and you didn't get that until you'd sent your Tech files to an industrial type Setter who would charge you a lot of money and send you back a manuscript and you'd be like oh I made a spelling mistake that's going to cost me $1,000 now we had these two worlds we
had bitmat fonts and we had this kind of type setting and when you look back over the history of Technology there are two things that I find astonishing one is the sheer number of things that we right
now we just take for granted that when they first came out they were mindblowing they were unbelievable nobody had seen anything like this ever before and if you make a list or if I make a list of all the things that I
think are astonishing according to this definition a surprising number of them all originated from the same company and this is where we find out if the audio is going to
work today we celebrate the first glorious anniversary of the information purification directives we have created another's time in all history a garden
of pure ideology where each worker made blue secure from the pests ofing contradictory our unification as of WS is more powerful a weapon than any Fleet
or Army on Earth We Are One one people with one will one resol one cause our enemies shall talk themselves to death and we will bu them with their
own confusion we shall Prevail on January 24th Apple computer will introduce MacIntosh and you'll see
why 1984 won't be like 1984 that's a computer commercial directed by Ridley Scott that was shown at the super bowl
half time in the 1983 probably the most expensive commercial television slot you can get anywhere in the world Apple did not do things by halves now the Apple Macintosh had a whole bunch of stuff
that wasn't like anything anyone had seen before including a visual display it had bitmap displays it had a mouse it had windows and it had fonts and apple did not want to pay the lot type
Corporation for their fonts so they hired this lady Susan care to design the type faces that shipped with the Macintosh now some of those were kind of an obvious tribute there was one called New York which was like a times because
New York Times and uh there was one called Swiss which was obviously based on helvetica and some of them were original there was a font called Chicago was the system font on the original Apple Macintosh and then Chicago got a Renaissance about 20 years later because
it was the default font when Apple first launched the iPod now the most powerful computer that you could buy from Apple in 1984 was not actually a computer it was
a printer the thing on the left here the uh Macintosh this thing has an 8 MHz processor this thing has a 12 MHz processor this thing has a 52k of ram the thing on the left was I
think upgradable to 2 megabytes the laser writer costs something like $8,000 for the printer but this was because it could do something no one had ever done before the Macintosh supported
a system called postcript postcript was a page description language for rendering high quality Renditions of documents the final missing piece of the puzzle you had your desktop display you had your Apple laser writer and you had
page maker you had the first desktop publishing application which meant for the first time in history you could lay out a page on your screen that looked like it was going to in kind of clunky
bitmap fonts you could print it and get a highquality proof you could be like that is going to look good and then you could send that file to an industrial type setting Bureau and they would go and run you off 10,000 copies of this
now the problem with bitmap fonts those character generator ROM fonts they look fantastic at small sizes but if you make them bigger they look like crap they just do not look terribly good now the thing that postcript did all of those
fonts with the Macintosh they shipped in two versions there was a bitmap version and there was a vector version now a vector type face is not a map of bits it is a set of equations describing the shape of those letters let's say that we
want to we want to draw a DOT and uh we want to draw just a solid like a full stop nice big chunky full stop and we're going to say that this full stop here that's the size of thing that we want to draw here and uh we're going to say we're going to work in inches because
we're printing here and even in the most metric countries in the world print still works in inches and dots per inch and these kinds of things so we're going to say the center of our circle is 4 in by 4 in and we got a/ in radius so for
every point in that Circle we are going to say if PX - 4- p is is greater than this so we got floating Point Square arithmetic going on here and if it's inside the circle we paint it otherwise we don't and so we fill that in now the
Apple laser writer had a resolution of 144 dots per inch which meant to draw a 1 in circle 2,000 20,000 736 dots we're talking probably half a dozen floating
Point operations so we're talking about something like a 100,000 floating Point instructions to draw one full stop that's why the laser writer had to have this incredibly powerful Processing Unit
inside it and that's just to draw dots we want to draw the letter O well now you got to work out what's inside the circle but outside the ellipse we want to draw a letter B for example well we've got all the dots that are inside the circle or the square or the square
or the square or the rectangle but aren't inside any of these things so we can knock the shamas off and we fill in that bit and we take the lines that now this looks beautiful you can create these incredibly wonderfully elegant
crisp things in there and the technology which enabled all of this was postcript now postcript was created by Adobe they wrote the engine that drove the laser writer printer and uh postcript was
licensed postcript cost about a 100 bucks if you wanted to put postcript in your device you had to get Adobe $100 and this was fine when you were selling printers for $88,000 it was no problem giving Adobe a 100 of that but computers
got faster chips got cheaper the convergence was obvious at some point like by the end of the ' 80s we could kind of all see that we were going to eventually get away from bitmat fonts and Vector fonts and it was all going to be
unified and uh apple and Microsoft got together and went do you want to give a dby money and Microsoft went no and apple went we don't either you want to do a thing and Microsoft went yeah all right you see the problem with those
true type with these um sorry Vector fonts is when you draw them on bit map displays so here we go this is our display grid these are our pixels we want to draw a letter B kind of small so we can put it in a menu bar right let's fill in all the squares which are
completely within the outline yeah it's not going to work is it okay so let's uh what if we fill in any Square that's like more than 50% within the outline and now I mean we can tell
it's a b but it still doesn't look terribly good so maybe we say well if it's completely within we're going to shade it 100% black and if it's 50% then we'll shade it 50% black and it's starting to look a little better but
it's kind of blurry and it's not terribly nice to look at the big thing that Microsoft and Apple they put their heads together and they came up with a way of describing fonts that included something called hinting and hinting
basically says look if you got to draw this font on a laser printer yeah do the maths knock yourself out if you've got to draw it on a screen 640x480 VGA 1990 style here are the pixels that you are
going to color in this is exactly what you draw this technology is called hinting it is Apparently one of the most infuriatingly complex things it is possible to do in it hinting type Faces
by hand is some serious magic now this did not ship in Windows 3.0 but it did ship in Windows 3.1 and because I'm a sucker for old computers I got Windows 3.1 running on a
v M so I could make slides for this talk and there it is and if you go into the control panel on your Windows 3.1 and you go into fonts and you can see we got this little message at the bottom there it says this is a scalable true type
font that can be displayed on screen and printed on your printer and it seems bizarre now to think that we used to have fonts that you could see but you couldn't print but this was the state-ofthe-art until I was already building web pages for money you know
and if you zoom in and you look real close you can see the hinting you can see the individual pixels that are being colored in by this hinting technology now Windows 3.1 kind of rolled around
the next significant Innovation that came out of digital typography came out of one of the most unlikely projects in history Microsoft Bob now 1994 Microsoft have got one team
working on the next version of Windows Windows 95 they have another team who are like maybe people don't want a computer that looks like a computer maybe people want a computer that looks like a living room with a dog who talks
to you and helps you do your job and maybe people if they want to make an appointment they click on the wall calendar and maybe if they want to look at their recipe database they click on the door to the kitchen and maybe if
they're stuck they click on the dog and they ask it questions and there's a guy called Vincent Conair was a type designer working at Microsoft and he saw a prototype of Bob and he went why is the dog using Times New Roman that's not
a very cartoon dog kind of a font and so he created a Sans type face from Microsoft Ms that was designed to look like a comic book Comic Sans Ms now Microsoft Bob was taken out the back and
shot it was a CL Steve Balmer went on record as saying it's a great example of us realizing we'd made a horrible mistake and killing it before it got out as opposed to SharePoint which is a horrible mistake that we are still
living with today Comic Sans Ms however it escaped it shipped with the Windows 95 plus pack and then it shipped with office 97 now
Comic Sans is a perfectly good type face it is clear it is readable it is friendly the problem is the people using it because comic sanss send a hey come to my daughter's fifth birthday party
there's going to be cake and a clown what Comic Sans does not say is here is how much money it cost to bury your husband but there it is I have seen comic Sands used in some
of the most unbelievably inappropriate scenarios and what it sends to me is a message that says hey uh we buried your husband but yay now the next big innovation on the road
to digital typography Nirvana happened because we went from these to these flat screen displays cathode ray tubes were kind of the state-of-the-art for a long long while and this one went hang on we could take like the digital watches and
we could make them bigger and in color and we can make them thin and we can use those on our computers and this unlocked the path to a whole new technique for rendering type faces now
if you go to Google's homepage and you take a screenshot and you zoom way in you'll notice you get weird colored fringing on the letters and if you look closely you'll see that the bit on the west is always kind of orangey and the
bit on the East is always kind of greeny blue right if however you don't zoom in on a screenshot what this is doing this is magnifying the data that Windows is sending to my display this is not the
only way to make things bigger you can take an SLR camera put a macro lens on it and take a photograph of your screen and if you zoom in on the word typography with an optical zoom what you
see is this you see the individual red green and blue components that make up each of those Square pixels on your screen and what somebody realized is that by exploiting the fact that we've
got red green blue red green blue red green blue effectively we have three times as much horizontal resolution to play with as it looked like we did so if you take your letter b and you draw it like this what you're actually doing is
you are subdividing this grid and you're only filling in specific bits of it and so you are effectively tripling the horizontal resolution that you can use when you're rendering your type faces and so you get this kind of before and
after effect now this was called clear type Microsoft announced this at comex in 1998 lots of fanfare this is amazing looks fantastic this is still used today C type is a kind of standard across all
sorts of devices and they held a patent on it Microsoft patented this in 1998 but it wasn't invented by Microsoft and it wasn't invented by 1998 it was
invented in 1977 by Steve wnc to get high resolution text on the Apple 2 and Microsoft know this because the Microsoft basic reference manual from
1982 for apple b Microsoft basic on Apple EXP licitly calls out that you can use subpixel Font rendering now I don't know if this was a completely honest mistake a company the size of Microsoft you can easily see how they would be
unaware that they had actually found this and then forgotten it and then someone rediscovered it again but yeah if anyone ever wants to challenge the Microsoft patent you can use their own publication as prior art to prove they knew about this and they knew that
someone else did it now while we're talking about the Apple 2 I just want to give a shout out to uh one of my favorite things that I stumbled across researching this talk it's a guy called Michael C created this which is the
smallest pixel font I think it is possible to create every character is drawn on a 5x3 matrix so this meant that you could get 80 columns and 25 rows on an Apple 2 on a home television set in
the late 1970s and it also means that each one of these characters is less than 16 bits of information and so the entire type face fits into 256 bytes of
memory which is pretty astonishing no one gives a crap about that now because first of all the '90s came around and we went yay storage is cheap look CD ROMs 650 megabytes you know what they're so
cheap we're going to give you your program on one disc and we're going to put another disc in which is just full of fonts because we got to put something on there and I remember as a teenager going through the coral draw disc to and being like ah so many fonts I want to
use all of them in my homework and apparently that's not a good idea and it doesn't look very nice um and I never used comic sense though and I'm proud of that fact so we had this kind of Renaissance in the mid90s where suddenly everything was on CD ROM and there was
almost no limit on how much data you could shovel into things and then everything changed almost overnight because the worldwide web happened the dot boom happened the future was under
construction and uh you remember the internet connection wizard anyone I mean there people who've never seen this now this is around the time I started doing web development professionally the late sort of 9798 I started building websites
for clients for money and most of these companies they had maybe they had a cdrom catalog they definitely had a printed catalog that they had hired designers they had colors they had fonts they had layouts and they all had the
same thing we want our website to look like our brochure and we were like yeah we know but it's 1997 and websites look like this in
1997 because you were limited to to the fonts that the browser knew had to do nobody was going to download a font over dialup internet just to look at your company's website the way that you wanted it to look now we could give it
our best shot one of the web technologies that emerged very early on the first version of CSS was the idea of fallback fonts and we could say all right well look if by any chance the
person looking at your website now this was normally an employee at the client so this was good so when the people who paid your invoices looked at it it looked really nice cuz they had their font installed they had no idea that all their customers were seeing it in
something different use future semi bold if it's available and if it's not look for helvetica and if you can't find helvetica use Ariel and if you can't find Ariel use sensor Reef any sensor Reef will do we don't care we are not
fussy now there aren't a whole lot of takeaways in this talk but I am going to leave you with a or rather share with you a technique that you can use to create great Mischief among your colleagues you need somebody you don't
like who runs Microsoft Windows and you need an open-source application called font Forge which is for Designing and creating and Publishing and converting font files and what we are going to do
is we are going to go to dafont.com and we are going to find something way out there we're going to look around this we're going to pick something on here like abstract groovy and Abstract groovy is a wonderful kind of 70s disco type
face that is apparently completely 100% free so uh hopefully no one's going to sue us for doing this so we're going to download abstract groovy and then we are going to open it up in font Forge and we are going to go into element info and
we're just going to tweak this a little bit we're going to change the font name from abstract groovy to helvetica noi and we're going to change the family name to helvetica noi helvetica noi is an incredibly cool type face that
Hipsters love because it's the one that shipped with the first retina displays on iPad and iPhone and so a whole bunch of people like ah we want our product to look like Apple product we're going to use helvetica noi helvetica noi does not
come with Microsoft Windows so we are now going to export our font file and we are going to send it to our friend and go hey check out this awesome disco font and they are probably going to go oh yeah that's brilliant I want that on my computer and they're going to click
install they are not going to notice font name helveta canoy hiding up there in the corner they're not going to notice anything not for a couple of days maybe a week and then they are going to go onto a
website that uses helvetica noi and it's going to come up in abstract groovy or they are going to get an invoice from the iTunes Store and they're going to be
like apple are getting hard into this groovy thing or uh you know they are going to try and log into their business accounting software now I actually discovered this technique entirely by mistake I was
doing a web job for a client who sent me their house fs and I did didn't notice that in the zip file of fonts there was an incredibly bad version of helvetica I didn't notice it didn't notice anything for a couple of days and then I just L
like the web looked crap like I just kept going on these websites and being what why are all the letters kind of blurry and and they got weird artifacting and everything and eventually I figured out this was all the websites that were rendering helvetica and if you can't find it fall
back to Ariel and so up to that point Microsoft Windows aerial I'd never had a helvetica font on there I installed this one and messed everything up so yeah prank your colleagues um I'll leave it as an exercise for the reader to work
out how to undo this it's harder than you think or maybe you just stick with it turns out that the web is a much friendlier place when everything is rendered in abstract groovy now there has always been this tension at the
heart of web typography and web design because on the one hand we have the you know the craft the profession of type Design This goes back to Guttenberg we have centuries of experience people
literally these are textbooks on how to study the history of graphic design you can buy a book about how to learn about how to learn about the stuff that you want to learn about and on the other hand we have developers who are like
LOL now the typ people they know how to do information layout they know how to use fonts they know how to use everything they were not prepared for us turning up and saying yeah we need you to design something by the way we don't know how wide it's going to be we don't know how tall it's going to be we don't
know how big it's going to be and now as you saw in my talk yesterday with dark mode email we can't even tell you what background color your work is going to go on on the other hand the developers we don't know anything about type design we like just put all the buttons on the screen the user will figure it out
eventually now CSS has been doing wonderful Valiant work to try and Bridge this Gap and within the last five years we've started seeing you know a body of web design by designers who had never
lived in a world where print first happened you know print happened first we're seeing the first kind of digital native designers and a lot of lot of these things are starting to go away and of course CSS is a big uh yeah contribution to why this is working now
one of the big deals with CSS was a thing called Web uh web fonts web open font format this came out at about 2009 and for the first time you could put a font on your website and say hey this website should look like this here's the
font we want you to use on it now this opened up a whole new toolbox of things that we could do with it because up until this point using specialist fonts for specialist characters it had been
done from time to time has any of you ever received an email that just weirdly ends with the letter j just on its own at the end of a sentence and you're like where did the J come from now before the
Advent of web fonts Microsoft Windows in before the Advent of Unicode Microsoft Windows shipped with a font called wingdings and wingdings was basically it took the letters of the alphabet A to Z not to9 and it said well let's make them
look like printers dingbats Stars playing card shapes bullet points all these kinds of things now uh in uh the '90s so a would map onto this thing here two would map onto this thing so you
press W you get one of these diamonds now what happened at some point in the '90s is uh some guy working at a computer consultant working in New York um he noticed that if you were using wingdings and you typed
NYC you got this and so he immediately got on the phone to the New York Post and he said I've uncovered a secret conspiracy at Microsoft that says it's okay to kill Jews in New York and the
New York Post being famously responsible journalists when don't be ridicul no of course they didn't they ran it on the front page as uncovering secret Microsoft font conspiracy now Microsoft are like just shut up this is just a
total coincidence honestly you people can find stuff anywhere but somebody remembered because 5 years later when Microsoft brought out a font called webdings if you type NYC in webdings
you get I love New York which I thought was rather nice now the reason for the J is if you end your email with a smiley face on Microsoft Outlook Outlook goes oh smiley face I know how to do that one
I can change the font to wingdings and put the little smiley face in but then if the person who receives your email doesn't have wingdings they get Jay the reason I remember this is that I
used to work for somebody called Jay in a company that used Microsoft Outlook for email and so this is a real example of you know what is the difference in tone between these two based on whether
it ends with a smiley face or not but it turns out that being able to choose the font that you want to use for a single character is actually fantastically useful because on the web it means that we can include in our
website things like font awesome we can go here is a library of wonderful crisp highdefinition IM for icons and Playback buttons and infographics and even R2-D2 is lurking
in here somewhere we can plug in this font file we can say render this using that font and the beautiful thing about it is all of that wonderful mathematical crispness that we saw with the Apple laser writer and postcript that's all in
here so as devices get better and better and sharper we can just scale up the fonts and get these beautifully smooth things and that's a big deal because Hardware is doing some amazing things 12 years ago if you told me that I was
going to read a novel on a computer screen I would have said no I'm not why would anybody do that and then Kindle came along the first time I saw Kindle in a shop I literally like I saw this thing and I was like that that that's
obviously a fake one that they have on display so people don't break it and then the store assistant pushed the button and the screen changed I was like yes I'll take it I don't care how much it is I want this now and you know Kindle has revolutionized the way I read
Because I travel a lot so I can take 500 books with me on something that fits in in my pocket and the way that Kindle and these devices work is actually really cool they only use power when you turn the page inside each of those little
cells in the Kindle screen there are charged black and white pigment particles and all it does when you turn the page is it calculates a new Matrix and it flips the electrical field which means the black floats to the top or vice versa but then it switches off and
so it doesn't use power when it's just showing you a page which is how the Kindle can run for like a month between recharges now a couple years ago I switched from Kindle to using one of these this is an Android Tablet with an e in display which means it's a Kindle I
can do crossword puzzles on and I can scribble on and I can take notes on and uh I just found out last year the company Onyx that makes these things uh by the way if you want to see a real one of these come and chat to me I've got it in my bag here um they have brought out
color E Ink now you're not going to sit and watch movies on this thing but you have something that is akin to sort of the watercolor palette now it's not bright Rich colors but it's good enough for reading comic books it's good enough for infographics graphic design that
kind of stuff and smartphone screens are just getting better and better and better to the point where you can't even see the individual pixels anymore they are literally sharp enough that it doesn't matter anything that a human eye can perceive at that distance yeah we
can draw that absolutely not a problem and in a way this is kind of sad because all of these wonderful Technologies like you know type punches and Lino type machines and ROM generators and uh
character matrixes and Lancaster's television typewriter it turns out that all of them were just us solving the fact that computers couldn't really do what we wanted which is just infinite data infinite resolution all the time
Broadband on forever on a WID screen display the size of the sky but you know we right here right now we are at the convergence of these four wonderful stories we've got a story that started
5,000 years ago in ancient Mesopotamia when someone drew a cow's head in a piece of wet clay we've got a story that started 5 00 years ago with the Guttenberg press and the invention of movable type we got a story that started
50 years ago with the first digital bitmap computer displays and we have the next chapter of I don't know what I have no idea what is coming next but something that I love is when science
fiction comes true in my own Lifetime and this book Neil Stevenson the diamond age was published in the '90s and I read this when I was an undergraduate in college and thought wow this is full of amazing stuff that might happen 200
years after after I'm dead and then I was rereading it on the Kindle recently and there's a package in this book where it says at times like this the paper glowed softly and the
letters stood out crisp and black and I was reading this on my Kindle at night and I just had this moment of holy crap it actually came true while I was reading it and that's astonishing because we live in a world where science fiction is coming true all around us
somebody sent me this cartoon from 1934 the television newspaper someday you might receive the front page of your morning newspaper on your television can it be done well yeah we did that and so
I look at all the science fiction things I grew up with world of the future and robots and future cities and I think well we basically solt it when it comes to typography I wonder how much other awesome stuff out there is going to happen and science fiction that's going
to come true within our own lifetimes thank [Applause] you do I have any questions folks we have a couple of
minutes I like the Silence of Enlightenment that's a good note to end the day on right I'm going to go downstairs and plug in a bunch of stuff we are going to be doing uh we got about an hour break now so go grab some beers talk to people then we're going to have
some fun talks then we're going to have some guitar karaoke then we're going to get all of you up you're all going to sing songs we're going to have a big party it's going to be awesome I'll see you surely
End of transcript

This page is an adaptation of Dan Whaley's DropDoc web application.