Config 2024: In defense of an old pixel (Marcin Wichary, Director of Design, Figma) | Figma

[Music] [Music] let's see my slides let's wait for my slides cuz it's more fun with slides here we go hi everybody how many of you remember the first iPod I have not actually had it myself um it was too expensive but I bought one recently and was really Amazed by how well put together it is and how it still stands the test of time uh and you can admire a lot about it as a designer you can kind of look at its enclosure and the proportions and the materials right and uh you can you can

think about the hard drive that's inside the really revolutionary 5 gbyte tiny hard drive that change our relationship with music or you can also think about the click wheel which really was a precursor for multitouch both on the MacBooks first and eventually the iPhones and that's kind of incredible right but the one thing that I like the most is the font like apple did something really unique that nobody else has done before which is they took the 1984 Chicago font and then they reused it 17 okay let's be honest how many people are in their

heads right now saying Marin there's something horribly wrong with your slide are you even realizing this I'm so sorry I just lied to you this is not Chicago this is the windows 3.0 um system font that nobody likes this is Chicago um this is Chicago and it's kind of interesting to me because um if you look at those two operating systems um they are obviously very different but a lot of the difference come to the personality of the font that they chose right and if you look at Chicago and yeah this is Chicago if you

look at the main letter forms of Chicago do you know how many pixels you need it's only 1800 pixels it's only 1800 pixel you need to encode the whole personality of the phone do you know what has 18800 pixels um the Wi-Fi icon on your computer today it's kind of incredible and it's actually fun to compare the system fonts today to the fonts of the Y right like they all you know whether you take San Francisco inter or Roboto they all kind of look the same they don't have as much personality and again how many

of you are just like I'm so sorry I li to you again this is actually not the right order this is the right right order or is it and okay I'm not here to actually dunk on those fonts because they have a very different job today right this is not 1984 the responsibility of systems font are very different and I'm not here to tell you this was better because this was also different but what's kind of amazing to me is how little you need to encode a personality in a pixel font and so I just

wanted to talk to you a little bit about pixel fonts you know the basic definition right the the the the vector font is the real font it's the real typography pixel fonts are what happened as a stop Gap measure in a two or three decades when computers were just not powerful enough to Showcase Vector fonts and pixel fonts are so limited that it's almost laughable right if you look at it in a certain way but I also guarantee you that you had personal relationship with certain pixel fonts that you might not realize I want to

show you a few pixel fonts and see if you can recognize them without a lot of context cues right so how many people actually recognize this font oh nice yeah so this is the very classic Atari Namco arcade phone that's been around it's probably somebody's using it right now it's been around since the 70s this one is a little bit trickier and feel free to shout out if you think you know what that is yes this is the Windows XP font Taha that really if you've been around and this is also 2001 if you've been

around you will recognize how much of a bread of a fresh air this was compared to what came before another one this is a little bit of skoric help here if you can recognize this so this is a Nokia for some of you might have spent a lot of time looking at this and there are other phones that you might recognize if you've been in New York at a certain period of time at around Time Square this will look very familiar right this will be the thing that announced the news of the day the famous

Time Square ticker um this 100% guarantee you will see sometime later today this is the 7x5 pixel phone that's in every industrial it's in your intercom it's in your remote control control it's in your microwave everywhere how many of you recognize this this is a pretty classic most recent more recent pixel font um and as this if anybody use any Hi-Fi audio video equipment in like the 80s or 90s this will be extremely familiar to you and I want to pause here because this is actually very interesting VHS and VCRs used a lot of those

kind of fonts and VHS and VCRs are themselves really interesting in they're the first you know 1970s first popular recording device that came you know that allowed you to record video and first of all if you ever get to take a look inside a VCR it's amazing it's it seems laughable today but they were so creative and they put so much interesting things inside that really encourage you to watch what's the inside of VCR is but there's also the cultural impact of VCR the quality of VHS was so low that it actually changed the way

movies were made there's a great video by H bomber guy on YouTube that talks about how easier it was and how different it was when you watch a video that was so low quality if you watch alien on VHS you have no idea what's going on your brain does half of the work imagining things that are not there to a point where you see a guy in a cheap costume looks like alien you will see it in just a second right so that's kind of amazing and it allowed here we go allowed people to make

