hi everybody today I chat with Helena Zang Helen is a very talented designer whose expertise and interest spans a variety of areas now most of you know that I love all things related to pixel art recently Helena created the Fantastic font departure mono yes it's a pixel font yes it's also mono spaced which means that it is flexible for a lot of use cases and it looks really cool when I dug deeper into it and realized Helena was behind it I want to chat with her more to both both learn about her design interests as well as touch upon a topic that I am not very familiar with which is what goes into creating a font so In This Very visual chat Helena shares a mind map of all the

inputs that went into designing and creating departure mono and along the way we touch upon a bunch of other topics including a look at some of the pixel art inspired content that has been popular across a variety of mediums over the past few decades this going to be a blast and it's going to be a fun chat so don't want to miss it let's get started all right Helena it is great to chat with you I you know the introduction I talked about departure mono the pixel font you created which got me introduced to your work and then digging into your work a little bit more I realized that you have a lot of really interesting things that you've been working on and you're currently working on so I figured

let's chat and learn more about yourself and definitely how the pixel font departure mono came about and of course we'll touch upon a billion other topics along the way so so welcome thank you so

much Kaa thanks for having me so how did

you get started let's go all the way back in time you know because I'm always curious to know like you know how everyone got into this world of tech given the millions of options that have always existed you know it takes a it takes it's a passion project to be able to want to work in this area and then dive deep into this to not just make a career out of it but also contribute back to larger ecosystem so I just want to go back in time to see what was it that motivated you to get into this fun

world yeah we can go way back um so usually I I start um I was always an artsy kid and I remember at a very young age I would go to the bookstore and kind of just camp out in the graphic design section I was really into that so I just was like voraciously uh absorbing all the books there and on the digital side I started making websites when I was 11 or 12 I started tinkering uh which with HTML and such and um you know just kind of had fun with it at that time the patterns weren't defined yet so it was kind of a playground for me to just try different things and um you know you can you can see that thread I'm

still making websites today and uh uh fast forward a little bit from from then I went to art school and I found some of that stuff pretentious so I kind of you know luckily I had design you know always in my background when you're

building websites what do you remember what tools you were

using um in the very beginning it was it was just like a pure HTML CSS actually that was I remember before CSS came out that's I'm dating myself a bit but um it was very very simple and I just see just was seeing what I could do with that um of course there was geoc cities I remember I had a geoc city site I would pay a lot of money to see what I you know my early websites I don't really have a good capture of those but um and then I know you were you know really into flash I didn't really I wasn't so much a flash person uh and you know all that action script and stuff um but I did I remember

there was a I would call it the Squarespace of flash where they it was called moonfruit and you could kind of set up your own website and very quickly and um yeah so th those were fun times

yeah well I mean looking backwards it was probably the best that you did not get into flash because your I think your HTML thes and JavaScript skills probably are relevant today whereas a lot of us who did the flash world the visual stuff of course still there but I think a lot of the tribal knowledge we gain from it is pretty much lost in time yeah yeah

well you never know maybe there's going to be a Resurgence or you know of nostalgia in the air very much so a lot of people keep pinging me and saying there's a tool called ruffle which turns your old flash files into web assembly that runs natively in your browser so there's a Resurgence of a lot of people actually using Adobe animate and some people even have old versions of flash lying around that they managed to get working on their modern versions of Mac OS and windows and and actually have content that's being created now I think the Gaming Community is really huge into flash because that's always been a big place that flash is relevant in but I'm seeing more and more ruffle links on various things I see around me

so who knows there may be a Resurgence of it but I think the it's not going to be as influential though as it was back

in the day right so from there you know you created both an i the icon library of course came first what was the motivation behind creating the fos icons because I'm looking to the icons there's a lot of icons there and having done one icon in my entire lifetime which is my orange logo it takes a lot of effort and takes a lot of consideration on how that's all done so I'm curious to know like what was the initial Genesis of the idea for it and then you going all the way and creating an icon for so many

common scenarios sure yes I'm going to scroll through can you see the site right now yes I can okay I'm going to scroll through just to um set some context for people on what this is and what it looks like um there are I think there's like n over 9,000 icons to date and it's it's growing um there's you know different weights that you have this started during the pandemic and um yeah I think when you know you have a little bit of space like that and you're I was stuck at home and um you know uh this kind of just came about just started tinkering with it um iconography is something I always worked on uh on all my projects so I would really roll

my own icons for whatever company I was working for whatever client and um you know I think it's a pretty underserved area I do think it's changing a lot recently I'm seeing a lot of Icon designers working and a lot of people um you know making their own icons and a lot of Education around it too um but I think previously it seemed like you know typography is it was it is more of the leading um element in a design usually um but I think icons are pretty underserved and sometimes you just you know um it isn't given as much thought so um that's something I always cared about because I care about all the details you know I think everything matters in in whatever you're building

and designing so um always had it interested in them and then given a little bit of time during the pandemic I this was something I started up with my partner um and uh it's you know one thing we care about a lot is offering it in a lot of different formats so you know there's a figma library plug-in sketch it's available in react view um lots of different ways you can use it both for designers and developers and um you know we work hard to maintain that and then we also work hard to take in requests you know I think at this point because it's quite large it's probably serving a lot of the uh use cases that are needed but we still get you you know

we take requests through GitHub issues and then um we'll kind of sort through them and see like what would be good what would be something that's good to add and um if something's too Niche we we might not go there but yeah when I looked at

