Responsive Webfonts: Realtime implementation Day 5

Welcome to this part five of this video. We are already doing a lot of typefaces and then we are learning the technical aspects of it. But in this video we are going to see how it is very comfortable to develop in a web based platform, how it is very comfortable to develop in a mobile based platforms and why it is very important to understand how a developer really does lot of things in developing typeface. Okay, I am going to show you certain responsive typefaces and I am also going to show how you can understand the web based typeface typefaces which is safe for usage and how it can seamlessly work across different devices. And your choice as a designer makes a big difference. Okay, let's jump. So when you see, we have seen introduction of typeface, we have seen the technical aspects, we have also experimented with an unconventional medium. We've also seen the real time implementation. I think a lot of people have used this activity and a lot of people have seen the work. What they shared is really immense. They have reflected their personality, they have reflected all of their work. But let us also understand in real time why it is very important to have a real time understanding of a developer why it is important for somebody to read across different, different devices. Like let's say how he is viewing in the mobile app, in the tablet, in the, in the web pages and let's say if you have a different device. So this responsiveness towards the typeface is all dependent on the choice what a designer makes. Okay, let's go and understand this. What does mean by this responsive typography? See, responsive typography has like, let's say this is a practice of making text adapted to a different schemes. Why it is very important it is to ensure that the readability and the aesthetics and the consistency is seamless. That's the exact reason for this.

Okay.

And also it is to ensure that context and this involves various types, line height, spacing, all these things could be adjusted in order to create the seamless user experience. Okay, let us understand why it is important. See with lot of devices right now, we all know it, okay? Like smartphones, tablets, it's like very, very crucial to understand this and also make it appealing for different devices. That's why we are doing this. Ultimately it's not like just for fun, we are doing it right. We have to be very functionally understanding why it is. And also there are web based fonts also there are many responsive typefaces available. As a designer, you have to first do a research and understand why this typeface is Very important. And how it is related to my user for that particular target market and how it is seamlessly working across different devices. Jagdish, how will I know it? There are a lot of open sources where you can find out guys. But let me make it very clear first, the technical understanding. Okay, let's say if you're using any web based app, you have to choose the typeface size, the relative units, the media queries, CSS frameworks. Okay, see Media queries, CSS frameworks, relative units. You don't have to worry. Whenever you're handing off a file, this itself automatically goes for the developer. But you need to know what it is. Let me tell you, with mobile app mostly they will develop with Flutter or React native or they'll develop with core Java.

So.

But what happens is whether that typeface, whatever you're choosing it should be also available in their platform, whichever they're developing. If it is not there, then there is no point in giving the typeface at all because your developer will not have a language to even develop. Okay, it is a simple understanding. What is this? Em, REM and all. Jagdish, whatever you are seeing, it is not required to really understand this. But it is good to know. That's what I can say. Okay, like let's say EM is actually called element, REM is actually called roots element. Relative to whatever typeface you are developing, you have to show that equivalency. Let's say in pixels. In typeface we call it as 10 pixels, 25 pixels, 100 pixels.

Right?

But for the developer it will be EM and rem. That's the simple difference because you don't have to break your head much. Okay, so it is actually a relative unit using this EM and REM instead of fixed units like pixels. This allows text to scale based on the default user font size. This is exactly why that particular developer wants this kind of a unit, so that he can develop it comfortably. Okay, this is the thing right now I'll share a different, different what you call Google Material design, Google Font website. Okay, let's go for the Google font. You can look at this option guys. They have a lot of options available. Okay, choose whatever is the typeface which you want. Like let's say we'll go for railway font. Okay, so you can find out lot of options. Like let's say if I increase this typeface, how this railway will work. Like whether the thin, how it will look like, whether in the thick, how it will look like. You can experiment and play with this because Google has pretty much given this option which is browser friendly and you can use any font, test it out mostly whatever Google has suggested. It is all web based, optimized, proven, it's all responsive based, proven in web you can safely use it. Because if that is not there, many times Google Font will not suggest you that. Let's say if you found any new typography from somewhere outside. If it is not available in Google font, it's better to leave that because your developer will feel so much of difficulty to develop in real time. Okay, Please keep in mind also if you want to see it as a paragraph, you can check how it will look like. Maybe how it will look like in 200 typeface, maybe how it will look like in thin. So you can find out in 400 pixels how it will look like 26 pixels, how it will look like, let's say in 32 pixel how it will look like. And you can find lot of materials. Also let's say when you go to the section called knowledge, you will know the difference like why it is important. Let's take web fonts.