movies cheaply and make all sorts of movies just work great because you're brained out of the work alien in 4k pixels just give it all to you yeah it's still Moody but this is a fan this is clearly a fan you can see exactly what the goo is that he touching and it's really not the same right and it's really interesting to me this kind of idea that that pixels actually matter so much um but we have to be careful about nostalgia in general right Nostalgia is basically whatever I was was doing when I was

12 is the best and everything after that is not as good pros and cons to that approach this is a kind of a pretentious but I love I love this quote um I also love this meme which I found incredibly funny and scary as I wnab be historian because there's a danger of nostalgia right that we we don't know how to look at history Nostalgia sometimes doesn't really help a lot and when it comes to pixels and pixel fonts we've also have not been looking at them as as well as we should have sometimes so

we all think or a lot of us think this is what an old pixel is right but the reality is that this is what an old pixel is it has texture it has blurriness it has fuzziness it comes half prepared to do half of the job already if you surround an old pixel with other old pixels they breathe together because the technology just allow them to do so right old pixels came doing half of the work for you Mario never looked like this Mario looked like this Mario looked like this and when you watch Mario

running on an old computer it's so obvious how much of a difference that is from the pixels we think that were there and from the pixels that actually were there then maybe we forgot and I looked at some of the screens of old archade GES and the imperfections are so beautiful but you can see that the pixels never quite go where they need to go because the technology wasn't there and there's all sorts of analog imperfections that contribute to this process that we all kind of forgot they existed like look at this and how funny

this is today looking at our screens but something we just took uh for granted then and I can't help but think that like every time pixels got smaller and sharper and capable of displaying more colors we lost something we lost something and there was no better customer of these old pixels than a classic 8 by8 font 8x8 font computers love the number eight this was the easiest thing to display you get a matrix of 8X 8 64 pixels and you can feel them with whatever you want and it seems doubly laughable they're not just pixel

fonts with old their problems they're also monospace fonts with all their problems this is the wor possible combination for typography and yet I collected about 3,500 8 by8 pixel phones and some of them are scrolling behind me and I can help by finding them beautiful in some way particularly because of those imitations I want to show you a bunch of things like look at all of these variants of stencil font made in the 8 by8 Matrix and how they all look great and they also all feel different look at all of these historical fonts from

different errors look at all of the Sci-Fi fonts you know there's going to be a lot of sci-fi fonts of course uh just any of you remember the data 70 font you know the classic 1970s sci-fi thing there were so many 8 by8 Recreations of that font and they're all amazing at least to me you can bring soris using an 8 by8 pixel matrix it's kind of incredible how much you can do with so little and then you can also bring color to the table because if you have 64 pixels you can color each one

of them by hand and many font makers did many font makers also included shadows in their fonts you couldn't draw a shadow easily because it was too expensive for a computer but you could put it in the font itself and look at those letter forms of some of the 8 by8 pixel fonts look at this Quake Q for example example look at those zeros how many ways you can steal this this ambigu Zero from an o in this limited space yes there are beautiful umper sand in 8 by ERS SS in 8 by8 pixel fonts

and some of this letter forms there these are some of my favorite letter forms and the beautiful thing about this is that they wouldn't be able to exist in a vector font they unique to this medium which is kind of incredible if you think about that but there's and and here's like five of my favorite pixel fonts but ask me tomorrow and I'll show you five different ones because there's so many but it's not just about like admiring pixel phon because pixel fonts come with something else that's kind of incredible if you were to start

designing a pixel font you have a lot of very quick decisions you have to make right okay I have an 8 by8 Matrix I'm going to fill it with eight rows of pixels but then if I type set it they're touching each other okay I have to leave some room room for the Mbox how much room do I leave do I leave zero pixels one or two pixels it's interesting it changes the nature of the phone and here's I'm learning a lesson already um what do I do with lowercase and maybe I devote one pixel

less and it works but it doesn't work for a b because I need room for an Ascender so maybe I move it all down and it creates a little bit more room and maybe I do move it even more but of course you know what's going to come next is descenders right what do I do there maybe I can kind of pretend they don't and I can go a little bit maybe I can shave some pixel off and it works for a j and a y but it's not going to work for a G and