archive.org for your icons you know the first version of the site I think at least archive.org was in like October of 2020 and you had 3,000 Pate icons and then now you have like mention over 9,000 did you start did you wait to get all 3,000 icons before you decided to shareed to the public or did you have earlier versions of it they were just sharing in smaller

sizes yeah I think I'm trying to remember the first release I believe we had 588 icons times six weights so that whatever that comes out to maybe it's 3,000 um uh we did I think we did you know decide to come out with like a a solid set before um before releasing the the first version um you know maybe enough to really cover the the most common cases of like search icon settings things like that um and then it kind of Grew From there very cool now I know you created a

mind map in figma that walks through not just like departure mono but also inspiration behind how you got there I feel like this be a good segue to get into that because I think that covers a a lot of the things that I think you and

I want to talk about as well MH sure yeah um I can give a quick over just to just to set the scene of what we're looking at and for the people listening in that don't have the luxury of a of a being at a screen right now um we're looking at this kind of mindmap big graph with a lot of different nodes um where we have uh departure mono you know the font that I recently released and then a lot of the inspiration that went behind it so at a very high level there's um you know there's there's sci-fi reference movies and film um references from NASA um paper ephemera which I I really love uh collecting you know vintage uh ephemera um type foundaries and specimen

sites um you know uh yeah lots lots of this stuff you can probably find the influence in the in the website for departure mono and then of course I looked at in creating the font itself looked at a lot of um monospace fonts as that was one of the constraints and then programming fonts because I wanted it to be you know useful for for programmers um and you know everything else from video games Pixel Art it is a pixel font so you know pixel art very related territory um and you know going back to like mac paint and and making pixel art in there that kind of thing so uh there's a lot we could talk about a lot of areas we could go to and um you know

let me know where you want to start well

let's start the very beginning what made you decide to create a new font and more specifically a monospaced pixel font

right yes it's very specific um I've always wanted to make a font and I think it just I never really got around to it took me a while to just sit down I started departure mono um about two years ago and uh uh I think pixel you know doing a pixel font is also a great entry point into making fonts this is my first one so so I think having you know giving yourself a constraint like that is really helpful just to start learning about you know both all all the ins and outs of what it takes to make a font and then um you know learning the tools all of the things that come with it so um I think it was a really great constraint

and um I think we both we can get into this more of like uh what is it about pixel art and pixel fonts that we were both drawn to um but yeah always been drawn to to pixel stuff so uh I used that as a constraint and then actually the first version two years ago was not monospace it was a proportional font which means you know each letter takes up its own width and has varied widths and um I it also had a smaller grid so I was working with an even tighter grid where I was actually having a lot of trouble working with let's say diacritics if I wanted to add that or um I'll zoom in here to give you a sense of

you know this is the the grid for departure mono that I ended ended up with and you can see that you need a little bit of room if you want to include you know this kind of accents like this acute or um you know you need to make room for the descenders coming down let's say in the que uh so um there was a little bit of working through like what is the grid and what you know what does that look like um when you actually type that out in a in a sentence or paragraph and then um and then the monospace came a little bit later and um it was through some I think through some input through my partner and like other folks that were like this seemed to be

more useful like if I can actually catch this use case of um being able to code in deparo I think that that would be extra cool so I made that change at some point um when I Revisited it and uh that worked out so um also saved me a lot of curing by the way because if you if you do a proportional font you have to you know K different pairs of combinations of letters basically so um I think in terms of an entry point it was a really good set of constraints right the two constraints being it's a pixel font and it's monospace and um yeah was then there was just like a lot of trial and error learning about different details and definitely a lot of research and

looking at other fonts um in in this kind of family this play a very basic

question what is

king So King is the spacing between two letters so let's say between between uh you know an A and A B letter um or uh and then that that is a specific printing between these two letters tracking is the spacing let's say you had a paragraph um it is kind of the overall spacing so you could you could track something a little bit tighter let's say uh let me see if I have a reference here that I can play with um you know you can track something a little bit tighter or you could say you know oh I want this to be um I want it to be looser right and then you could or we could say wider and then we can space it out a little bit more

gotcha and it's proportional fonts is it is King Global for each letter or do you have to special case it because I've definitely seen cases where I'm typing in like let's say two letter combinations the spacing between them is different than some other two letter combinations so all those things that as a font designer you have to think about and also specify in whatever format that the font needs to be represented in yeah

that's exactly right it's special casing which is and that's what I was getting at in terms of the you know the the amount of work that goes into that there's a lot of work that you know you have a lot of you kind of get your proofing texts and you have different cases that you test for and different pairings of letters um and it takes a lot of fine adjustment to make sure that it looks good you depending on you know what two

letters are paired together how much of creating departure mono is because you just wanted to try what it takes to design a new font versus you found a gap in existing pixel fonts that you felt were like missing that you wanted to address and move the state-ofthe-art forward

in I think a little bit of both like one was just the desire to try it out and learn about it and you know really complete a project um um there's a lot of reward in just you know learning how to do something and and then I do think there's probably you know from what you see that the end result of this um probably answers some of the things that I found were missing that you know there's tons of pixel fonts out there and there you know there's a long history of pixel fonts um whether it's for video games or um you know there was this phase in the around Y2K like the early 2000s um I don't know if you remember the like tiny tiny pixel fonts and it was like