Okay?

See, whenever you're using the web fonts, it is very, very important to understand what a web based developer is actually feeling. See, after we've chosen a typeface in our use of the project, we have to either choose a font delivery service or acquire the font. These are effective three steps in using the web font.

Okay?

Because whenever you are communicating a web based font or maybe a typeface, first the developer will check whether it is responsibly available for all the web pages, whether it's fluidically, seamlessly integrated for all the tablet, mobile app, everything. Because let's say if you are developing in a core Java, maybe if you are developing in angular, maybe if you are developing in css, maybe if you are developing in any kind of a technical platform. Because technical platforms I also don't have idea developer keeps developing in different platforms like let's say QT Android, understand what type is that particular platform is capable of developing. That much is enough for a designer. Even I don't know Technically it's not required also. But it's good to sit with the developer to understand what kind of a typeface is suitable for your developing platform. List that, study that and choose between that. It's good to do a bigger projects with that aspect rather than reinventing the wheel. Okay, you can do it. But also make sure that new typeface, whatever you're suggesting, is possible to develop in that platform. Maybe put project can also be Taken to develop that new typeface in that platform. Then later you can develop as a project. But that takes its time. Okay, so that's why it's good to read this kind of an articles to understand. Okay, so read that. Like let's say if they're saying first we'll need to load the files, font files, then we need to choose the reference those files and assign the weight and styles. And once if they are done, then they'll finally get into the fun stuff, the typography. While the entire Google font knowledge is to guide later part will cover first articles. Okay, so they have given some articles why it is important to understand this and put it in the real time typeface, real time web pages to see the real fun how the typeface is coming. See as a designer, we'll see this typeface is good, this is thick, this is bold, this is kerning is good, spacing is good. But whenever you are giving for a developer, there are hell a lot of difficulties to develop it in real time. It will not seamlessly flow across what you imagined. Maybe in the web page it will look back. Maybe the user who is going to use your mobile, they'll use very, very, very small typeface. They'll use very medium typeface, they'll use big typeface size. You can't control, right? But your web the find whatever you're choosing, it should be catering for the small, medium, big goals. That is why developer is putting a lot of efforts to develop that. You can read this. How to assign values, how to assign weights, how to do that, how to optimize. Pretty much you don't have to do everything else. You have to just research and find it out. Based on this, the developer will actually take to do it. Okay, like let's say the foundations of web typography. You can read this. Why using the web font is very important. Reading and writing on the web, see how it is seamlessly across different devices, how it is how the sizing changes, how the responsiveness changes. So your typeface should be very, very capable to adopt that kind of a change in dynamic and flexibility. Then and only the typeface is tested and proven. Can you see Helvetica? Can you see Times New Roman? Can you see Roboto? These are all like very, very proven typeface. Because this has tested and proved with millions and billions of people. Okay, so you can see how it is. So go, go through this Google material guys. Because this is very, very Google font. Because this is very, very useful for people who are developing new typefaces. Okay, like let's say if I'm doing this kind of open sans.

Okay.

If I wanted to check it out.

Okay.

You can even check for different languages, guys, it's totally up to you.

Okay.

You can find thin how it is, you can find thick how it is. And then if you want to do a testing, you can can do something called type tester.

Okay.

See you can increase the weight also you can increase the width also you can reduce the width also see how it looks like. Oh, it doesn't look good. See you can do a pretty much testing and trial here itself. And you can see italic how it will look like. Oh, italic doesn't look good. Okay, let us increase the typeface. Let us put a left Allen, let us put a central and how it will look like. Okay, this is italic, this is width. So how much you can able to test it out, you can try it out.

Okay.

