Difference between Font & typeface - A Journey Through Typography History" - Day 2

Welcome to this particular day too. In this typography we are learning little bit about the history and the background and what is basically typeface and how it is. Okay, so there was an activity given and also if you are not watched the earlier video, please watch and come back here.

Okay.

Because we are going to see little technical details here and we are going to see typeface is not just understanding certain basic terminologies like kerning, spacing, lettering. It's beyond how you perceive it through a brand. How you perceive that entire brand identity is communicated through the typeface. What you choose to the typeface, what you first perceive. Leave about choosing being a designer, that comes very later. But as a first go, when you watch a poster, when you watch a particular pamphlet or when you watch a particular like let's say a board or a movie sign or maybe any kind of notification which you even see in your phone, the very first interface, what you make with the brand is actually the first visual. What you see, how you see that will actually make a big difference in the way in which you perceive that brand and why it is very important because of that only a brand is actually building a great reputation and a story and a connect between customers. Typeface is not just random and people use it or choose it based on whatever they have in their library. It's about the life face. People create an identity for a brand through choosing the right typeface. And a lot of money is being spent for choosing the right typeface. And branding is being done with millions and millions of dollars for industries. And you will not know Apple has spent 80 crores, like I think $80 million, not crores, $80 million of rupees for designing just their logo. So that is the very first interface, what people get to see about that connection with that particular brand. Okay, so the subtlety and the nuances towards choosing a typeface is more, more important than before 30 to 40 years. Okay. Okay, so in this video we are going to see that. Let's jump in. Okay, so the day one we saw about introduction, day two is about the technical aspects of typography.

Okay.

First is we need to know the difference between typeface and a font. See, typeface is actually a subset of everything. It's a holistic family. Font comes under it. That's the basic difference. But when you put it, typeface is a design of lettering that includes a variation in the size, weight, slope, width and so and so. But font is something which is coming under it. Like let's say if you say font, font is A specific style or a weight in that particular typeface. Okay, so typeface is a big family. Font is a very small niche under it. So within that typeface, it refers to a physical embodiment, whether it's a file or metal cast. So it was referred to a earlier phase where the printing industry was actually working. So there is a difference. But when you see typeface like, let's say, Helvetica, Times New Roman, Arial. So all this is a typeface, is a specific design of a type. Typeface takes a lot of time, guys. It's not easy. It takes little time to really design a typeface. It takes even years, takes months to design that. But font is very simple. It's like a subset of the typeface family, whatever it is, okay? So it is an artistic expression. And also a lot of numeric also needs to be done for a typeface. Alphanumeric characters, punctuation marks. Typeface is not just building abcd, it's also about the numeric characters, punctuation, semicolon, colonial, how the mathematical symbols will look like. So everything is type, everything is formed as a typeface family.

Okay?

Font is a little style in it. That's why it's a specific style inside it. Okay, you can understand that. And also even you can take Helvetica, New Times, New Roman, a particular weight in Helvetica, a particular size in Helvetica, particular, like let's say 10 point or 12 point, that refers to that particular font. So you need to get this clarity. Because a lot of people think both are same. No, it's not same.

Okay.

So the history, the distinction between typeface and font originated in early days of printing, so when mobile type was introduced. Because what happened is there needs to be a lot of segregation, which is coming out of the need. And people need to type in the newspapers, book publications. The requirement of each and every industry was very different. So what happened is people started creating some kind of a differences in a family of typeface in a small font, which is in the family of the typeface. I need to make these modifications little. Like let's say if in a typeface printer, if you go for a block set printer, so they will have an entire typeface which is kept in a box or maybe in a blocks. Okay, that's a typeface family, let's say it's Times New Roman or something, in that they'll have a separate die for A, B, C, D, E, F, G, whatever the characters. So that's called font. They will have the Variations of that font. So each and every die is actually a small, small font, whichever they have. So they needed that clarification, they needed that segregation in order to print it for the different, different requirement. Let's say if it's a newspaper, let's say if it's a small pamphlet, let's say if it's a book printing. So everything is very different.

Okay.

So you need to have that understanding first.

Okay.

So live activity, I'm giving you in the last. So next, in typeface there are many different type guys. Serif, sans serif. There are script based font, decorative fonts. In order to make it very simple for you, I just take one example from the Google image.

Okay.

See sans serif is something which is very normal, which we see futuristic or maybe the current sentence, the present typeface, whatever we are seeing. Serif is something classical. You can see there is a kind of small, what you call gates which is available, small, small symbols which is available in the bottom. In the top what you call. They have taken an example of Playfair display. But serif is something which has legs in the bottom, which has small tongs in the top. So this is actually a classical way of representing. Because when you see very Roman literatures, when you see ancient literatures like 100 years before, 200 years before Serif was used predominantly. But Sam serif is very modern. Like currently what we are using is actually many typefaces of Sam serif. Yeah, you could interface, you could interplay with that. Also you can create a retro kind of a style. You can create a classical kind of a style. That's totally up to you. Okay, that's the point. So typeface font history we have seen. And also there are many decorative typeface also like let's say if you go to Google, if you type decorative font. Okay, I'm just sharing the another window. So you can see there are, there are many museums and art places where they are just still preserving that.