really tiny grids of like three to five pixels yeah um that was a really fun time and so I think that's I definitely have a lot of nostalgic for that time but I think there was a uh you know if you look at that by the way the curing is all over the place and it's kind of you know it's it's really um it's endearing in a way but I think in terms of if we're thinking about usability and utility and let's say you did want to use it as a a coding font um I think there was a lot of things missing there so um you know I was exploring like when I was working through this I think one of the considerations is how can I make

it usable and um you know reduce the amount of wonkiness that um you know maybe some of those funds had um but still have a little bit of Personality right um uh but yeah make it a little bit more usable I think for wider use

cases know makes a lot of sense to me and you know we can talk a little bit about what got you interested about pixel fonts in particular you mentioned that there's a lot of inspiration and historical things that you wanted to kind of capture as part of creting this font I spent a lot of time trying to find the right pixel font and especially in the flash community in the late 1990s early 2000s pixel fonts were great because Flash had this weird thing where the anti-alias everything for the most part to a point where it's like extremely blurry it was nice for larger text but for small text it was almost unreadable so what a lot of people did was they said the quality in Flash to

low which meant that anti-aliasing would be turned off which unfortunately also meant all Vector shapes would also be Jagged and have the sharp edges and that became an art style of itself I don't know if you ever followed like you know I think it is Yugo Nakamura praystation and and some of those other kinds of like early generative art experiments they did back in the day I think Yugo P was the actual website and a lot of those experiments were very simple in terms of this lines but the lines were in you know exported low quality so it created this really artificial kind of an effect and so all those pixel fonts were the only solution he had for having nice you know curvy vectorized shapes

that weren't Jagged but had text that was very very legible so lot of fonts you mentioned very I still have probably a folder of like at least hundreds of megabytes of ttf files from back then because it's hard to find like the huge fonts h o g and then the standard underscore ones and then I think there were a handful of ones you know try to find at some point but the S screen was a classic as well that was yeah Jason Cy and I actually tried using S screen for my current pixel fonts that I use on my website today I tried with started off with Sil screen and I went with something else mostly because S screen is I think only all caps and I needed

something to be like both lowercase and all caps as well that also wasn't massive in file size you know I was was like how can we make sure the fonts are less than about 10 20 kilobytes in size and all the other ones I was able to find were often in 100 kilobytes which I it makes doesn't matter today for many people but I've always been a stickler for how can we make things be as fast and performant as possible and so this is so when I found out about your font I was like I have to try this out and so I haven't had a chance to do that yet but my plan is actually put it to that works on on my own personal blog and see how

it all plays out and my interest in pixel art in general is mostly this video games you know I grew up playing the NES initially and then when the Super Nintendo came out it was like Mega Man X and also the Zelda links to the Past like a classic old school game from that era and all the iconography and text was very much pixel oriented and that was pretty much it and so ever since then I've always made my site's logo actually know pixel text itself and then I tried to incorporate pixel art and pixel things for a long time and when Rea displays came into the picture I couldn't use it anymore because on every screen pixel icons and pixel things were blurry because the dpis were

off and I just didn't know enough about dpis and icon sizes and so on to be able to do a proper job with it but but five years ago in CSS they add the ability to actually have the rendering mode be in pixel format itself so even you had images that were different sizes it would not anti-alias anymore and that I think in some ways brought back this resurgence of pixel style visuals in everyday websites again and that's what got me back into pixel art after having kind of abandoned it for many years because nobody could use it and see it in a way that would make

sense yeah there's a lot there to dig into I'm I'm in this video game area now of the of the mindmap but you know things I mean all the way back to things like arcanoid which you can see in the departure mono site um but also the yeah I think there today there's a Resurgence well this is this is probably 10 years old how old is Minecraft but yeah probably 10 or more yeah yeah maybe 10 so maybe not so fresh but there are newer references of you know people using uh pixel fonts and you know um I think this Minecraft is a great example where they yeah they've kind of brought it back a little bit here um and I think I'm just feeling a lot of excitement

from the industry too on the on Pixel stuff and um yeah I'm excited to see what what people make with that I want to go back to silk screen which you mentioned one of the this is one of the um fonts I remember from back in the day and yeah I loved it um it was very small I think the let's see what the height is here five it's only five pixels tall that's really small to work with as you mentioned it's all caps so that was one of the constraints right like that or limitations I should say um that um I think departure mono tries to answer like okay there's it's a full alphabet um uppercase lower case um different Latin languages including different

diacritics and now I'm currently working on expanding it to ceric as well which I don't I'm not familiar with this so I'm actually you know um working with the community to uh to work on that and test it um but that is uh yeah I think that's important for me for this F is that it can be usable for a lot of people and a lot of different use cases and you know if I'm able to expand the languages great uh I think the grid is probably too small for something like Chinese but yeah we'll see what happens with that but um you know I think uh expanding it to cilc and then Greek as well there's some basic Greek in there but um it

would be great to make that a little bit more um fully supported yeah and you know five pixels today seems like very small but always feel like at least my fuzzy recollection of the time back then was that a lot of our monitors were maybe 1024 768 was like the most common resolution and if you maybe had like 1280 by 1024 if you had like a more recent monitor but I felt like in those days five pixels was actually not that small I was like okay that's pretty you know reasonably size and I think all had to be like multiples of eight anyway so your font size had to be eight pixels or 16 or 24 and I don't know if that was different though for S screen like was