And you can find out lot of details about this typeface. Also like let's say if it is in lettering, if it's. You have to find out the origin of how this typeface looks like or maybe in the Latin how it can look like, how the origin came. You can read a little history about it. When you move the mouse, the exact output comes here and you can find it out. Okay, this is when you're doing a very deep study about a typeface, you can try it out. But for choosing typeface for your project, it's pretty much enough to do this research. Okay, so understand open sans is humanistic sans serif designed by Steve Mattson, type director. And this version contains 897 character set which includes standard Greek. All these things are available but it upright stresses open form and neutral yet friendly appearance. It was optimized for print web mobile interface. This is what we want. This typeface is already proven for that. So you can directly find that.

Okay.

And also has an excellent legibility and characteristic in letterform. So whenever you're creating a different typeface in web mobile, everything, you don't have to worry about this typeface open chance because it's pretty much proven. And you can see 27 billion usage have happened top countries like US, Brazil, India. So when your target market is in India, whenever target market requires this kind of a typeface, you did it in your user research and found out. You can even take this statistic and say already this font is used by Indian people. 1.67 billion people have really seen that. That much of times it has been seen. So it is Very recognizable. Hey developer, please develop it. See, this is how you understand the technicality and handoff and you can do it.

Okay?

You can get this font, you can download this here, you can install it in your browsers and try it out. It's pretty much simple.

Okay?

So it is very, very useful whenever you are understanding this background. Guys, I already told you the definition, I told you the importance. And let me see, let me show you a little case study. Also Boston Globe website is a prime example of responsive typeface. By utilizing this fluid grids and responsive images across flexible typeface, this particular site has created a seamless user experience with the proper readability, excessive zooming, scrolling. And also you can take smashing magazine if you take a real time magazine. Also if you take a web based magazine also it will all look very consistent because they have exactly researched and analyzed and they did that responsive typography system that adopts to different sizes and screens. They use a domination of REM units and media queries. See, they really understood why it is very, very safe for web as well as mobile app as well as for the real time printing in the magazines.

Okay?

To ensure their articles are easy to read on both large desktop monitors, small smart screens also. See, these are all like proven case studies. But when it comes to your own project, you have to be very clear on that.

Okay?

Okay Jagdish, what happens when I use like this? 50% lower bounce rate happens with good typography. 70% user preference for the serif based bond. Okay, so you have to understand this terminologies. You have to understand the statistics also. Then only you can reduce the errors. You can reduce the what you call, what you call the. The inconsistencies and make sure your user experience is retained.

Okay?

Yes. So yeah, I told you web based safe fonts performance optimized. You can take from the Google font and also you can pretty much take from IBM material design. You can take from a Tassian material design. You can take from Google material design. That's all available. Guys, same font family, same study has been done. Take that which is web based, which is responsive, which is suitable for seamlessly going across all the devices. Okay, so why it is even important is your loading time is pretty much dependent on that. Guys, let's say if you choose a very different typeface which is not web optimized, what happens? The web page will never load. The web page will never load and the user will find disengage and he'll go for the competitor 60 to 75 percentage. 60 to 70% user engagement drops. That is why as a designer, whatever you choose the typeface, it's directly going to affect your user experience. Okay? So keep in mind you can use these materials which I already told you. Yes. So in mobile app you can use like there are many developers who use in flutter, react, native SwiftUI. So this supports this responsive typography, allowing a dynamic adjustment. Okay, you need to understand this, this is a little knowledge guys, you can understand. See, you don't have to be a developer to understand his roots. Okay, please, please take a little carefully. So as a responsive typography developer or maybe as a good designer, you're choosing a typography, you need to keep this in mind. Prioritize always readability. This is more, more important. Okay, so make sure the readability is the utmost priority and test across different devices. Read that Google Material font, whatever we have chosen and test it out whether it works in all the devices or not. Use many tools and frameworks and provide to your developer what he wants. You don't have to stick to it strictly, guys, you can understand what your developer is requiring and then you can seamlessly do that.

Okay?