Okay.

So you can see this is completely a vintage kind of a font. So people want to perceive that, people want to preserve that and keep it. And you can see there is swashing tint. So these are all like very decorative and ornamental kind of thing which they keep it only for the record purpose. Or maybe that style is maybe replicated in, in current poster design. Also maybe if you're taking a very classical movie like 17th, 18th century, you want to still take this typeface.

Yeah.

At that time designers really take that typeface and retrieve it and try to create a consistent across all the numericals. Numericals and alphabetics. And then they'll create a thing.

Okay?

Because typeface designers are very, very largely experimenting and working on this kind of an experiments, okay? Yes. So this is a part of it. When you take an anatomy of it.

Okay.

Like you can see. See, I'll tell you an example. The anatomy is very simple, guys. You don't have to memorize all these things. Just make it very clear. The two lines, whatever you're seeing, is actually the type, size, width, okay? In that width, based on that character only, we are going to understand which is on the top, which is called ascendance. Which is on the bottom is called descenders.

Okay?

So you can see my mouse moving. This is the top line. This is the bottom line. Don't take this as a top line. That's actually a capital letter line. But that's not meant to be taken. Only the small letter here. And this is the line between this taken.

Okay?

This is the width. Anything which goes above this is called ascenders. Like you can see here, ascenders. Anything which goes beyond this is called descenders. You can see here, Descenders, right? This is the exact benchmark for you. Okay, understood. So the line between the bottom and the another second line, bottom is actually called leading. Like have you seen in the paragraph sizing in Adobe XT or maybe in the Figma or. Or maybe if you are using Photoshop, Illustrator or something, you will find there is a difference in this movement of the space. This is actually called leading. The bottom line and the second line, bottom. Distance between the two bottom lines is actually called leading. Not the top one, not the middle one. It's exactly the bottom and the bottom. Very simple. What does it mean by kerning, Jagdish? Kerning is actually a difference between two letters. See, two characters, very simple. Hey, Jagdish, what does it mean by tracking them? Tracking is for the entire word. Like let's say if you do for an entire two letters, that's called kerning. But if you do for entire word, it's called tracking. I think you can see this fair example. These images have taken from Google, by the way. I have to tell that. And kerning is only between the characters. Tracking is for the entire word.

Okay?

You can evenly space it. That's called tracking. Kerning is only a small. Maybe you can have a kerning in one word itself. Like very different on the last of the word. You can make it very different. That's up to you. But tracking is very even. What does mean by leading. Leading. I already explained you, right? The distance between the bottom two lines. So this much technical details, if you are understanding this is more than enough. You don't need much clarity. Okay, Kerning, baseline and leading, that's it. Okay, So I wanted you to first experiment this. Take out 2, 3 serif based and sans serif based which you have taken and try to understand what is the kerning they have. Why it is very important, Jagdish, if you ask me why, particularly when you're designing a script, particularly when you're designing a documentation, you need to choose the typography or the numerical characters based on the sufficient kerning it has. Sometimes the letters can have a positive kerning, positive kerning, Sometimes it have a negative kerning also, which is not really good, which affects your readability quality. Also, whenever you're designing a name board, whenever you're designing a sign board, you need to choose that readability and legibility very carefully. There are certain typefaces like Helvetica, which has a well defined kerning space and leading space and also tracking space, beautifully aligned. But in certain typeface, like let's say when you take Futura, when you take something like Garamond, it is little tricky. You need to find out whether it really works perfectly or not for you. Once if that is clear, then you can bring that in your case study, then bring that into your projects, bring that into your portfolio. But if it's not, sometimes you have to redesign your entire font system and you have to redesign everything. Many brands does it, they design their own font system and then they create a benchmark in that industry. So that is very much possible. But this is the basic terminology behind it. Okay, I explained you about kerning, leading, tracking. So it is very, very vital for a typeface designer or a product designer to understand this basic terminology.

Okay?

