Real-time FIGMA - Typeface Implementation" Day 4

Welcome to this wonderful video. We are in the day four now. So what we are going to learn particularly today is the real time implementation in the digital way. Because lot of times what happens is physically we did in the last day, particularly the last video you could have did that activity and lot of interesting, interesting, interesting output has been come out and people have used various mediums like stick, people have used mediums like clay, sand, charcoal. That's like very, very normal what people try to explore. But in this video we are going to see a digital way of how you can implement and also we are going to learn about hierarchy. We are going to learn about how we can able to navigate your user based on the sizes of the typeface, what you have. And we are going to see some real time case studies also along with some plugin in the Figma. Okay, let's jump in. Just to recap what we saw in the day one is introduction of typeface.

Okay.

Second, we saw about the technical aspects of the typography. Third, we experimented with an unconventional medium and also the day four it's going to be real time implementation of the typography in the digital works. Okay, so let's go and understand that first, first the practical use of typography which we know very carefully. But let me tell you the practicality of using in the print industry. People are in the editorial design, people are in the publication design. So these people will use lot of softwares like let's say Indesign, like let's say what you call a Coral Drop, Photoshop. So this kind of a usage will be very, very high. And also people in the digital media, people in the advertising agencies and branding studios and everything. But let me also tell you Adobe Illustrator is a very good tool which everybody can use. It's where you can able to experiment the typeface, you can able to adjust the spacing, width, lettering, everything could be done there. You could use it in Photoshop, Sketch, Figma also. But pretty much these are all the tools which you can use. Okay, and also how you can practically use it's fine. But what are the case studies like where you can bring all these elements from? Because lot of times you will not know which typeface to select. What I have to do, which I have to select. Let me give you an example in this, okay, you can go for Google material design where the types faces are huge, very well established typefaces are already available. You can find there are experimented typeface which is proven with a very good kerning, very good spacing, very good Lettering, very good tracking which you don't have to think much. You can just drag and drop and use it. You can use the Figma resources directly which is open source.

Okay.

And you can try IBN Carbon design systems also which we saw in the last particular set of videos. You can use Airbnb design system. You can use New York Times. You could also use a particular website called Kudos Coolers. Okay, you could also use something called Google Font. Okay, so these are all the places where you can go and experiment it. Let me show you another particular tab guys. Okay, which is called Coolers. I'm just sharing the screen. So this particular website is massively used for choosing colors. Okay, so they are, they are used for colors. But when you use for typeface there is an option called typeface generator. You can try that. Okay, see you can use colors, you can create gradients, you can do lot of what you call color picking work and all those things. But massively you can use for understanding font also. Okay, you can make a note of this co L O R S dot civo. I'll paste a description also in the link. You can able to try it out. Okay, so they have already well established certain serif base, sans serif display, handwritten monospace. If you're using serif then the library is already there. Look how much typeface is already available. You want to use sans serif, you can able to take it out from here. Okay, like let's say I'll go with this. Like let's say I'll go with this Archivo black. Okay, let's see how this works. So whenever you're, see, whenever you're having this, they will have a little history about what is this typeface doing. Archival black is initially in print and digital platforms. The technical and aesthetic character of the font are both crafted for high performance typography. See, look, the entire typeface has a history and why they have invented based on that context. You can apply it for your project. It's not like hey, this font looks fancy, let me use it. We are not just ornamental, we are not just creating art ornamental and all these things. We are very functional to the point, solving some problem of the people, right? If it's a very critical application, it's a very crucial application. You will go very deep and understand why this context really works. Like let's say if you're using a typeface design in the cockpit of an aircraft co pilot is driving, that you can't use something like a very fancy text. You can't use Something like a very less kerning. People will not understand whether it's 35 or whether it's 85. Then they will take a wrong decision because their entire focus is in the window of the of the pilot who is driving systems are monitoring. But they will give you only a small what you call a minor attention over there. For that attention itself, your Typhoon should be able to cater that need properly. That is why understand your user and functionality and understand what is this typeface is also specifically designed and then fix it. Okay, so they are saying it is designed to be used simultaneously in print as well as online support over 200 languages. Archiva is actually a typeface family from Omnibus type. It was originally designed for highlights and headlines. See, they very carefully put it. You can't use it like a paragraph. See, that's why you have to read it very carefully and see 13 pixels. This is how it looks like 16 pixel. It looks like 13 is not really good because for paragraph it doesn't work good. But look at 32x it looks really nice, right? You can try and experiment it in your software whenever you're using. Okay, they've written the license and they have written Google Font is there. You can go to that and you can download. See, you can download this option here also. Totally, totally fine, you can copy this. There are a lot more materials available. See, if you want you to type it here. See, look.

Look.

Right, so you can able to find and also it will recommend you certain similar suggestion. Also you can try it out. Maybe if you want you can go back and you can try some ornamental also like let's say if you wanted to try it out some kind of a handwritten. Maybe I'll use this. Yeah, maybe I'll use this and use your Typhoon. Okay, so this is like a handwritten. Let's say if you're designing a poster. Let's say if you're designing a web page or something for people who are using a very personalized kind of an experience you wanted to give. You can use this kind of retrofit or you can use this kind of a handwritten so people will get a clarity look, it looks better for the paragraphs. It looks better for the subheadings. It doesn't look better for the big big headings and all. Okay, you can see this is a favorite of mine. A talented photography student I know writing something down and squealed and ran over a beg her for a sample of writing. It was worth the effort. Oh, I'm really sorry guys. Yes, so you can find Here, okay, because it went back, the screen got little off. Okay, so this is a handwritten font which I was talking about. Okay, so you can see Annie uses your telescope and it will not be very good for headings, but it will be very good for sentences, subheadings and sentences. Okay, you can see the details about why is this typeface really better? And what is the license, what is the Google font available? And you can download this directly. So all these things are pretty much there.