it multiples of five I I I forget those details at this point that's a good point actually because if you you know if you're looking at Old well this is like some old Mac paint um references but this screen was probably something like 64 640 by three I'm going to but you're it 480 or something you know it's it didn't actually need to it I guess one pixel took up more space so uh yeah which is a which is a challenge of course as I highlighted earlier of using some of fonts from back in the day in today's time is that little things that have just evolved in terms of how fonts and text are rendered kind of goes counter to how that is done nice k10k classic yeah this has

been uh this has been coming up a lot I don't know if you felt this but people are talk people are talking about caliber 10K a lot see like yeah I mean all so all the pixel details here it was all all pixels there was this personality I look at K and K at least like once every couple of months mostly because I just want to kind of go back to like what was you know what was what do we kind of lose in like the evolution of design since then and what do we gain as well as a part of it and I always felt k1k was a as a great example of it and also their their sisters I think Cuban Council I think that was the I think the

cre k k had Cuban Council running at the same time and I think there was Ultra shck was the pixel like you know that a heavy pixel related content as well but you know this is all really fun things to see and most of there images you know I think today we can actually create a lot of this using just CSS but they literally there was no CSS positioning anything like that back then so all these were like nine grid tables where you literally had nine cells in a table and then you put images in each section to create this like Rich border that worked because it didn't work in modern browsers or old browsers yeah yeah a lot more it was a lot more uh that went into it um by the

way what did you so you mentioned there were some things that maybe we lost and some things that we gained what do you think those things are I think the thing we lost was personality every website they see today tends to follow a very similar pattern you know there's like let's say there's like eight different templates of how a hero hero page should look like or how a call to action should be optimized for and so on and the bigger difference is like maybe it's gradient versus solid color and things like that but every website looks very similar to every other website and if I would kind of squin my eyes I'm like this site looks the same as this site the same as the other one and I felt back then I

think there was no real established patterns in terms of how things should be done now I'm not going to say that K andk probably hit all the right bars in terms of usability accessibility and and things like that and so I think those are some of the things that could have been improved from the websites from that era but the amount of sheer uniqueness of it was very much something that I feel like we lost cuz I noticed that you also have habo Hotel here and I wased H Hotel actually last week just to see like what's going on there because that was one of the first experience I ever had of like something done in the browser that was one I could create my

own room I didn't have to do anything extra for it and then people could come see my room and I could just navigate randomly and I would be interacting with actual people that were doing things because the only other example I had was Microsoft had a chat application in the late 1990s it was called was called Microsoft Chat and there had two modes of how you can connect to an IRC server you could chat in text as usual or you could create this fake comic strip and that fake comic strip had like different characters you can choose and so on and I found all this to be like early versions of What ultimately became Myspace and social media of we personalizing an experience that is

different for every individual because most then it was just you just got what the developer said you're getting and so those were early examples of it that always stuck in my head as something that was very very nicely done and of course habo hotel is like classic because it also reminded me of Zelda Link to the Past yeah yeah I haven't

thought about this in a long time actually but I yeah I came across it working on this font yeah they still maintain the L style the thing is there was another website that was competing with habo Hotel I forgot its name completely very similar in style but it was much larger and it wasn't fully pixelated they had a lot of vector shapes that truly showed up as nice Vector that were actually you know nicely Alias and things like that if I can remember that I'll try to bring it up but yeah I think it had it was a definitely auk domain name and so I that's too far for me to reach into my memory um but yeah it's but it's really interesting yeah when you think about

there's this is the modern reference I mean this to me has so much of habo hotel in it I don't know if you've used this tool together um I have where you can basically we can join a meeting as we are now and uh we can we each have our Avatar we can walk around the space and you know we can it has a very cool audio component where if I walk close to you you know it will start the video and audio so it's kind of simulating um on off being in an office let's say and uh yeah check it out it's it's I I have actually used it I didn't realize it I just went to a website right now there were some team

events that we had just for fun a couple of you know months ago maybe maybe over a year ago and it was actually on gathered at Town we were all like walking on this virtual environment and then we could chat with people when we got closer to them and so on nice nice no this is very very cool and in video games when you look at indie games like the games that built by like one or two like small development teams for various platforms pixel art is still all the rage I see it in so many situations where they're using it as their primary way of communicating all things that are going on

yeah yeah I mean started value was made by one person right I think so I think so yeah very beautifully done but yeah what you were saying about I think you know a lot of people in the industry are feeling this way that you know we have we we maybe lost some of the personality or just weirdness of websites back in the day before we had figured things out and we gained a lot of you know let's say accessibility is one area right where um um definitely those tiny pixel fonts were not accessible back in the day um so there's there is a lot that we gained and I think it's you know it's as as it has matured it has you know we've we've

gotten better at some things like that and uh but I also will say it's really up to us to bring some of that back right and um just because there are you there are established patterns and maybe every website has like a header that's centered but you don't have to do that and I think one one reference I'll point to that this was probably the biggest inspiration behind the departure mono specimen site um gly type this type Foundry puts out the best um mini sites for their different fonts so this is not the best representation because it's static screenshots but um you know if you were to go to I think I can actually probably just pull one up this is a a new one that they

