 And they are very specific to the brands, just for the record I bought this, this slide is only for education purpose, just in case my mom used this video later on. Coming to the latest type that we have is the digital type of coffee right, that we are all interested in, that we all work day in and day out. There is a magazine which beautifully uses type, if you see this hardly any visual design as graphic elements as visual design hardly there. Right, they are just using grids, they are just using type from you know bold, regular, good heading here, then category and things like that. So this is something that we are all very interested in both day in and day out digital type. And then there is obviously the artist typography, this is a screenshot from Dribble, are you guys out of Dribble? Yeah, so if you just go Google Dribble, I think you will find typography of Google, you will find lots of artistic manifestations of types in different forms and places. A very great example has always been the I love in wine example right, have you guys seen that? Sorry I didn't put it in. So that was very iconic, I mean it didn't have any symbols of high rise but it just had high art in the wine, like symbolic. So what is my Carma as a design thing, what is the technique in this context and how does it do it? It communicates bottom line first thing, this is a simple carded design for who is back, if you notice there is no design or visual graphic design actually involved. It is a very, very type based design which clearly says, you know if you read it and this said I think the contrast was good you know. She said yes, he said no. But if you read further down, she and her parents said yes. He said no to all other girls. So it is a very simple creative and then you go to, that is what it does, first thing that there is a motion involved. Every example of amazing website right, the bulb is made of all different kinds of type faces. The heading is big, bold, it is connected to a bulb. So it is a very friendly, very creative, very informal kind of particular site. And if you look at it, again as I said there is no great graphic design involved. It is actually tied, if you remove all the graphic involved and still have just the type, you will still get the same feeling. Obviously the other small visual elements had all that, but they have used type so very well right, just to reflect their particular brand and the kind of work they do. They call themselves of some way, it goes with their name. So it is again thing that the type starts to design. The third very important, it provides structure, except for few games or enterprise, charting applications. You have huge, huge content, text content. Now when you have lines here, just remove the lines as you wanted to remove the other lines. There are small thin lines, luckily because of the contrast you can't see them. Without even those lines, you see how well the structure and this completely type of the links, left justification, the heading consistently across the entire site. The color difference if you want to quickly get, if the market is up down, things like that. Nice big bold top header type there. So don't just randomly place it in there. It is part of the grid, part of the entire design there. Type says I have feelings, no really, they do have feelings. So what does it say? So the style is really strong. If you look at the phones right, if you look at the type. Yo flexor and yo flexor is what I am using in the presentation. They all feel strong. They are all sans-serif phones. They are all very clear, very straight to the point. So they have a feeling. Some phones say I am feeling cursive and right and forwards, curves. So it is very easy to add and I like that, use that specification. Some phones say I feel classy. So there is a difference between classy and being informed. So it is very easy to add and that is exactly what you need to use in your design. What exactly are you trying to do with your design? What exactly are you trying to do with your application? What exactly are you trying to do with your mobile and use those sort of things. Maybe your logo, maybe any different poses. I don't get it. You can't just put some font and say you know, this is the kind of site we are on. This is the kind of design. So that is like a very fundamental rule you need to understand in your sit back and ask me questions. So a couple of common choices for headings have always been georgia-irriging in vitica. Obviously because they are really supported across the web by default without having to use computers, things like that. Common choices for body copy have always been georgia-irriging in vitica. This is a very fundamental rule. Don't go ahead and it's very basic. You don't have to be a designer. So it's just observations. Any font, I mean if you have seen in the bottom copy right of this used bottom, it's a very, very key of font. I'll show you some examples. Average head-in font size. It lies between 18 to 29 pixels. You can just google it up. Same case for body font. A separate font. Obviously there are exceptions but if you want to go by income pool and not very much, use those kind of things. This is a site that we did recently. Resolution has gone a little bit while. But this is the heading that we have used. This is georgia. The font that we have used is Vardana. This is pros and cons. 16 pixel font on which particular typeface. That's also important, right? So for example if I use 16 pixel font, I would be like, it's too much. It's good if you want to be responsible design and you want to be on tablets and things like that. Because there you want to stand out when the content is... I mean you have very little to do. So I think 16 pixel depends on the typeface. But as I said, if it's georgia or something, I would not mind. But if it's something like Vardana, 13, 14 is the max I would go. Like in this case, we have used 13 at some places, 12 at some places. And cleverly kept. So in the next slide, I have just shown a few. There's 12 and there's 18, there's 25, there's 10. If you look at this, it will be different. But the entire design again is done basically on styles of typography. So one of the things is a conscious decision. Here we need to maintain the grid on the right side. And if it was left, like if you see, it's not fully justified. If it was fully justified, even the last time would have ended here. Here, yes, I mean on the screen, try it on your web browser where the actual site is and let me know. From our feedback, I think coming, we have done with that client and a lot of people found this better. But yeah, I mean a lot of you really justify or you keep it left justified. In this case, if you look at on the web, also because the number of words that you put in a single line are not beyond 5 and 6. If it's a very really long line, then it's a problem because you can't really read so much. I mean you have to split it in columns. That's something that a lot of people miss out on. They just slap me, they make great typography, something like this, but it's across the page. It's very difficult to read, very difficult to follow. Hyphenation is something that you should do. Yeah, I mean you can use these techniques to just hyphenate. I think there is an example like on, yeah. So then you fall back on... You're saying Indian characters. Yeah, that's a good point. I mean, so that is definitely a challenge, I'm not saying it's okay. But largely it takes care of any kind. In terms of solution, when you're doing this presentation, I think it would be much better to use Georgia in the font of Georgia and whether in the font of Kaurina because that would make more sense to the people who are seeing it. Yeah, yeah, probably just change that, but it's just not really enough. But good to people. The idea was I wanted to actually have all the fonts, like in the first leg where I showed different fonts, but yeah, time constraints, it was also easy. You don't like large families, right? So stick to just that. At most, I have just three font families. Don't use like, you know, something like in the next screen, right? You're like, I really don't see like five different fonts only used and it makes just no sense, right? So it's a very basic tool. I'm sure designers are already... But use it as an example, not more than two or at most three. There's something that I want to share. There's usually a pattern. These are the sum numbers. So usually the header font says almost twice the body size. Okay, the vertical view. So line height body copy font size, about 1.48 is the ratio. That's kind of huge. Space between paragraphs and line height. Line height is 0.754. You can use the simple math. It may not be accurate, but just a small, simple command for you can use it in a day-to-day type. And you're doing, especially content-oriented websites. Something that I can do is you can 65 anything. A very simple example of a page that ClearDrip has. If you notice there's hardly any digital design. Again, as they say. Notice the number of fonts, the way they are presented. The size, the color. You have 1, 2, 3, 4, 5, 6, 7, 8, 9. No, no, in terms of treatment. They're same type faces, but the way they're treated, right? In terms of size, caps, weight. Simple things like this, you can make the entire design. Right? You don't really need to. I'm not an illustration guy. Right? So I don't have to be a, I mean, even with that limitation, I can do a page like this, which is very neat, usable. And the alignment that you just put July on top. So that's very, very, very. Only to Faradar sign, I think. This is like 10, 17, 9 in pixel. This is in percentage and that is in em. Again, there are a bunch of fonts of each of these things. Like pixel or em, em scales. Or scales up or scales down based on your design. Pixels is fixed, right? So if you scale down your design or reduce your browser this one, it will probably not scale down to the thing. So there's a difference. All three, even percentage. So the font says we hate who don't treat us well. Another example of it is this messy page. Again, one of the fundamental things. Never use bold. Never use strong for our body. It just, you can't just read it. It's not readable. It's a very basic even thing. It says we are no social like you all. We have friends like Pufon, Google Fonts, Type Setter, so on and so forth. So the last two on web. A lot of new techniques have come, which have, you know, helped us move away from just Valdana, Georgia or Lucida. And all of these techniques are rampant and used very well. Has been also used on the side, right? I think they use, I was talking to Jayce. Type bit, right? So it's, I mean, I think he gets a pretty good number of hits, but it doesn't take a hit on this server load or optimization to a decent extent. So that trade-off is still external font. So let's not use font boundaries because there will be a lack of a server that will take a hit and things like that. But if you have CDN servers, you have servers from Google who are supplying new fonts, there will be a slight lack, but take your whole design to the next level. Things like Type Setter, Type Tester, sorry, can actually help you check the fonts even before you are entering them all, using them in your design. Quick functions over the lazy dog kind of text define the entire properties for it, compare the different fonts, see what works for you and then choose, right? So immediately you get to compare. You don't have to if I do that, you get to see all the fonts and test it right there. Things like fit text, take a very plug-in, helps you scale down or scale up, or basically use the hitting creatively across different mediums. The way you are responsible for your fonts nowadays. Obviously these techniques are not completely developed. For example, this cannot be used in your body. He says you cannot use it for your body font. It will not scale up and scale down accordingly or you cannot guarantee a hundred percent. But for headaches, he says, you know, use it, it will work perfectly. So there are all these techniques and new ways of using Type across the way and mobile and this decontrol it and so should you. Some examples reside completely done only on Type. Beautiful, right? It's very rare or a lot of... I mean, especially don't give it what it should type or don't use Type as their design weapon, which in my opinion is, I mean, we can do much better, right? We can do brilliant sites much more than this. Obviously there are few exceptions who really do it well, but in large as a community, we need to adapt this. So if you look at this, I mean, it's completely done in Type. The headache, the main types, if you roll over, the text goes up, things like that. Just go and check this thing. These grid systems, which allow you to just, you know, make a template for your application, WordPress or any other web app or website that you're building. You know, use the grid systems. I mean, 80 percent of the types are taken in Type. They're not being maintained to me. This was the conference site. Very interestingly, people have this notion that Serif fonts are not supposed to be used. That happened. Serif fonts are basically the Georgia's and ones which have these in the end, strokes in the end. Those are the fonts that are called Serif fonts. Notice how well he is used even in the body, right? Earlier I said we use in art design only in the headings, but even in the body they've used it very creatively. Again, completely Type-based. So there are like few examples, brilliant examples out there. Use them, study them, go to the next level. So fonts I like to travel a lot. Browser, mobile, poster, track, watch. They're everywhere, right? iPad, which allows you to consume content. Again, beautifully done type. Completely complete. The design is based on type. So if you see the grid, the layout, very, very well done. The next stuff from Microsoft, Metro UI, they're a type of mobile. What do you guys use? Brilliant. I mean, so they've used, they've come back strongly from the previous experiences, right? They started from back, and they did something in Windows 7, and then they really took to the next level. So the entire design is all type-based and using clean types, right? So if you notice the entire font boundary, they're like very clean, very edgy. Do the point, do the task, get out. It's very soothing, you know? It's there. You don't have to worry. Then you have apps like Scenet News, which uses your regular fonts, but yet it's very, very well done. It doesn't look like a very boring app. No cool stuff. CSS3 and table grid. Pathetic looking table can become a decent looking clean table like this, right? It's just type. It's just pure type. So these are very basic things that we need to look at. We need to use them in our day-to-day implementation. Obviously, you have CSS tricks. You have the letter pressing effect. You have the shadow effect. You have background stuff that can change. There are a lot more CSS3 stuff that have been on the rise for the last one or two years. But again, based on different browsers, different support structures, you need to decide what to use for your project. But you can do stuff like, you know, almost creating a project like this. A poster like this, sorry. It's too bright, but it says all human beings free, but it's like... First time when you look at it, if you're a designer, you will feel it's done on illustrator raw. It's not just font. It's just not like. But it's completely rendered on CSS3. Just a simple example of one more simple, unstyled paragraph of how it can be converted. How many of you guys wrote CSS here? Okay, so I can be fast on this. There is some bit of CSS next. So if you notice, right, there's the heading, an article by someone, and the main, there is created file. So simple CSS like, you know, just define the heading, have letter spacing, change the color, add some shadow to it. Then you create a span so that the second line, we can apply some styling to it. Create a class file meta. Define the stuff, letter spacing, border-border. Again, one more meta span, which we'll take care of the second one. Defining a paragraph style overall. Here we're splitting column into two. So the main text, if it is there in the paragraph, we'll split into two. Again, it's not going to be supported by all browsers, but I'm just showing you a technique I mean, amazing. You can do so much with CSS3. So this defines the column gap. What is the gap between two columns? The line height and color again. More stuff. This is, again, a very interesting key thing. P colon first check, the first line of the... I mean, the first column is defined and the first made bold. So we're going to see that company using CSS. Now, we have not modified the earlier. We have not touched this. We only defined the CSS and this was the outcome. So if you notice, it's completely transformed. It was split into two columns. This was made italics. This was given bold. This was span once. This is the span two that we talked about. So this is, you know, this whole new level of beauty added to it. And it's much more pleasing. It's much in terms of actual design. Open up Photoshop and do stuff. So this was completely done using simple CSS techniques. So things like this are very easy, very simple. We should use just a recap. We saw the basic rules. Size, life, context, weight, reset everything. If you're working with browsers, margin, padding, sense spacing, before you start, define your font family. A lot of sites don't do that. Have a fallback, font family, first, second, third, fourth. Use high contrast. Red and red is bad. A lot of things. People use white on blue. White on yellow background. You can't just read. You need to have a high contrast. Use typography rate. See if you can use the sponsored type as well. A lot of people say that web design is 80% type. Obviously it doesn't hold true for all of all the apps. Angry birds know it. I won't stick to that. But great guys like GPPs are one of the great guys on type, the way they use it. Their entire site or the kind of projects they do are very very focused on type including their site. So just wanted to show you this example. Some great tools made only to help you type better. Much more content in a very elegant way. Stuff like Stipey Stipey STYUK It's an iPad app. So that's what it says. Great design needs us. Treat them well and they will be friends and resources. And thank you for not seeing me. Conference in June. So if you guys are interested to participate, sponsor or just can take the company. Yeah we'll see what we can do about it. We're also hiring. We've got few people from UK who are coming now. But we want to have more people. So we'll see what we can do. Should we see the type and colour? Should we treat them differently and then come to a conclusion? No, definitely not. I showed you the example there. Couple of examples. You can use colour and type together. How does colour hold? Bold font with red. It's going to give you a different. It still gives me a little bit of nature or that kind of emotion. So you can't really separate them all. But on the other hand you can use type with just monochrome and still get some sort of effect. But you can't do the other way around. You use just colour and try to do away with the type of emotion. For example, a bold type. Not necessarily it will give that kind of a pale feeling. It may give you a bold feeling because the type is bold. So we need to use it together. What is your choice? What is your experience in terms of colour? I think there are a couple of typography guys. I think there are. There was the same guy who actually converted the entire thing to Dave Nanu. So it should be tough. Yeah. Pardon me? On common On normalised. Okay. So British one is asking what is the take on normalised versus resetting everything. So it does your job on normalised. You would do for resetting. Where in you are making your padding, paragraph, body height, line height, type height, standard. So that if you have missed out you find any particular stuff. I mean you have not left it out. Okay. When I mean reset everything it's not the reset.css that I am talking about. Yeah. So that's not what I meant. Reset in the sense of actually resetting everything. Okay. Actually defining not the reset.css or normalised.css I am just telling reset everything. Make sure the paragraph is defined. Make sure everything is defined. Even if it is zero or times new Roman or what don't leave anything undefined. Because it will cascade, right? Then the execution part of it as you said could be normalised, could be reset, could be any library that you use with. Could even be a custom CSS that you use in your projects over and over. Okay. Thank you guys. It was nice.