Okay.

Yes.

So you can use monospace, you can use display, you can use sans serif. So as much as possible you can able to use with your available typeface, whatever you have. Okay, let me show you another example also. See, look at this website. Look at Apple's website. Okay, I'm just taking a page here. I'm just loading this page. I'll go to the home page. So Apple has introduced something like Apple Intelligence. Look at the hierarchy, how they've kept it. The big heading, the small heading, the information and the visuals. See, typeface creates you a hierarchy. Typeface creates you a kind of visual hierarchy. Where and what needs to be placed. Let's say I'll go for this iOS 18 preview. If I'm clicking this, you can see there are a lot of visuals. There are only less text. But you can see the screen, See, they've exactly made. This is the heading, this is the subheading, and this is the information. And this is a call to action. See, using the typeface, there is no visual in this particular screen which I'm sharing, but there is a visual hierarchy which has been already established very carefully.

Right.

So this is the beauty of a designer. You have to navigate your user exactly for the headings, subheadings and the flow which you wanted to ask your user to do. It's not like the user picks that flow. That means your visuals is bad. That means your visuals is not guided. That means your visuals is not thought through properly. Okay, so this is the way you can able to guide your user properly and you can able to create it. Maybe if you are putting it, little gray people will not read it very fast, they'll read it very last. So you can able to create that hierarchy within you. Okay, so you can see the headings, the subheadings, the visuals, the. So typeface is where you can able to navigate your user into your own way by creating headings, subheadings, navigation, pictures, everything. You could create lot more things. I'm just giving you an example. Let me go to another tab and I'll also Show you one page. Okay, like let's say if I have to create one poster. If I have to create one something like this, maybe I'll just create a little.

Yeah, something like this.

Maybe I'll create a black. Maybe I'll create a little what you call button.

Something like this. Okay, something like this.

And then I'll add a text. I'll reduce this typeface, maybe.

Okay.

I am the best of the best in the world and I am presenting the best of my work in this particular album. Take a look. It will take only five minutes to view this. For more information, contact me@designforchange.com.

Okay.

I'm just creating a normal text here.

Okay.

See, this is a poster I have. I've not used any visuals, guys. I'm just using a basic poster. Okay, I'm just creating another call to action button.

Something like this.

Okay. Okay.

So this is like exactly what is happening here. Okay, so you can see there is a available option called visit my website.

Visit my website.

I'm just giving a call to action, something like this. But for this call to action, what I'll do is I'll create a very big header. Like let's say the font could be something like 5,000.

Something like this.

Okay, you can use something like this.

Visit website.

Maybe I'll reduce a little. Maybe I'll put 2500. Okay, maybe I'll reduce something like this. No, it is even more bigger. I'll reduce it even 1500.

Yeah, I'll put a website, something like this. Okay, visit my website.

See, look, it's just a small poster. I'm just giving you a small example. But you can do it for I. So I means it's a big. So the user will first see this. Second, they'll try to read this. Third, they'll take a call to action, something like this. Maybe you can move the I the description little here also. Maybe you can add a little text here also. Like let's say you could find thousand. Yeah, this is also fine. So people are reviewing this. They'll get a clarity. Okay. Acha, this is. What is the thing? Okay, this guy is presenting himself. This guy is having a website also. Let me go and check the website. What is this guy saying? He's saying only five minutes it will take. Let me go and read that. So using the text hierarchy, using the bold and using the italic, you can able to create different navigation for the user. You can guide the user with the proper hierarchy and then making them take a particular call to action will Create all the difference. Like let's say if you're doing this in a white color. Okay, maybe you don't want this.

Okay, Visit my website.

This is also enough, right? Call to action could be even just a plain text. That's okay. Maybe you can able to put a little underline so people can click it and go. So for this video I wanted to give you another exercise case. Okay, so now take one poster of any project. Try to create a visual hierarchy for it. Try to create a visual what you call, what you call link for it. Okay, the activity is very simple. You can create a poster, webpage layout or anything. Try to have a hierarchy. That's the only word I'm again and again repeating. Use any software. Create a story with 10 percentage visuals and 90 percentage text. Do not use the vice versa. Okay, I guide the user properly. Create a hierarchy and then apply all the typographic principles which you learned, which is like kerning, okay? Just like spacing, just like lettering, which is like tracking. So you could use everything, guys, you could use everything. Like let's say if you're clicking here, see you could use everything here. I'm just increasing it. See, I'm just changing it. So I'm just increasing the typeface here. So all this adjustment could be possible. See, look at the spacing has been improved, the kerning, the tracking has been improved. So use whatever is comfortable for you in that FIGMA software if you're using that figma and then try to do if you wanted to use center aligned, if you wanted to use middle align, whatever you want, you can able to try it out.

This.

Okay, so this options is pretty much there. You can able to do it fine.

Okay.

Yes.

So I wanted you to do this activity and post me in this YouTube video because I'll read each and every comment and give you feedback once. If you're able to do it properly, then we'll go for the next video. Okay, we'll see you in the day. 5.