that they released um just yesterday actually and I'll just give you a preview of like oh wow it's you know it's incredibly fun it's a beautiful Showcase of their type faces and you know not everyone loves the scrolly telling where you you're telling the story and you're kind of like controlling the scrolling yeah effects um but yeah I think this has so much personality it's so wonderful it's such a great way to show off a font um no very much so very nicely done I think when you get back to like

also what was it about websites back then that had more personality than they are right now I think today it's just more difficult to build a website that has personality and different style like for example as you're scrolling having that kind of Storytelling come into play it's unless you're very technical it's hard to get to and if using a low code tool like let's say web flow for example to make this work you can but you're also sacrificing page size you know some of these examples might be 10 20 30 megabytes in size when you're going like is it really the best use of you know bandwidth to be able to do this then you go to Apple's website apple.com and you look at some of their really nice hero

graphics and the scrolling that's being shown there and those B like 20 30 40 megabytes as well like okay you know maybe the industry hasn't fully figured out how to make these work in a way where you know your search engine know scores all these things aren't negatively impacted by doing something very very quirky but I think we'll get there though and I think we're seeing it's it's always a pendulum where what's old is cool again and I think we're getting to that point now where both technical capabilities to make pixel art and pixel content look nice in the browser is now available and I think we're also getting a lot of designers who are looking back at going like there's some good things we can borrow

from that era and meld it with the things that we learned since then around usability accessibility performance and all of these things to create a next generation of what would be evolved pixel art yeah so you have a collection of movies that played a big inspiration as well I think that's also very I found very interesting because you're right a lot of movies even once that are done today use pixel art and Def pixel fonts to highlight various things that are either very technical or deliberately designed to have a retro

Vibe yeah let's see there's there's so many um what can I zoom into as a starting point well okay so I've recently I've been binging X Files and this this is this is a great reference of you know very 9s uh you can see actually this screenshot I pulled um has a pixel font here and I feel like every time they're writing their mission reports they're uh there's a different font and interface going on so that's been really cool to just see what what kinds of things they come up with this looks very dossy um and yeah let's see what else we got here I mean some of my favorites I think the alien franchise I I love those movies alien the best one is the original of

course of course yes of course um this is a screenshot from you know there's there's a lot of uh inspiration to be taken from their interfaces back then Space Odyssey still stands up really well um so definitely recommend that I mean look at this screenshot where they're they're eating and they're these look like iPads and this was made in 1968 that's pretty incredible um so I think for me there were there were these were more broadly sci-fi references and not necessarily pixel specific spefically but you can see I think a lot of them do overlap right because you tend to be working with um let's say constrained uh interfaces where you you're working with kind of Pixy looks so this is from uh Blade Runner

2049 also one of my favorites Blade Runner um and then I would say G monk is really the G monk is the master of this these kind of sci-fi interfaces this is from Oblivion and it's this just like gorgeous really dense uh layout here um and then there's there was like a whole table um you know this kind of like big big table UI that they had in the in the movie

yeah did you ever watched a Fallout TV series uh the recent one yeah yes I did and the video game for that was always funny because the video game is set in a futuristic time like you know multiple hundreds of years after the world supposedly you know ended from nuclear Annihilation but because the world ended at that time all the screens are low res and so all the UI you'll see in the game and of course the TV show which carried represented pretty Faithfully everything is pixel style and the game itself has some fantastic elements that are highlighted very similar to to how you have UI here from both G monk as well as all the alien movies they did a nice job of blending past and future and using

pixel art you know all these areas where it made sense represent the Retro technology yeah yeah it was like stuck in the 50s basically right exactly it's

like the the UI language was stuck in the 50s but they had nuclear powered everything so like cars are like fly I don't know if they're flying cars but they were self- powerered you had robots that could do all kinds of things because they Advanced so much in some of these areas yet their UI language was very much what we would consider to be like late 60s early 70s yeah yeah I mean I think there's actually something um there's a there's an observation to be made there because we have all of this you know if you think today we have all of these Advanced Technologies and yet you go you know you you're you take a flight and you're you have this like a paper paper boarding

pass that's like you know printed in a very low-fi way so I think that was some of the I think that theme I was playing with here too it's like um for the website for departure mono there's a story uh you know this uh this astronaut or scientist is going to space Dr kerning and then um you know was getting some sort of brief and then um you know going to the airport and or that really this the airport that is Maybe Spaceport and like you know going to space and then yet you know you have all this technology of going to space and yet you're dealing with like paper receipts and stuff like that so um you know I think that contrast is is

kind of a a real thing in our in our world and um something that's fun to play with also in terms of like having analog elements here as well as very digital very digital elements as well

yeah I think you know the word analog I think is critical here because I was reading an article recently talked about how vinyl records sales are like Contin to go up and up year-over year because people are getting back into both buying record players and buying music in vinyl because there's something nice about it and of course the audio quality people say is because of the compression is significantly better than what you might hear if your ears are capable of discerning between compressed audio and like really high quality original audio so something about there's uh I there was almost this like movement where we wanted to go digital we wanted to leave the past behind as quickly as we can to embrace what new technology was able to provide

but now that the DOA settled a bit it's kind of like there were some things that were done back the in technology that was actually quite appealing and the visual language of it I think kind of come came along with it as well so you now have this blending of old versus new which creates the UI that you see here and of course the departure mono web page absolutely love it because you didn't go all pixel art everywhere the icon some of the visuals like I think like there's like a like a pen or a marker that's still very much a vector but the surrounding content is still very pixel has like a nice blending of what would look good in pixel form and what would look better in natural Vector