And have a well balanced and functionality. It should look good, it should have a readability, it should have a consistency, it should have the functionality working. End of the day, if you're choosing a typeface even the user is not able to read, what is the point in giving that? It should be very, very carefully chosen. Okay, now I'm going to give you a little activity. Guys can create a responsive web which is well chosen typeface. Do the research properly. Let me write it for you. Do the research properly.

Okay?

Make sure it is web safe, development friendly.

Okay?

And also aesthetic and also functional. See if you're ensuring this, what happens is you will have a. Sorry guys, I'm extremely sorry. Yeah, I think it's visible. Okay, so if you're doing this, what happens is you will have so much of clarity when you are designing something font and then you will have a justification and the same justification you can able to put it in your portfolio as well and tell the developer, hey, this is what is it even you can explain to a HR or somebody who's asking about your project, hey, see I've not taken any font randomly. It's all understood, researched, properly, functional, usable, developable and it's all web safe. And that's how I'm reading. That's why I'm using this, that's why I'm scaling this. This is how you go deep and Understand and scale your project. It's not a random process, guys. It takes little time. So that is to try it out on your own.

Okay.

And you can do one thing. And you can do one thing. Guys, let me share my screen. Also let's say if you're having a frame like this. Okay, let's say if you're doing a typeface here, I'm just showing a Figma screen so that you can directly develop a typeface here. Okay, so mostly you have to develop a web based font and which is safe, optimized, developable and also usable for functionally and aesthetically good.

Okay.

And I just typed out a sentence here. I'm just. So once you're typing out some sentence like let's say typeface here, you can go and adjust it. The tracking. Maybe I'll take five. Okay, tracking five percentage is not good. Maybe I'll keep zero. It's good. Maybe I'll go a little minus minus three. Yeah, it looks better. Maybe I'll put leading with 35. Maybe I'll put. Maybe I'll put. It's not good. Okay, maybe I'll keep it like this. Maybe if it's center and how does it look? So you can able to play with whatever adjustment you have here. But there is a plugin in Figma also which is actually called type scales. Okay, this is a beautiful plugin guys. You can try it out once if you select the layer and then if you click type scale it will give you a kind of reading. Can you see here what's happening? See your heading can somewhat look like this. See it is 1728 pixel but the REM value is 1.2. The developer will definitely understand it easily. You don't have to break your head. If you are using any kind of a subheadings it can look like this. If you are using any kind of information, it can look like this.

Okay.

See how it is coming. Maybe you can put it like this. Maybe your call to action button could be something like this.

Okay.

Submit the form. Maybe your call to action button could be something like this. Maybe I'll keep a. We'll draw a rectangle.

Okay.

Let'S say if your poster could have a heading like this. So you can very well check it out in the Adobe itself, in the Google font itself. How it is really working with headings, subheadings, thin letters, bold letters, italic. Or you can also experiment it here using this type scale. And see type scale massively helps you on finding out the sizes and giving the details to the developer so that they can able to develop it properly. Okay, maybe I can reduce it a little bit. Introduce the Typeface to maybe 700. Yeah, maybe this could be my call to action. Something like this, right? See now I'm having a heading. Now this is working fine. Now I can able to tell clearly to my developer. Hey, see, this is how the subheading can be. This is how the lettering can be. This is how the spacing can be. This is how the kerning can be. This is a REM value. This is the call to action. This is how it looks like. When you give this clarity to your developer, he will have so much of understanding. Okay, this guy has researched it out properly. Yeah. 1.2 rem is possible to develop. Yeah, it's web safe. Yeah, it is developable. Yeah, it's responsive. See, this is how you go detailing and present it. Guys. Come directly with your experience, guys. You have to practice it. That's why I've given you a task. Use a typeface, research it out, understand its depth and put it in your portfolios and show a very good webpage response of it. Because when people are seeing your study and then you're seeing your implementation, they'll have clarity. This guy has understood typeface properly. Okay, I wish all the best to do this and if you have any doubts, you can ping me in this video or and also share your final work. What did you do? And also share your final work. What did you do? So that I can able to give you feedback and I'll read each and every comments before responding to you. Okay, we'll see you in the next video. Next video is going to be AI based video. It is more and more interesting and important. We'll see you in that. Okay, take care guys. Bye bye.