now I have to move it all up and there's all of this push and pull that I can realize very very quickly and and and and and maybe you know what maybe I just say like I'm not going to do ler case I'm just going to make capital letters smaller and I independently reinvented small cups even if I didn't know they existed okay how wide I make it is it one pixel two pixels three pixels is pushing it how about four ah still works that's kind of incredible no way I can pull off F oh

five works as well that's wild right okay I think we're done here but oh my God like imagine you have 8 by eight pixels and you can do these things and you can learn those things quickly then you can say oh I'm going to do it vertically or horizontally and you learn about contrast and stress and you can say oh I'm going to try seres can seres work yes they can can I do a script I can do script can I do connected script I can do connected script there's so many connected script 8 by8

pixel phones outline sure italic why not italic serif surely there's no room for yet there is room for italic serif there's room for what used to be called semi-graphic what's today called Emoji or icon fonts and maybe I get tired of the one color that I have and I'll be like what if I chose another color and I do this thing and you invent antialiasing but not an algorithm for aning just pixels on a screen that you put there by hand and quickly you can go from this to this which is kind of wild and

you can go further you can say can I do four pixels yes and you can still encode personality within those four pixels how about if I get tired of monospace well you can abandon it it's so easy with pixel phones how about I want to fix those letter PHS coming together you just invented King and it's kind of wild how you can spend a day learning those things maybe without knowing what they mean because bigel phones make it so easy to just have this great onr for typography and to try different things and you know

this makes me think wouldn't it be kind of cool if we could design a font together right like it's kind of a shame let's design a phone together so this is going to be an experiment let's see what we can do here let's see if the gods of Wi-Fi exists I would love for you to grab your phones and your computers and get ready we're going to do this thing where I'm going to show you a URL and or a QR code unfortunately I won't be able to show it to the live stream and I

apologize we just don't have server capacity to make it happen so we're going to like change the view so you can see the URL but I will share it to you later so so so please stay tuned so are you ready all right so this is the URL and I would just love for you to go there and follow the instructions and we see if it works all right is this working for People Are People connecting all right okay keep it on screen for just a few more seconds all right so huh okay so these

are all the fonts that you are designing right now on the screen so hopefully you can recognize your letters somewhere of course we're not going to design the whole font just one letter but I hope you can recognize your somewhere there and I'm going to wait to see how many we can get I have no idea how many people are here in this room so we'll see how it all goes this is okay this is interesting okay there's some really good things already okay here we go all right we are we going to get to

1,000 okay here we go this is kind of fun um yeah so I'm going to wait a few more seconds uh you can resend your letter but of course you know we don't have as much time to actually spend on this but yeah let me just freeze what we have right now in stone I apologize if you didn't have a chance to do it but we'll come back to this in a second but the funny thing about um bitmap phon that they also give you a structure so you can do fun things you can for

example order them by the amount of pixels used right so this is kind of fun going from all the way from Tiny letters to just really really big letters right you can order them by width um you know there are some very narrow ones and there's some really wide ones you can also order them by height uh which is really interesting some of them I don't know if they qualify as a letter A but you know let's say they let's say it does um but what the last thing I wanted to show you before we

move on from this section and again we'll come back to this at the end these are all the letters ordered by similarity and you can see how many of them pretty much most of them are unique only a few of them repeat at the bottom right so if you're one of the people at the very bottom you have a friend in a room somewhere have you know get to know them but I want to do one more thing and I have no idea what's going to happen right now I'm going to now compare this to

the database of the 3500 fonts I already have and see how many are truly unique historically most of them that's what's incredible do you see some of the gray ones if you made a gray one it just happened that somebody made one like this before you don't feel bad but there's 1120 letters that I have never seen before and I think that's kind of incredible if you think about pixel fonts and that limited space that you have and the fact that they've been around for 40 or 50 years I've been here four years ago talking

about the complexity of fonts and what happens when you press command B and this is sort of me trying to atone for that this is me trying to convince you fonts can be simple and can be beautiful and the other thing that I said earlier today was also a little bit of a lie I mentioned something like pixel phones existed only because computers were not good enough for a while that's not true either pixel fonts existed long before pixels this is many people who had typewriters hundred of years ago use letters as pixels to create