form that I think was a nice mixture between what you're trying to

balance yeah thank you yeah I was uh definitely playing around with both both languages here especially like the the pattern the right almost a QR code the to the evidence of geothermal activity I've

seen the glitch textures making a comeback in so many ways as well because back then you know you look at glitch glitch texture you're like okay the designer just made a mistake there they don't know what they're doing but now it's like seeked out you know people look forward to like I want 4K textures or basically just glitches like this that are being printed out and so it's a lot of fun stuff there in that sense

yeah yeah this is this is um I'm feeling a trend around this kind of stuff too I've seen some dithering tools being worked on and and um there this these are actually made with um just the shading characters um in the font so that was something that was fun too was like uh you know challenging myself to only use aside from these Vector elements you can see there's some flat like you mentioned this highlighter and then some of these backgrounds right like the paper those are vector and then aside from that everything is departure mono so even this this texture here in this ID um and here these are just using the font um to this is like showing a I guess a photo from the newspaper

clipping and then um yeah so that was really fun to to play around with oh yeah here too in the boarding pass there's a little bit of texture so yep yep actually was it k10k there used to be websites where you could download background patterns that you know that tiled essentially and you'd see something very similar to this and a lot of them were in art form yeah ah there you have something yeah I remember that there's some there's a lot of good you know a lot of stuff to get into with with patterns and um everything from these are my personal references that I collect these security patterns inside envelopes if you look in there you know um there's some really beautiful ones like this wood grainy one yeah um

and yeah there's an AI tool that came out I think probably last couple of weeks actually where was all really about how do you create dithered images from it and yeah the the way I always like you know when I talk to some you know friends who weren't around back in the day to do design and things like that you know I was explaining like one of the easiest ways I had back then to create something similar to this was fireworks was a great tool back then and you could always export as a gift and choose number of colors you wanted to be able to export the image as and so if you kept it as a high number then the image would be more pH realistic as best

it can be but if you went down like four colors or two colors the algorithm had to figure out how do I take all these pixels and simplify down to one or two colors the output almost always would be pixel art you know even for more traditional things because you only had two colors so be giant blocks it' be geometric in terms there no circles because you had circles you needed some kind of anti-aliasing which you couldn't get with just two colors so it would always just deferred to only block designs and I said that was the fastest way back then so all the things that you're doing right now I've had it back then but you know no one knows about it because people use fireworks that fire

the product has been discontinued for a long time and I don't even think it works on any modern operating system anymore yeah but it's a similar idea to how you would achieve this fact today right like you would you would bring it into your software and um like flatten out the number of or flatten it to bit map and flatten out the number of colors and and such so yeah this definitely more Advanced though because I don't think fireworks would have known to adjust the spacing of various values to create the visual effect of like maybe a gradient for the sky it would have just been very binary you know is there does the pixel have certain colors be on a certain threshold if it doesn't it's

just white otherwise it's going to be black so in this case the what fire would printed would have been the bridge and some of the key shapes would have been visible but everything would been like solid white yeah it's definitely more advanced today for sure this article is is one by the way it has it goes through different you know there's different kinds of algorithms right for dithering and you could do it in different ways there's not like one way to do it so you can there's different results you can produce different kinds of noise that that you can you know achieve so yeah this is great very very

cool now when it comes to I've always been a consumer of fonts I've never actually created my own font what tool do you use to create the font like what you know you decide to take a visual and translate into something that your computer understands as a as a font how

do you how do you go about that um I use glyphs um there there's various tools out there um I found glyphs really actually I love it it's it's very intuitive to use I can give you a quick preview here um so for because this is a pixel font I think I I largely worked directly in the canvas here um I did do I did a few you know paper sketches on grided paper um to kind of work out like yeah how big is the grid and questions like that um and so I think probably it would be a combination of you know sketching and then and then working within the software and um in this case you can you can see the pixels here uh

directly very neat and and you essentially have the same kind of view for every letter or character you're trying to generate and then glyph that the app takes care of putting them all into a format you know whatever the font format is and having it be recognized by your operating system yeah there's pretty robust exporting features here um there's a lot of like Advanced Automation and things you can do and um depending you know depending on what you're trying to do there's like you can make a variable font in here there's a lot of stuff

um how take for you end to end to come with the idea and actually draw the pixels for each of the characters you are going to be representing yeah end to

end so I started this project about two years ago and I worked on it a little bit probably I I might have picked it up in the middle somewhere and then you know more recently this year is when I finished it and if I were to map it to a an um a full-time job it might be around 2 months including the website um but that's not that's not an that's not an accurate way to say it right because the breaks in between are important so um you know having being able to walk away and really like you know it's like I can't see this anymore let me walk away and then uh I come back to it and so so yeah the the the breaks were important

but I think all in all my my time spent in this software is probably you know not not so long yeah I mean

as you can see is the best ways to be creative and so that works out really

well yeah definitely letting letting your mind wander and also just being able to see something fresh again I think that's one of the hardest things about making anything right is like at a certain point you can't see it anymore so um you can't even tell if it's good or or not so um giving yourself a little bit of space is important yeah I I

noticed that you have EB boy listed there as part of it ah one of my colleagues very recently I was chatting with him you know and he actually had posters from EB boy in his background I was like hey you have an EB boy post really do we realize that and then we had a great chat just talking about what we lost in just this kind of art style that isn't really popular anymore you just don't see it except for them

