 Am I audible? Okay. Thanks for having me. And I'm glad that you guys choose to join the session. And excellent welcome to Whatcom Asia and the organizers for Having Me. And this has been, like, one of the best Whatcoms I ever Joined. So thank you for joining Whatcom Asia. And from myself, excellent hello to you all. And I'm glad that you have all chosen to join. So as you have maybe seen that I'm saying hello in a lot of Different fonts, so you have maybe guessed my topic today is The Secret Life of Fonts. So let's jump right in. So I'm Saif Hasan. I'm working as the lead product manager at VDepth. We work with WordPress and SAS and stuff. So before jumping into fonts, typography, web designing, And things like that, I want to take a short tour to, like, Why I care about typography or human-centered designs Or things like that. To go there, I need to ask a question, what is ACI? So ACI is like a combination of three things. The most number one thing is computer science. And the second one is cognitive psychology. And the third one is finance and design. So basically when a developer is developing a software, he doesn't mind to, like, check with the cognitive function or the psychology part of it and how the user is going to use it or things like that. But when we combine these three aspects of computer science and design and psychology, we come with the topic human-computer interaction, these three things. So it basically opens up the portal to human-centered designs. And there are a lot of things in human-centered designs like color psychology, mental model, UX laws, reviews, usability and things like that a lot more. But today, I'm going to talk about typography. And it's a really nice and, what can I say, interesting topic. Don't get bored. I'll try to make sure you don't get bored because there will be some fun stuff you'll see. So before going into the topic, this guy is Don Norman. So he's very popular because he pioneered the human-centered design principles back in the 80s. He worked at famous companies like Apple and HP. And he basically wrote a book called The Design of Everyday Things. And he gave us six design principles that stood the test of time. The book was published in, like, the 80s and still is being referenced in many aspects of both digital and physical products. So this, he basically gave us six guidelines while making digital or physical products, which are afforens, feedback, visibility, constraints, consistency, and mapping. So these are all, like, elaborative topics. But we can't, like, explain these stuff because I have already talked there. If you want to check it out, the link is there. You can take a picture of it and check it out later. But no problem. We can keep ahead. So in many cases, typography is the evolution of ACI and is a subpart of ACI. And before going into, like, how to design good typography or how the background and how typography came to this age, I want to look you some bad typography design. So if you want to take a look at this image, you can say what the first number is. Number two or number nine. What do you think? Two. So a lot of people think two. But when I first saw it, I thought this was, like, nine. So the typography is, like, confusing me. And then this actually says I love you. But this is your processing it and saying I love you. But if you kind of read it, it says something like I lay you. So another typography fail right there. And this is, like, so this is, like, when you go to the movies, the movies gets to send to the premium Oscars or something like that. And when you put leaves around it, it looks really cool and official and give you a nice vibe. But if you put comics and CMS right there, it doesn't quite like work out. And you'll see that the design is falling apart. So as we are changing fonts and things around it, you say that things are changing. So this is the declaration of independence in a nice font and looks cool and looks official. And this is the same thing in comics and CMS. And you know it's not working right now. It's falling apart. And you know that this is not the, like, this is a replica or a fake thing. So as we are changing fonts, these fonts are speaking back to us. So this is another fail typography. The poster was probably saying don't drive safely or do drive safely or I can only read do die safely maybe. So there are a lot of typography fails right there. So covered some typography fails. I hope you had fun. And if you are going to look at the evolution of typography, back in the 1500s, we see the letters were something around handwritten. Because at that time, when typography was developing for modern computer and printing press, so the first fonts were copied from the churches who, like, gave written documents over. So then we had, like, human style, Cajun style, and some other style. So this is like a quick recap where we were and where are we going. And as I have shown the bad typographies, you may have laughed, you may have chuckled, you may have, yes, you may have some other emotions. So the typography is actually playing with your emotions. When you see a font or you see a text, it's basically hitting your brain with different type of emotions. First, mood, memories, personality, and even taste. I will show you how test-cating changes with good typography or bad typography. And so this is an example of the typography Read Me, Blade Runner. So this looks really cool, right? Like a science fiction movie. But if I change the same thing to a different font, it looks like a western movie. So same thing. I'm trying with a different font. It looks really cool, futuristic, maybe a science fiction movie. But I'm changing it to a different font. It looks like a movie in the 60s, maybe a western movie. Same time, maybe this is for kids. This movie poster might be for kids because this has, like, cute emotions speaking through the typography. And then we can understand that font turns words into stories. For example, I'm a big fan of this TV series, Stranger Things. You can, when you look at the poster, this has this weird, this has this really good and cool Stephen Hawking's vibe of the 80s. By looking at the poster, you know does this movie poster or this series might be set in the 80s and have some 80s background. But if I put the same thing, like modern design and it looks like really cool science fiction type of thing that may be set in the 2500s. So as we are changing and designing with typography, it's playing with your mind, playing with your emotions and other things. So then fonts alter the meaning of words. This is a really nice example. So I will always find you. The left one is like cute romantic vibes, giving romantic vibes, and the right one may be a psycho killer who is trying to kill you. And then fonts make others to spend more. So I want to take a look at this picture and maybe guess which of this restaurant... Imagine these are the restaurant titles. And maybe some people spend more on a different typography and some people spend less on a different typography. So look at the bottom right one. So this one, so research found out restaurants like this, designed like this, are going to attract more premium customers which are going to spend way lot more because the restaurant has this kind of typography, this type of form. So then this word typography blends into our culture and it becomes a study of science and meanings and it kind of we call it semiotics. So semiotics is the thing that you know by looking at this movie poster, if you're going to see a movie and this poster comes up in the beginning, you know this is a comedy movie. This is not going to be like a thriller movie. And this might be an action movie, maybe directed by something like a good action director. So the semiotics is the stereotypes that the comedy movies usually have the first one and the romantic comedy is the second one and any movie might be the last one, which one there is. So comedy films most use the same set of forms like Jill Sam's and romantic films you did have. So this is quite a good example. The left one is a comedy movie using the semiotics, Jill Sam's, middle one, quite a nice movie. It's also using a D dot and the last one is up for your guess, one of the most popular movie posters in the world. So this movie poster form, the right one, kind of like takeover the whole movie poster industry for the 10, 20 years of the last decade. So this poster has been like printed on albums and movie posters, thousands of movie posters and different genres like sports, actions, adventure and things like that. So this poster is, you can make anything epic by using this font actually. If you write like, I am okay and you kind of like have this font with a nice design. It looks, it feels grand. It feels like you are going on an adventure. It has action and things like that. So this font is known as Prazan and Prazan has been one of the most popular typefaces for the movie industry and even the Oscars in 2006 chose this font to like show their title cards and things like that. So as you have probably imagined, the font influence you whether you want it or not. So in many ways font has this subconscious impact on you. So whichever font you choose to like design your web and things like that has a profound influence on you. So this is a research by Dr. David Lewis and he says that font communicating directly to your subconscious and this has been proved by research. You can Google it up later on. And this is a nice example of how an elegant font makes your test of soup better. For example, this is a menu which has this creamy tomato soup in courier new font. Whenever you are programming you maybe see this type of font and some users were given for a research purpose like 50 users were given this menu with a programming font and some users were giving this font this menu with a cool little touches Lucida font. So the test was quite wonderful because two-thirds of the people thought this soup tested way better than the previous one but they were sort of the same soup actually. So Times New Roman is probably one of our most popular classic fonts. We have been using it for a lot of our documents but you may have known that Times New Roman was purposefully built because the newspaper has like really narrow columns to fit more words into narrow columns. But we are using it right now on all of our things. And there is quite a nice example of it. So can a type space make you appear more intelligent? A research found out a student, the student was like really genius I think. So he tried three fonts to submit his essays and assignments. And after like comparing them he found out he got an average of A when he submitted the papers with Georgia and A- when he submitted with Times New Roman and Trebushet when he submitted got an average of B-. So maybe he had some other studies and things like that but we can clearly understand that sometimes fonts have a bigger impact on you whether you want it or not because the teacher might have even noticed. He maybe didn't even care what font he was but the student who tried to like manipulate him got a good score because he used a nice font. Got a bad score on other stuff as well. So there are some iconic fonts throughout history like the NASA one is very popular and is printed everywhere in the globe and the Coca-Cola one which hasn't been changed for like last 300 years. So back in 1969 when NASA thought about like repurposing their design so this design was not their first design. So NASA had their first logo which was not really hip and cool. So then NASA thought about in 1969 that they need to like revamp to speak to the younger audience and then they took the eight years required and they did a full manual revamp. So back in the days when there was a documentation or manual for space astronauts so they had like a manual like a really text-based manual but when they did the redesign and rethought of everything from scratch they replaced tutorials with cute pictures and step-by-step fonts. So this thing spoke to astronauts a lot better and the general audience then it was like a lot of text. And then this font which is like really popular everywhere even if you may have seen roaming around Thailand that this very bold type face and which can be seen by a lot of different restaurants and customers as well. So this font has been used in the Beatles Flame as well and this font is known as the Cooper Blank. So this was Oswald Cooper designed by him and this is the most farsighted bold font they could imagine at that time. For example, this is the most bold type face that they could design at that time and it was an instant hit all over the world. So Europe, America, Asia, everywhere people used to use Cooper Blank and maybe if you find a roam around you'll see this font there as well because this font like really the most fattest and widest font they could imagine, they could design and it has a really good legibility as well. So that's Cooper Blank and this type of information is provided got this info from Vox Media, so thanks to them. A quick shout out. And there is a personality of things that whichever fonts you use have different personalities to you and your documents and whatever you do, your website and things like that. For example, this is like a really cool personality thing. Like three fonts walk into a bar but barman turns to comic sense and says sorry we don't serve in your type here because comic sense is a whole different, is on a whole different league on its own. So you may have seen this font when you may be wanting to go to a Chinese restaurant maybe here in Thailand but we can read it like take away but this is not really Chinese. This is actually English imitating Chinese. So to resonate with audience all over the world so the history is quite nice so when Chinese people bought Chinese restaurants to America so they had a problem with differentiating how to place the restaurants in a distinctive category so the audience always knows this is a Chinese restaurant but problem is your audience doesn't know Chinese. You can't write Chinese in the board. So this font was invented by an American so he invented this font to imitate the Chinese culture. So whenever you see this type of font you immediately know that this is a Chinese restaurant. For example, you may be if you roam around the city and you go to the Chinatown you will see many restaurants using this type of font to sell maybe Thai cuisine or Chinese cuisine because by choosing English they are speaking a lot more wider audience than if they used Chinese only. So there is this cultural relevance this fake English font created. For example, this font is actually named the Chop Sui font and there are some other examples of this like this is a generic Indian restaurant so for Chinese they use this one for Indian they use this one but if you think about altering that if you try to sell an Indian restaurant with this type font I think it won't work out and people will have a lot of tough time to process this this is an Indian restaurant. So these fake fonts are like trying to speak to you to your cognitive balance that this is certain kind of information that has been buried into you by different semiotics over the years. So if you may have noticed that Matt talked about that there is a website revamped recently on WordPress org so they are using a new typography here and it looks really cool, modern and they are revamping everything. And designing for the web with nicer typography is always a challenge but not something you shouldn't do because you should always choose nicer fonts that your audience wants and maybe have the best fonts to connect with them. So this is the new font that WordPress work is using and I think it looks cool and the old font was looking dated for a while and this one looks a lot nicer than before. So if you want to... I didn't go into more details like how to space your titles, how to space your headings, spacing, subtitles or things like that because that would take a whole lot of time and that would be a workshop but you can check out this book, Refactoring UI by Adam Watson it's quite a nice book it really gives you all the means to design a nicer web from a typography point of view. So I don't want to recommend any fonts for you to use because that would be my preference, not yours but you can keep experimenting and keep evolving and there is one single thing I want to mention that as times grow, as we grow and the cultural shifts happen one font doesn't always stay static or stay modern because it depends on the culture. Same font because the WordPress work website was recently revamped but we have been using and seeing that website for like 10 years and it started to look dated because the rest of the web got a huge upgrade with nicer, bigger, narrower fonts and everybody used to like that so everybody started using like that so you can start experimenting and keep evolving to spice up your fonts and hopefully it works out and maybe the book will help you so many of the things that I have mentioned shared by this resource Why Font Matters by Sarah Hinman is a great resource to book so many examples like the Tomato Soup story like the Great Story and other things these are research links will be there in the book and there are some other YouTube videos I got help with Vox Media, Linus Bowman, Phil Edwards so thanks to them for helping me with this presentation and for this presentation I have used the WordPress font in this presentation so thank you for all listening to me I hope I haven't bored you guys