And based on that you can draw a hierarchy. Like let's say you can have a bold, you can have a light, you can have a regular, you can have a heading, you can have a subheading, you can have a text info. So however you want, you can able to hierarchy and do it. Okay, so now this is the basic understanding. See, teaching typeface is very easy, that's it. But practicing making mistake, learning, reflecting and implementing back is the most difficult part. Because that's the best way to learn typeface. Even when I took a program in Germany for this particular typeface session, I'm a product designer, basically I don't know anything about this, but the way in which the activities was given in that exchange program was very different. They asked us to roam in the street and find out which name board and signs you feel is attractive. Take photos, document it. That's the raw activity they give. From that activity we started developing a different perspective towards it. From that activity we started developing, okay, this is how a brand is perceived. Okay. When I see this particular brand, okay, this is what I really understand, okay, the emotion behind this, this particular typeface is very different. Like when you see particular typeface, like let's say if you see a Mercedes Benz, okay, I'm just sharing my image, sharing my screen, okay, like let's say if you take a particular brand like this Mercedes Benz, maybe I'll take a. Okay, I'll take this example, okay, that would be better. So like let's say Mercedes Benz. This is actually silver colored logo. This is actually a kind of a star which is providing an equilateral distance, equilateral division between a full circle. That's like three is a very golden number in the universe. Law of three. They call, they've exactly pointed out and they wanted to show them as a supreme assy brand. So that's why they created us pointy sharp edges. And also they have chosen serif based font. You can see because they are a very legendary brand. Like 150 years they have built a supremacy in the car automotive industry. And many of the automotive technologies like flywheel, diesel engine, four stroke engine has been developed by them, has been designed by them. Karl Benz and all these people have started designing this in the first and many industries have benchmarked so they wanted to build that supremacy. That's why they have created this kind of a typeface. And you can see the spacing between them, you can see the kerning between them, the tracking between them. So they have kept it even because they have to build that kind of a supremacy by showing that typeface to them. Because when you see that typeface, when you see that brand, it has to go in line. If it is not, then what will happen is you will perceive a very different meaning towards that particular brand and you will not associate its legendariness. You will say, hey, this company is 150 years. I cannot really believe. You will have that skepticism inside you and I will show you one more logo, okay, More than this, I'll show you another logo. Staedtler is a very good example. They have modified their typeface. They have taken their own freedom to do it. But you can see even though they've used sans serif but the thing is, they have exactly created a very good space between the letters and they have created a capital letters for them. And then they have bolded and they have created, created a weight for it. And they have to make it established because these people are pioneers in the pen and stationary equipments. They are like German technology and they're well proven. There is another brand called Lamy also, and there are, there are other brands which has exactly proven their particular style in order to create that. And there is only one particular A which is in a slanting, which is not in the typeface they have created. They have, they took some liberty to design that. Why? Because they have to resonate with that brand. And you can see there is a spartan symbol available here. Like a warrior. It protects you, it protection. It fights like a warrior. It's like many tools are there with Staedtler, like let's say pencils and sketch pens and color pencils. And also there are drawing tools available, drafting tools available. So Staedtler is one of the very trustable brand, I would say. Okay. They have chosen a typeface and the characters based on it to make you understand so many brands. Does it see even that Staedtler has evolved after a longer point of time. See, their spartan image is still reflecting in. In today's logo Also, right from 1998 to 2001, they have kept that typeface in a different way, but they've tried to align their brand language in 1973 and then kept it similarly 2001 till now. For the last 17 last 20 years, they've exactly kept like this. So each and every brand has a kind of similarity to observe that jagdish. This is okay. Theoretically, it's fine. How do I build my own. How do I build my own typeface for my brand? That's why we need to do this live activity. The first activity is you could label and classify. Like let's say, which is kerning, which is spacing, which is lettering, which is tracking, which is leading. All these things you can do, okay, you can classify each typeface and you can do. You can understand the anatomy and classification. But the second activity is more important. Take a brand, take a typeface, write 500 words about it. Yes, it will make a lot of sense, guys. This activity will seem very simple. But the moment when you write 500 words about a particular brand or a logo or a type is what you really resonate. This builds a story narration around it. When you are able to see that much of story around it see how I decipher two logos in front of you. Just a second. Okay, sorry, I'm just sharing the screen now. Okay, so the activity one is labeling these parts. The activity two is writing 500 words about it. The moment when you for this particular brand or a logo or a story around it, you try to revamp it, you try to recreate it. Whenever you create a own typeface for your brand, for your project, for your case study, the same habit will come with you. When you are able to first decipher the other elements, which is out there in front of your house, or maybe in your travel to your office, or maybe in your bus stand, wherever you're standing or a railway station, wherever you're standing. Whenever you find a typeface, try to understand why that people have given like that. What is the deep meaning behind this brand and this typeface. When you're able to write 500 words for it, this then you will be able to decipher a lot of elements. On a first go, you will only see few things, think little deep, use Google also possibly and then go little deep. And then level three you will find so much of clarity. Okay, this is the reason exactly of these. Once that clarity is there, then you can able to recreate for your own brand. When you're doing okay, make sure you pin this activity, whatever I asked you to do. Because once you're able to do this activity only you'll be able to make a big difference and make the course correction as well. And what I'll do is I'll try to give you feedback for what you've exactly did. Because once you are getting a feedback and then you're correcting it, definitely you will be able to improve it. Okay, I hope you will do it because seeing this video will not change anything. Taking action and pinning this to me will actually make a big difference of you. Okay, we'll see you in the next video. Take care.