for yeah there's definitely there's a lot of different pixel art happening these days I think this is a very particular style um yeah I love this like isometric um really fun bright colors um but I'm sure somebody's doing it you know it's just there's a lot of interesting things happening it's about discovering it and sometimes it can be hard to discover but kind of have to go into some rabbit holes sometimes yeah and I just like

sometimes just wake up one day going like what is that one website I remember seeing from like 20 years ago that I completely forgot and one of them was I don't this is probably me dating myself heavily here there was a website where people built floors of an apartment almost like a crowdsource style and we just you know people just stack it up on top of each other and over a period of time it was like you scroll this massive page I think it was called yes Mr Wong's apartment Mr wong. de was the URL and that website is still around right now and is it yeah it's live it's live yeah

let me send it to you um I'll send it to you and what's the oh there's a chat here we have chat um right here do we and see here but I think if you just search for Mr m r w n g.de it you'll see

it oh the website the homepage is exactly the way it was like back in the day yeah you enter all right the splash pages I forgot about that yep 2003 all right oh here we go wow it's still live still live and let's see where how do we get to the the apartments themselves from there um but you know this is what you were saying back in like the widths of our websites were so narrow because they need to be this now our resolution my resolution is so big that this doesn't even cover half the screen I'm going to zoom in for yeah I'm try find like how do we get to the apartments cuz I can I got there from just like going to the

URL directly

but yeah if you want you can go to the URL bar and just do slash Mr wde instead of index one. HTM if you just type in slash m y h u c my house and hit enter you can now see

people who built it and the funny thing is I can see the names of some people posted there and a lot of them are people from back then who a lot of pixel art wow this is really cool I actually don't know if I remember this but this is I should be there somewhere cuz I created a few floors and submitted it and it was actually featured here as well this is back when I had a lot of free time to create pixel art just for the just for the fun of it look how long the scroll is yeah yeah no it was amazing I I remember and this inspired me to create my own pixel City actually in the exact same format people could actually

crowdsource and create pixel I I basically had plots of of land and people would claim it for themselves all for free and then it could create the land as well and if you SE for Kupa I think was called kupo Bill Kirupa v l e that was like back then like people could create like massive was before Google Maps was a thing you could really scroll this like large canvas and everyone created their own plot of like you know house or Building inside of it but these were like some of the fun things from the pixel art days that always struck out so every now and then I just wake up going like wonder what happened to that website and this is when I discovered again like maybe a

month or so ago I was like okay I need to find it and I had no recollection of it except for like pixel apartments and I couldn't find it anywhere else and it took me like just a lot of like random searching over a period of a couple of days to land upon this again because as you can tell it's not SEO friendly everything's an image there's no text you can actually select and click on yeah I wanted to search for you but I I can't because yeah exactly right but I'm definitely there there should be at least two floors at least I remember back then it was there I'm pretty sure it wasn't removed because it hasn't been maintained or updated in all this time

yeah but do love this because it does kind of it's almost a snapshot of a period of time that people probably forgot already existed it's you know I love watching like archaeological dig site documentaries on TV most of the time it's like completely lost you know it's like they had recreated and so on but this is like a perfect representation of this old city that people never knew existed so yeah yeah wow what a time capsule this is cool I just also noticed when he went to his homepage the links on the right hand side like you know there was a thing back then you link to like your favorite in insirational sites and so on like where itus departure like a lot of those

websites were all like you know if you scroll up a little bit like the the right the grid of icons you can see e boy of course but then like I remember pixel freak being a classic one from back in the day and I think miomi as well and so those are little things that I remembered from that era where you had pixel art all over the place I just love that these are still live I know right and with the pixel F like wait why is the site like on the left hand side back in the day that been like 50% of the screen like on a 640 by 480 Monitor and so this is very much a this is yeah this is very much one of

those things where people today are going like what are you looking at this makes absolutely no sense but if you live through it you can recognize why it was done that way and yeah even the gradient in the background was you know it's not exactly a smooth gradient it's very much one where deliberately done with fewer colors to create the dithering effect they highlighted a moment ago M yeah but you can see font the challeng in the font because it's it's pretty much illegible on the left hand side because for back in the day this would have been this size for most of our monitors but now all of us are in like 1920 by 1080 at the minimum if not much much greater Beyond it so the fonts had

to evolve to be nicer which is where I think departure mono and the more modern pixel fonts that have come out really shine yeah this is probably a better simulation of of what it would have looked like I mean it would have probably filled most of the screen here yeah I need to like also go on LinkedIn and see like what this person is up to I periodically do contact some of these people going like hey I love your stuff from like 20 years ago and and then we always end up having fun conversations about this yeah that's really fun but no the eboy posters are great because they're still relevant they still actually I think they're a lot of companies at least I've seen Google

doing it a few times where they use them to for event they're having a particular City actually you know hired them to create a pixel Montage of whatever city they're currently doing an event in and those have always been big hits I always fun people to be like loving it because especially developer audiences because they recognize the value of like pixel style FR for most of like nostalgic purposes really but it resonates with them and so I've seen a a lot of conferences where the EB posters are

always featured oh yeah that's cool yeah these are some Modern you know I think there was that particular style we were just looking at and then you can see today some interpretations and artists working in in different kind of pixel art um I mean there's some really cool