bigger fonts which is kind of incredible there's this machine that's over a century old that stamps a letter in your document as a sort of security measure it also is a pixel font realized completely mechanically we talked about bricks earlier today some people use bricks as pixels Lego after so many decades caved and finally released a set where Lego pieces were literal pixels and nothing else which is what they try to avoid for so long which I find really really funny crossstitch fonts existed for hundreds of years this is one from 18th century and we

can recreate it and type in it today on this 4K display which is kind of incredible if you think about it just giving a life to an old pixel font and it turns out that there is a beauty and necessity and and and and and and this amazing thing when you have a building blocks of a certain size and we all always seek a pixel that's not too big because then you can't do as much but also not too small because then it's just suffocating it's too many options it's too much time and there's something

kind of incredible about finding your pixel and of course you have to be careful about Nostalgia again but here's another thing that's tricky about Nostalgia what used to be technical constraints that no longer exist can still be valuable constraints right like Chicago existed in 1980s and was popular on a lot of Maxs was also resurrected in 2001 for a few generations of iPods and some of you might actually remember that Chicago also existed in a few 1990s games like Final Fantasy 6 so here we go so Chicago is just a good font that stands a

test of time and a good pixel can stand a test of time and it's fun to like sort of revisit history and look at what if iPods use the Windows system phone that doesn't even have a name because it's so unloved or maybe it used the Apple Lisa phone from 1983 that is beautiful in its own way but completely abandoned or maybe even more abandoned Apple eord font from late 1990s from Apple sort of cancelled internet service um you can look at the history of pixel phones you can revisit the internet history of pixel fonts

and realize that for certain languages 8 by8 is not enough if you want to encode something like Japanese or Chinese you need a lot more in this case 20 by 24 pixels which actually explains why computers the computerization of different countries proceeded at different Paces because you cannot use an 8 by8 pixel in China font in China but the beautiful thing about this strange meme is that it also goes both ways you can use old pixels today but computers are so better dealing with pixels that it's really really fun to use them this is something

I put together just to imagine what would like a rate tracing be on a pixel phone it's not real rate tracing it's all all Shadow and and and light and shadows but it's so easy to do this because pixels are so easy to work with and computers are so fast this is so easy to do like you could couldn't do it in the ' 80s or '90s or 2000 this is so easy to do today you can even take some of the conventions from Modern fonts like what if we had a pixel font there was

a variable font that's kind of fun nobody's done this before but you can do it today and it's really kind of cool to try to do this right like what I'm showing today here if you think about it is pixels pretending to be pixels pretending to be pixels just to show you Chicago but the last thing I wanted to mention how many people in the room are still like I don't know something's not quite right I'm so sorry uh this is not Chicago or at least it's not the last revision of Chicago this is Chicago

from 1983 um this is Chicago from 1984 that everybody recognizes probably hard to Spot the Difference let me show it to you this way so I looked at the early versions of of Mac you know the pre-release versions 83 and I grabbed a few earlier versions of Chicago the font and it's really cool to see how they evolved over time the orange one is a final version the the black ones are the ones that never really quite made it and I'm not really sure if I'm supposed to show them to you the scary part for

me is that the designer of Chicago Susan K is somewhere here in this room so that's really scary but that's sort of amazing to think about this right like like you can love pixels for all the reasons I mentioned right you can you can love pixels because they used to be something else and They Carried a lot more responsibility than we think today you can love pixels because they give you the sort of freedom to play with fonts with much more ease and it's there's so much easier onramp to typography right you can just love

them because they mean something to you and it's so much easier to encode emotions and and personality and stuff like this um whatever reason there is I hope maybe some of you will continue on this and I wanted to give you something as a last sort of gift so this is the URL everybody can go there now if you're interested and what I'm going to do is I'm going to toggle it so now you can design a whole font not just one letter if you're interested if this was fun to you and you can save

it as either OTF or Jason so you can do whatever you want with it and I hope you do and if you do please let me know what you end up doing thank you so much [Applause] [Music]