stuff yeah very much so you know let's see I've been I've been poking around um but yeah some some really beautiful stuff out there wow this is fantastic because I think the one of the big changes I've seen in kind of the pixel art is that back then the pixel art was a combination of two things it was part of like the isometric art style where everything's on a 30 60 90 kind of an angle and that also happened to be represented in pixel art form but what we've seen since then I think it's a decoupling of those things you can have pixel art but you don't have to have the isometric grid as a part of it and some of the examples you had of some of the

games for example they're on the 306090 grid to kind of take you back the nostalgic feel of it but the art style isn't necessarly pixel art so you have this combination now where you see both of it but it still does a nice job capturing what it was back in the day for what would be considered modern pixel art yeah but how about hotels classic they still follow 306090 pattern for how they represent all the lines and they're also pixelart style so I think they're probably one of the few remaining ones that are actively investing in that kind of space even EB boy they use vectors for a lot of their visuals I think yeah I

see yeah there's so you're seeing a lot of these like higher definition um I mean this is this is this is all pixels how incredible is that yeah um yeah but no I think it's there's a lot of really fun stuff that you know people are creating a lot of good animation work as well it's being done in After Effects of pixel art work and I forget who the designer I think he goes by the initials DK I think he's a Korean designer and he recently had a a pretty well attended show in New York and also he does various installations let me see if I can find a link for that I know we're geeking out on this but yeah I mean it's it's really fun yeah

it's d k a y dcon d e e k a y DK a y yeah and a lot of his work is a combination of pixel art and you know animations I see him on LinkedIn all the time but he also posts on on Instagram of course you see a lot of it and some yeah like them these are just fantastically done wow that's so

fun yeah like every frame has some nostalgia in it like you saw Mega Man you saw like the the worms from not the worms the caterpillars from Super Mario World but it was vector format yeah I mean I think that's the that's the benefit today of you know we can we can still achieve that pixel effect and let's say use a pixel font but we have the benefits of modern technology and modern screens and we can use it at different sizes right and um I mean given a a highres screen you could you could have more flexibility with the font and you don't have to exactly use it at the at the pixel size that it was created at exactly because I think back then there was no alternative especially

if you looked at early computer Graphics in the 80s '90s like for example highlighted from the movie interfaces in like lot these things you had no choice that was the only option you had whereas today we have the luxury of being able to pick and choose from the various art styles that have been really popular over the decades and optimize for what you want to do and I think that's the part that's actually the most exciting part of it because even if you look at DK's work it combines techniques and styles from so many eras very nicely because you can why not take the best what works and be able to do the right thing at the right moment yeah this is really fun so what's next for you you know you

know you have the Fantastic icon library and you mentioned you want to keep expanding some of the the character set in departure mono but what what are you thinking about doing

next yeah so currently currently working on ceric for for departure mono um I was also thinking maybe learning about variable fonts and expanding I mean I don't even know how much it makes sense for a pixel font to be variable but as we just said right there's technology we can leverage and we can kind of blend Styles um and techniques um so selfishly say there's a

huge place for that because readability if you have like large blocks of text especially reading like English or like you know like language work always found monospace fonts to not be the most legible of things so even on my personal blog all my heading fonts are a pixel font and I experimented greatly with like what kind of font can I use for like having large bodies of text be you know can I find a pixel font for it and I was never quite thrilled with the the monospace variation so I think there is a a world where this could be

applicable yeah so potentially that potentially of um I mean I would have to figure out a way to make let's say a bolder weight or maybe a wider like there's a lot of different kind of axes that that you can work with um or like more glitch what if glitch was in Access and you can make it more glitchy or something yes so uh so maybe playing around with that but we'll we'll see um definitely continuing with with phosphor the icon library and um I'm I'm inspired actually to get into some pixel art after after talking about all this stuff with you and and you know recently digging into this more um yeah I'm I'm inspired to maybe try my hand at some of this stuff too and and see you know

what's my unique blend of uh pixel art

yeah now pixel art yeah it's just game I think it's a nostalgic factor for me but I think the style is still clearly as we see resonates very strongly with a large audience even today given how much we see it in pop

culture yeah it's not going away anytime soon so yeah I I hope not you know even if it is like there'll be handful of us who still keep dragging the corpse of this art style forward as much as we can there's always going to be someone listening to vinyl records right so exactly exactly and hopefully the overlap is growing as well in the

future is there anything else that you feel that we should highlight and talk about in terms of what you've created anything you have in your mood board

that we didn't cover fully uh let's see I think we did it we did a pretty good job here uh bouncing around and of course there's so much more to to to talk about but you know we can continue the conversation another time um I think what I want to drive home with this this um land map is how much uh I mean how much research goes into something like this and how fun it is to kind of go through these different rabbit holes and um you know if you're to when you're embarking on your next creative project to to Really um you know obsess to to find something you're interested in and obsess about it and uh you know something good will come out of that

fantastic and you know what I absolutely loved about our conversation we never mentioned artificial intelligence even once which I think is like well now now we did oh now we did exactly but it it was mostly just to kind of reference that I didn't reference it as opposed it being a featured part of it I love that I love this is kind of the yeah it's kind of the antithesis of artificial intelligence right like manually placing pixels one by one yeah there's there something nice about seeing this happen so well hell not it was great chatting with you love the font love the icons and I can't wait to see all the other cool things that you're doing and definitely will chat more about other

topics in the near future yeah thanks so

much for having me