Typography & Vertical Rhythm for UI Designers and Web Developers

1. What we will cover in this course: Let's see what we will be covering in this course, and designing in this course, and developing in this course. These are not Dribbble shots, these are actual exercises of this course, so let's see them. This is one of them. Another one. Let's hide the grids. There is another one, and another one, another one, another one, another one, and also this one. Few more ads, we will be designing like these, and there is one more theme for this ad, you can see over here. But how we are going to achieve this, we are going to learn the effective use of typography grids using white space. We will master the time and space skills for designers, and actually it's called white space. This is all for designers. We will also learn how to match different font, how to pair them, how to select effective fonts, how to convey your message using typography. How to effectively use grids to design different layouts and a lot of great stuff. Even for developers, I have a lot of interesting stuff like this VW unit, you can see over here how it expands and contracts with the responsive web design, and we will discuss a lot of responsive web design typography or it is called basically responsive topography. You can see over here it in action, large, medium. You can see how the font size is shifting. For small, you can see the heading size just shifted. Then we will discuss how to use custom typographic skills in Bootstrap. Also in Bootstrap, how we are going to use custom typographic skill with a blog post like this. This is also called vertical rhythm. We have also implemented vertical rhythm in this exercise. So to learn all about these techniques and standards for typography in CSS and HTML, you are going to really enjoy this course. There is more exciting stuff in this course like mobile screens and their font sizes and PT, SP, DPI, DIP, all different screen resolutions mess and how we are going to design with this mess. So these are few IOS devices, all different devices having the same blog post designed for them. This is one of the exercise. Also, we are going to look for Google Android typography skill and how to use it effectively. Also, I will share with you a secret how to connect your screen or how to see this design on your mobile screens so you can easily choose and select fonts, and design, and colors, and everything else. So seeing is believing. If you can see your design directly on a mobile screen, you can design a lot better. Okay, now the question is, who should take this course? I don't recommend very novice designers or designers who have just started using Photoshop to take this course. This is a medium level difficulty course, so all the designers who already know a bit of Photoshop and they know how to use it, they know the shortcuts, they should take this course. Also, all the developers who know basics of HTML and CSS are welcome. If you just started learning CSS and HTML, I think this course is not for you. You might not understand few things. Also, I need you to download and install latest version of Photoshop CC. Any designer who think that his design have something missing or something strange, then he should really take this course to improve your design. I am sure that this course is going to improve your designs a lot even to the Dribbble level or Behance level designers. So let's dig in and get started, and I will see you in the course. 2. Introduction to Typography: Whether we are designing for a mobile app or any website or web design or even advertisement, 95 percent of every design is basically Type, which is text. To use that text to your advantage, you need to be a very good designer and you should be very good at Typography. All the good designers they possess the skill. Text is major part of any kind of media, whether these are ads, TV, websites, blogs, books, movie titles, apps, everything, there is always a lot of text you need to see or consume. What is typography? If you can use this text, or written typed properly, it can act as a duel edged samurai sword, or maybe more than a samurai sword, for every designer. What is the purpose of typography? Whenever you design something or you are designing an ad or app or anything, you are doing two things with your type. Number 1, you need to effectively arrange it for legibility and readability. If your user can't read it, there is no sense in designing such ad or mobile app. The second is, you need to communicate your mood, your message to the reader or viewer. These are the two basic purpose of using typography in your designs. Now, typography for Web and Mobile Apps, we will be covering a lot of things in this course. So just some basics that people only scan websites and blogs. They don't really read it unless it is very important. The second thing is we will be answering a lot of question regarding website topography, like what font we are going to use, whether I use this font for business website or blog or a web app. For mobile apps, we will be covering how to use typography on small screens because it is very tricky to use typography on small screens and there are different iOS and Android, different specifications of fonts and sizes which Apple and Android have specified. Whenever you design something, you should ask questions to yourself, which font will load faster, or should I use five fonts or three fonts or 10 fonts for my website? Sometimes we designers do something like this; "Proxima Nova is in trend these days. Guys, I should use it everywhere." So whatever app or website your design, you just put your Proxima Nova font in there. That's very strange. Each website have their own specifications, business type and everything, so this is not wise. We will be covering a lot in this course, don't worry. Let's see what we have next. Now, if you are a novice designer or developer, you might be thinking how to combine different forms, which font is suitable for fun websites, for business websites or a fashion blog. Also a lot of developers I have seen they only use Open Sans because it is the only one I can easily combine. Don't do such decisions or these design decisions. These can really get you in trouble if you keep on designing using same font for like 10 websites. I will be guiding you through a lot of examples, even with Bootstrap to show you how we can use different typographic techniques for even developers and designers alike. So let's get started in the course and move on to the next lesson. 3. About Font and Font Families: Every designer should be familiar with some of the typographic terms like font, font families, and what are font style. Let's see what is basically a font. Font is basically a set of characters of specific style and size. Actually, in the old days, the size was relevant to font or type style or type face. Nowadays, one font is available in different sizes, so you can use any size like 72 points, 12 points, 100 pixels or whatever you want the size, because it's digital, you don't need to make a block of metal piece of font character. In the old days, the fonts and characters were made with specific metal blocks. Let's see some of the examples of fonts. I am showing here two different fonts, one is Amsi Pro family and the second one is Crique Grotesk font. These are different sizes, we can use any size, there is no limit to sizes. We can use from one point to unlimited, size is not relevant these days with fonts. Now, what is a font style? Or we may call it font-face also. For modern usage, you just keep in mind that it's font style. Specific style of a font, you guessed it right. Now examples are Bold, Italic, Regular, Medium display, Condensed, Black, Semi Bold, Bold Black, and the Extrabold. There are a lot of different styles of fonts these days. Here are few examples of font styles, I'm using Amsi Pro Ultra Style, which is ultra bold, right now. There is one more style over here, which is Amsi Pro Light 48 point size, and we have Proxima Nova Condensed, the characters are condensed or pressed together, and then we have Proxima Nova Extrabold. These are different styles, like this one is condensed style, this one is Extrabold, this one is pro, ultra pro, and this one is light style. Now what are font families? So font family means that there should be a big family of the same font, so it is basically different font styles that are designed on a same geometry, shape or style. For example, Helvetica is a very big family, it has condensed to styles and it has a lot of bold styles than a lot of rounded styles. Helvetica has more than 30 or 44 different fonts in a single family, it's a very big family. You can also find different big family Google fonts from this site I'm going to show you right now. This is site better Google fonts, and you can see here we have this Raleway family, and you can see we have 1, 2, 3, 4, 5, 6, 10, 15, 16, 17, 18, different styles of a single font. This is basically a very big family, a lot of styles you can see over here, this Source Sans Pro is also a very big family, Roboto, also a very big family. Also if you can see that we have Roboto condensed to, if we have over here you can see this one Roboto Mono, this also belongs to this Roboto family. It has different style, but they are actually the same family, they are cousins. Then we have Source Code Pro, which is also related to the Source Sans Pro, and we have this Roboto Condensed, it is also related to Roboto family. These are different Google fonts that have very big families. Look and see over here EXo, EXo 2 and Kanit, they also have very big families, a lot of different styles. The advantage of a big family is that you can use a single family and you can have a lot of different styles to choose from when you are designing. This is all about font, font size, and font families. Let's move on to the next lesson. 4. Typography Anatomany terms: Now, in this lesson we are going to learn some of the typography terms and a bit of about type anatomy. So these are very crucial because we can easily pair force by learning these typographic terms. So let's get started. First of all, we are going to learn about base-line, mean-line, and cap-line. Cap-line means capital line, so it is the line, imaginary line sitting at the top of capital letter. Then we have base-line, which is very important. Base-line is the line on which all of our letters they sit on it. The mean-line is basically at the top of our small letters or we can say x-height. This is basically the height of our small letters. So this is basically mean-line. The most important is this baseline. So make sure you know what this baseline is. One more thing that some of these letters go above this capital line and some like these y, p and other, they go beyond this baseline. So just keep in mind. Let's learn about the x-height and capital height of any font. So basically, the height of the small letter x is basically the x-height of any font or any type. The capital letter height is basically the capital height. Now, x-height is very important and the ratio between x-height and capital letter is also very important factor in legibility of font. So now if we have good x-height, it can be easier to read on small devices or small booklets or something like that. So if you are designing for mobile apps, you need to consider a font with larger x-height. Also the efficient fonts like Helvetica and few others, they have x-height from 67 percent to 69 percent of capital height. So they are almost 65-70 percent of the height of a capital letter. So this is also another factor also, this is a factor between different font classifications. The older font types, the old font families, or old fonts like Garamond, they have low x-height. Now, let's learn about ascenders and descenders. Ascenders basically are the letter portion that is extended above the mean line or you can see over here the top of the d. Then we have descender, which is basically extended downwards from the baseline. So everything that drops from the baseline is basically descenders. Counter is another very big factor in recognizing or legibility of any font or type. So there are two types of counter, open and closed. Open counter is basically the open portion of funny letter like this. It is not totally closed from all sides. The space in-between this letter e is basically the open counter and then we have closed counter. Closed counter is basically the space enclosed in any letter like this o and the top portion of this e. Why we are learning about this? Because they can help with legibility if we have very big counters, that font or that type or style is very legible. Now this is also another factor to letter to this x-heights. So these two play a very big role in legibility or fonts counter and x-height. Let's learn few other typographic terms, so we can easily identify any type. So here we go we have this beak, which is a bit pointy end off any capital letter or small letter. They are found normally at the start and the end of the letter. Then we have this stroke. You can see the top portion of this p letter, there are two varying strokes. One is very slim at the start and at the middle it is very thick. So basically this is called the stroke difference seem to take and it is very important part in identifying different classes of fonts. Then we have the lower loop, which is basically the lower part of g. You can see over here. Also different classes of fonts. They have different this loop style. Then we have ear. Ear is basically this pointy ear style knob getting out of this from g letter. This is also very important factor. It is different in different fonts. Then we have this apex. Apex is basically the top part of any letter where we have this pen style remainder of something like gut neighbor over here or something like that. Then we have tail. This is basically the lower portion of letter y. Then we have this terminal which is also like tail, but it is not extending at the bottom. It is basically extended at the left or right side of one letter like this a. Then we have serif. Serif is basically any line or anything which is basically separate the font types, like we have this serif fonts, they have these slabs at end of their letters like this. You can see over here y. So also at the bottom of y letter. So this is basically serif, and this is all about different typographic terms. I hope that you have enjoyed your lecture. Let's move on to the next lesson. 5. Humanist Old and Transitional: In this lesson, we are going to see different classification of types so we can use them effectively. Before going into seeing different classes of types, we are going to learn about diagonal stress. You can see at the bottom of here, the O, I have shown a diagonal stress. You can see this O has varying rates of strokes, so here on the sides it is a bit thick, and where I have put the diagonal stress, it is basically the slimmest stroke. Where the stroke is slimmest, you just draw the line from slimmest to slimmest and it shows the diagonals stress. This is one of the factor in identifying different fonts. Now the first one is humanists. Humanist, as the name suggest, it is basically how humans write with the pen in the old times. You can see the strokes and the writing style looks like human writing with a pen. Now, it has two basic factors to identify it, one is this very sloping cross bar of e. You can see it is like 30 or 40 degree angle, and you can see here in the letter Bear how it is written. Second is, you can see the serifs at the bottom of this n I have pointed out. You can see the serifs are bit curved like a human foot, so this is one other factor. So this is three factors. It has a very good diagonal stress, very slanted, and then we have sloping cross bar and then we have foot style serifs. Now I have shown you old style or garalde. These are two different classes, old style and transitional. Old style was a bit old and transitional was built upon, or you can say, improvised version of this old style. Now, the old style have very few factors to identify it, one is this diagonal stress, it has a good diagonal stress, less than the humanists, but it has good diagonal stress. Then the top of these you can see these ascenders and descenders, they have this slope serif end, and then we have this W, it is very unique property of this old style or garamond garalde style. You can see over here the W have crossed version, so they are overlapping, it's like two V's, V letters are overlapping with each other. You can see I have highlighted this e. Inside the e, it is basically counter, so they have very less counter space. You can see here we have inside the e letter, then they have at the top of the T, you can see there beaks are somewhat slanted, and then if we look at the serifs, you can see at the end of the h letter they are not totally straight, they are a bit curvy. This is all about old style, main factors are this W and the beak, and these slanted tops of d letter and a bit of this diagonal stress in all you can see over here. Also you can see that the R letter have a caving stroke at the end, and if you look at transitional, there are a lot of differences with this. You can see at the top of the d, the serif is a bit very pointy, then diagonal stress is almost straight. You can see diagonal stress is almost straight, and also you can see inside this e letter, the counter is a bit wider or a bit more bigger than the old style, then we have this W. W is not overlapping, it is a bit different, and then also the beaks of this T letter, they are also pointing downwards a bit structural. You can say a bit structural. Also, there is one more difference I forgot about. If you see the stroke difference in the old style, stroke difference is that if you see this letter h, you can see here at the end of the h, we have a bit of less stroke contrast. The thick and the thin are very close to each other, but in the transitional, you can see the strokes are very a lot, thin is very thinner and the thick is a bit more thicker. This is also one difference between old style and transitional style. Here are some examples of old style. This is adobe devanagari font, and you can see over here how this font has laid out, it is an italic version of the font. Still you can see that T is a bit slanted, and in this font you can see it is maybe a different version, so that is why in different fonts some features cannot be found. Like here we have W. W is just like the transitional font, so sometimes these typhus designers, they mix different properties of two fonts. Then we have this Minion, Pro, it is also old style font. You can see over here still the W is different, but other properties like this ending of this r and the top sluts and top serifs, they are almost like the old style. 6. Sans Serif and Script: Now let's talk about modern fonts. These are called basically Bodoni, and their main characteristic is the stroke width. The stroke difference is too much, very slim to very thick. Then the other one is that this serifs are just like slabs, very thin strips, whatever I call it. This is the main property of this Bodoni. Also, the stress, you can see in the o, it is very straight, 90-degree. Now the slab serif or it is also called Egyptian slab. You can guess that they have serifs just like thick slabs, and that is why they are called slab serifs. Here is the most common typeface we use, which is sans-serif. Sans-serif have no serifs, or no slabs, or no ending at the end. They are very clean and very modern. This is all about this sans-serif. They have a lot of other classes of sans-serifs. Different typeface designers, they mix the qualities of old-style or sometimes Humanist touch in the sans-serif font. Now next is script or handwriting. They are different types of the script or handwriting fonts, but I am going to combine all of them in one. You might have seen this script or handwriting fonts. They are not used much on the web because I don't think that if you write a paragraph in script or handwritten font, and it can easily be read. Now I told you in the previous slide that sans-serif have a few other alterations, like this one is humanist sans-serif. Now you would have guessed that it share the features of this humanist type we discussed at the beginning of this lecture. Humanist sans-serif, you can see, the top one is Gill Sans. They have this ending at the a, and then they have a bit of stroke difference. Also, if you look at this Open Sans and the slants in the counter in the a are not very geometric. They are a bit slanty. If you look at the g, it is also a bit like humanist font. You can see, I am Open Sans-Serif and I am also Humanist Sans-Serif, and I look great. If you look at the g, it is the common factor in all the Humanist Sans-Serif. They are a bit like humanist or old-style. Also, this one another example is this Calibri font, Open Sans, Gill Sans. They are type of Humanist Sans-Serif. That is why you see Open Sans is very popular these days. One other variation of the sans-serif is Geometric Sans-Serifs, and they are built on some very specific geometry, like very specific triangles, rectangles, or maybe circles. They are based on geometry. You can see here we have the first font, a first example is Futura. You can see the os and the es, they are almost a perfect circle. Here you can see. Now if you look at this Proxima Nova font, it is very popular. It is also geometric. If you look at its o and es, they are almost the perfect circle. Museo Sans is also geometric. Where the word geometric is, you can see how they are built. The letter c is also built on perfect circle. Then there is another font at the end, Texta. It is also a Geometric Sans-Serif. They might resemble to Humanist or may have some curvy nature, but they must be built on specific geometric shapes. It might not be just circles or squares, it might maybe some deform shape of square or something like that. This rounds up our Geometric Sans-Serif and all the different classes. I am not going to go into too much detail of showing 16 or 17 different font classes. I think these are good enough to get you started. I will share some of the resources if you want to go ahead more than these, like a grotesque and other sans-serif. In the next lesson, I am going to give you an exercise to see how much you can recognize a font. I might be giving you Geometric, Humanist, and other fonts. This will be samples, and let's see how well you do in recognizing different type classes. Let's move on to the next lesson. 7. About Line Length: One of the biggest factor about readability is line-length, it really affects your readability. Now the question arises, how much length a line should have in a paragraph for optimal reading? Now, some say it's 65, 70 characters per line and 40 characters per line, something like that. I have seen a lot of articles and different books, and the range is from 45 to almost 85 characters per line. They are optimal. Now, why this optimal line-length? The problem is if you have too long lines, then the user or reader needs to move their head from left to right to read that line. Now if you have a very short line, then they have to jump from top to bottom, line to line again and again. This is going to produce fatigue in your user, even their eyes or head or maybe some of their muscles. From my experience if we translate characters to words, then almost 10-17 words per line is optimal. They might be 19 or 20 depending on the length of the word, but it is almost the average. Now, one other factor is font size. If you have good a line-length and you switch the font to the smaller font, then you have a lot of words in the same space and you need to change the line length again. Now, if you try to switch to small font, then the line length is very big and you need to read the long lines. This is one other factor so choose your font size wisely, so the line length is optimal. Now, what about mobile and websites? The mobiles have small screens, so I think generally the text should be a bit more bigger, body text should be bigger. Now, normally on mobiles the body text or the paragraphs are basically 120 percent of the size of the paragraphs on our desktop websites. If you're developing a website and showing different views of that website on mobile, on desktop and tablet, then you should take care of these. Also on mobile phones the lines will be less longer because we have less space. Some of the line-length principle don't apply there. Also, you need to shift the heading size and the line height too. All these factors you need to cover for the mobiles. On desktop, if you are a developer, you need to use media queries to adjust the size for the optimal line-length and readability. This is all about the optimal line-length and how we are going to use it on mobiles and desktop designing, if you are designing for mobile or desktop. We will dig in deep into all this stuff on mobile and desktop sizes in the last two sections of our course. Let's move on to the next lesson. 8. Text Alignements: Let's discuss about text-alignment. Now, a lot of designers say, "Okay, I know text-alignment, what is text alignment, I know," but there are specific uses for each of them. If you can use them properly, you can really enhance your design and readability. Let's see different examples and different uses of text-alignment. Now, first one is the very common most left alignment and left alignment is not used for right to left languages. We are talking about English and other languages that are from left, right. Now, left alignment is basically used for articles, paragraphs, books, headings, and a lot of other stuff. So mostly, it is the most common used alignment. Make sure it is not for right to left languages. Right to left are basically opposite to this. For the left alignment, it will be the right alignment. Next is right align and right align text is used for normally small amount of text. If you are using it on a paragraph, then you are really ruining your user and your reader. So make sure you are using right align for very small lines or very few words. Now, here we have the factor is basically right to left languages. For right to left languages, right align is the best option. Now, coming to the center align. Center align should be only used for important lines and not be applied to paragraphs. I have seen some designers using center align to four or five lines. I think it is not very wise. So maybe headings and taglines of some product can be center aligned or maybe one more line, but not above three, I guess. So here we have readability factor. Our eyes jumped from one to the next line, and they are normally predicting that they should be jumped to the same spot. Now, in the center align, they jump from one place to another, so it is not a straight line. Justified align is basically when your left and right sides are almost equal. There are no spaces at the right side. So justified align is normally used in books, and magazines, and newspapers. I don't recommend them using for websites or blogs. It is difficult to control them. You might need to change your text, or body text, or editing your copy text to really justify align your paragraphs. Let me show you some of the examples of left and right align. You can see on the right side, I have shown you right align, proper use of right align. I'm showing only three lines, and you might see this right align on a lot of business cards. Now you remember why the e-mail, phone number is almost right aligned on a lot of business cards, because it is very less text and you can see aligning it right doesn't hurt the readability. Now, on the left is a paragraph, so they should be aligned on the left. This is how we use left and right align. This is the proper use of left and right aligned texts. Here we have the example of justify align and center align. You can see on the left side, justify align, we have different spaces or rivers running inside. Some words are more spaced to the next one. Some have less space between them. So these are called basically rivers. This is when you try to justify align your text. So make sure there are not too wide rivers or very prominent rivers inside your text. Now, coming to the center align. Now, center align you use it on very few lines of text or maybe poetry, like I have used over here. I don't know how I wrote this, but this is how we should use center align, very few lines, and maybe poetry or something like that. Maybe some quote of two lines. So no more than two or three lines, I guess. 9. Line-Height (Leading): In this lesson, I'm going to talk about line-height and also it was called leading. In the past old days, they used to put molten lead blocks in between different two lines to separate them. That was called leading. What basically is leading? Is the distance from one baseline to the next baseline. Like we have two or three lines of text then the distance from one baseline to the next base line is basically the line height. Now, how much line-height should we have? It varies from 120 percent to 60 percent for body text. Body text is basically the paragraphs and text where we have a lot of texts. We need to read it. Now, for headings, you should not set it more than 120 percent in headings. Very big text, normally, the line height is almost from 100 percent to, or sometimes maybe 90 percent to 120 percent. For body text, it varies from 120 percent to 160 percent, and for headings, it is a bit less than our normal line-height. Here are few examples of body text line-height. Body text is basically paragraph, so don't worry if you don't know what body text is. It is a lot of texts which is meant to be read. On the left side, we have line-height 133 percent, or we also call it 1.33 percent. Thirty-eight pixel is the size of our texts. Basically, what we do here is, we multiply 38 pixels by 1.33, and what we get is, basically our line-height. It might be 42 pixels, 46 pixels, or whatever it is. On the right side, we have a bit bigger line-height which is 1.45 percent. You can see how it affects readability. Also if you have very tight line-height, you can see the bottom of the top tails, and tails of different characters, and the bottom of different characters is going to touch the top of the next line. This is a very major readability problems. Try to adjust the line height where you think it is easier to read. Now, here is some example for heading text. You can see on the left, I have set it to 110 percent, and the size of our text is 60 pixel heading. On the left you can see it is good enough. But if you see on the right side, I have increased the text size more. It is 72 pixel heading, and I have set it to 1.05 percent. How we are going to calculate it? Seventy-two multiply by 1.05, and it is near almost 75-76 pixels. Also, you can set it to 100 pixel. If you have 72 pixels, you can also set the line height, 72 pixels for bigger headings. Let me show you how we can set line-height in Photoshop for headings and paragraph texts. How we can control it. I have this text over here. This is a heading, and you can see, I'm going to select this text, and I am going to get this character panel. I already have this A character panel over here. You can see here we have 72 point which is our text size, and this is the control where we have to control the line-height. I can also set it to 72 pixels. You can see it is looking good. Even I can go below this, 70 points is also looking good. But if I go to 65, it seems a bit problematic, or maybe too close to. You can see over here, the i of the time is touching the g. I guess 70 pixel as the last we can go and 72 pixel is, I think, optimal, or maybe 75 as we had it before. This is always set the line-height. Let's see some other example I showed you with the paragraph. Here we had the paragraph. I'm going to select this paragraph and, you can see right now it is 38 point text size, font-size, and the line-height is 55 points. If I try to increase it to 60, you can see, it is still looking good but if we go beyond 60, like 72, you can see our is cannot jump that far, below it is a bit too much distance. If you keep on increasing this 90 or 100, you can see it is not looking like a paragraph but separate lines. This is a very big issue in readability and legibility, you should keep them at the optimal distance. I'm going to set it to 50. Let's see how it look like. It's still a bit close for me, I guess 55 was better. Now here it is. This is all about how we can set line-height in Photoshop and what line-height should we be using for body text and what line-height should be used for heading next. Even in HTML, you can set it to line-height property with line-height property. One is 100 percent, 1.2 is 120 percent, and same like this. This is all about line-height, let's move on to the next lesson. 10. Letter Spacing (Kerning): You might have heard different designers saying, okay, these, faults or this type kerning is a bit off, or these two words need to be kerned. So basically, kerning is the space between two individual letters of any type, or any font, or any word. So you can see over here the space between o and t, it is basically the kerning. If we look at this word, I have increased the kerning, so basically, they have a bit bigger space between the two letters, or even all the letters. Basically, what it means is that sometimes some of the letters, if you can see over here in the word topography, some letters like g and r are a bit closer to each other than few other letters like p and o and other letters. So this is basically called Kerning. Let's see how this kerning is going to affect our typography. So what does it means is if we try to have good space among our different letters, then it is more airy, openness, modern, elegant, stylish related to technology. If we have less letter spacing, then its mood is towards intimacy, and you might have seen using the very close letters to each other in different logos. Basically, less letter spacing is used mostly in logos because it really creates a problem in legibility and readability. Let me show you some of the examples of letter spacing or kerning. I'm going to show you the bad example and the fixed one. Here we have written the FedEx in two different forms. In the left one, you can see the e and x are very close to each other. I have not changed any letter spacing. It is the font's default. In the bottom, you can see I have adjusted the space between e and x, so kerning is basically the space between two separate letters. I have fixed the kerning between E and X. In the right side, you can see the E, D, and E, they look like they have more space. So in the bottom, I have fixed that. I have reduced the kerning between these three letters and it is looking more even to our eyes. So this is how we use kerning. Mostly, it is used in logos. You have seen FedEx logos, it is basically very tight kerning, most letters touching each other. This is how they made the FedEx logo. But this is how we fix kerning and what are the bad and good examples of kerning. Let me show you how you are going to access this kerning in photoshop. In Photoshop, if you don't see this A character panel over here, you can go to window and click on this character over here, and this will appear over here. You can see here, we have this V/A and there is a bit gap slash in between two letters. This is basically the kerning. We can have two options like optical. You can see this letter spacing kerning has shifted. So optical is basically related to your eyes, what your eyes sees, and metric is basically machine kerning, so this is software based. Then we have zero and other options are not available for this fault. These are two options right now. If you want to change the spacing between specific letters, then select this letter and use this control instead, like this one. Now, if I increase it to 200 percent, you can see that the spacing between a and c has been increased. This is how I use this Character panel to increase kerning. Select one letter, and you can use this tracking control, but I use it for single letters like that. This is all about how to use kerning in Photoshop. 11. Design Exercise to apply what we have learned so far: Hello everyone. In this lesson, we are going to design this awesome looking blog page. Now we have learned line height, letter spacing, kerning, tracking, everything. So let's apply that in this design and let's get started. I am going to use Google font for this exercise, which is Source Sans Pro, this is single Google font and on the right side, I'm using image from a free site may be Pixabay or something like that. You can use any image over here. I will share the links in the resources section so make sure you use the links to get this font, Source Sans Pro. Let's get started and I'm going to open up a new file and the width should be 1400 by 1800 pixels, 72-pixel resolution transparent. Don't Color Manage this Document. Click "Okay" and here we have our empty canvas. I'm going to press "Alt+Delete" to fill it up. We are going to use white color as the background. Select "White" over here, then again, press "Alt+Delete" and here we have our option Delete on your Mac. Now we have our empty canvas. Now we can start designing, but first of all, we are going to get a grid over here to lay out our things. About the grid, I'm going to explain it in the next section so don't worry about it right now. Just do what I'm doing right now. Go to View and New Guide Layout and in the columns use Custom preset. In the columns, you can also use this 8 Column and gutter width 20 or if you want more than that, you can use 30 like that and click "Okay." Now our canvas is ready. Let's get started and I am using Real Lorem Ipsum website to get the text over here, so I'm going to use Chrome to get that. Here are the two resources I am using for this exercise. This is Real Ipsum website and I really like how they have real text over here with the headings, everything else and we are using the Source Sans Pro Google font. If you want to open it in Google fonts, you can click over here and go to this page and select any font over here, like bold, semi-bold, or maybe select all of them and download from this button. Click over here, you can see here it says, Zip file. Download the zip file and install it in your PC or Mac. These are the two resources we are using. This is the one we're going to use for the heading, copy this heading text, and we're going to paste it in our Photoshop. Let's select this one Source Sans Pro regular font, size, I'm going to select 64 points or 64 pixels and I am going to select over here, Control V. I have the text over here. Let's use this grayish black color over here. We are going to use Source Sans Pro regular, but we need a boldface over here. This is a very long line. Let's right-click on it, convert to paragraph text, and drag this one over here, like this. Now we have a problem of line-height so we are going to use this line-height or leading 64 and I think 72 will be more than enough as it's heading. We will be using near 64 or it is 66. Let's make the bounding area of paragraph a bit bigger like that. Our heading is all set. Next, we are going to copy this Thursday, July something like this, this date. If you want this nine minutes ago, you can copy it. I just don't like this one, so I'm going to use this one. Just paste it over here. Now we are going to use 18 points text and it should be regular. Right now regular and we need to change its color to some grayish color, something like this, brownish gray. It is 808080. Because this one is not very important, we will do something like this. Then we need all this text to be copied, three paragraphs, copy and we need to paste it over here. Our text tool is already selected so we are going to drag it like that in this area like this and Control V. Now we have an issue of line-height over here so right now we have 18. Why not use 18 multiplied by 1.5, 27. Maybe we need a bit of bigger text, so we will be using 21 multiplied by 1.5, 32. Thirty-two points in the line height and 21 points for the text size like that. It is already looking good. Select this one, top one, we need it to be a bit bigger so we are going to use 24 points and with regard to 24 points, we are using 1.5. Its line-height should be 36 points. This is how I'm going to calculate everything. I'm using line-height 1.5, and I'm using this deck size to be 21, this one is 24, and this one is 18, and this one is 64. Let's align them all to the left. Select all these by Control-clicking on them or Shift. Click the last one and the first one and then press "V" and left-align like that. They are all left-aligned and they are looking good. Let's make this date a bit more dull like this one, this grayish color. You can use any color, maybe you can use something like this over here B6B6B6 and this is the color I got. Now our text is all set up. You can see how I'm laying out it, I'm using 1, 2, 3, 4 columns, this bounding area for this text, and we are going to use this area for the image. Let's draw the orange line over here, just select the rectangle tool and we are going to drag an orange line of 15 pixel over here. It's white right now so we are going to double-click it and select the orange color. This is f7a94a. Now, this is all set. Let's make it a bit bigger from this side extended outside. Now let's hide the grid line, Control colon, and our grid is hidden. Let's select this one. It is already looking very nice and cool so let's drag the image over here. I am going to use the same image so I don't need to find it again and again. Here we have Window, Arrange, Tile All Vertically, and this is our original design. I'm going to use this one, drag it over here, and close this one. Now we have a very big image, so we need to bound it in a box. Let's hide this image first. Create a rectangle over here, enable your guides, Control colon, and I am going to use this area for the image. This is my rectangle. Just move the rectangle below this image and we are going to create a mask. I'll click in between this image and this rectangle and here we have our mask. This rectangle is basically acting as a mask. We can also reduce the size of this rectangle if we want to. Maybe we need to move both of them to the right side. Just enter 1, 2, 3 pixels, so 30 pixels. I have moved a bit more on the right. Our design is almost looking great and complete. Let's add a variety and we are going to use Italic for the state and this is how we set up our design. It's really cool looking already, very nice and I think not many designers can design like this. This is very simple. I have used all the techniques we have learned in the previous lessons. We will improve this design at the end of the next section. Stay tuned and wait for more exercises. Before then, just take care and bye. Let's move on to the next lesson. 12. Hyphen, en & em dash usage: Today, we are going to learn about hyphens and dashes. There are two dashes, em and en dashes and hyphens. Now we are going to learn all about them. First, we are going to talk about hyphen. Hyphen is the shortest and it's located on your keyboard on the left of plus sign. Now, hyphen is used in three ways. Number one, it is used when a word is split at the end of a line of text, as you can see here in the word unrealistic at the end. It is also used to combine two words together to create compound words like you can see over here, fun-loving. There is a hyphen between fun and loving. Also, it is used with two words numbers like 20-42. These are all the ways in which we can use hyphens. Now we are going to talk about en dash. En dash is the second-longest in length and is used to show space of time or numerical range. You can see the examples like 9:00 AM-5:00 PM, July-September, vacation is from June 5-9. This is how we'll use en dash. Now, em dash. Em dash is the longest in length of all the three dashes, and is used to show a break in thought. Like you can see over here in the examples down the road and along winding road, it was. There is a pause in thought and that is how they separated it. Also, you can see in the next example, we gathered our supplies. There is a pause, all eight truckloads and started slowly. This is how we use em dash. Now I'm going to sum up this lecture about hyphen en and em dash just to make sure that you remember. Keep in mind that em for mega. Em dash is the longest one and en dash is the second longest, and hyphen is the shortest. Also, keep in mind that you need to use them where they are properly used and required. Don't use them anywhere you like. Even a lot of typographers or even on different websites, I have seen a lot of people making the same mistakes again and again. This is all about dashes and hyphens. Let's move on to the next lesson. 13. Using Quotation marks properly: Today we're going to talk about quotation marks. Now, a lot of people I have seen they don't know the proper usage of quotation marks. Now, we are going to see in this lecture, how to use quotation marks properly like a pro. Now, the first thing you need to know is that all the fonts, they don't support curly quotation marks. In the first example, you can see these marks are not curly at all. In the second they are purely curly, and in the third they are a bit like typewriter style curly quotes. Make sure you are using a font that supports curly quotation marks, and curly quotation marks are basically used in good typography. Here you can see I have shown few examples. "Hello there", she said. The curly quotation marks are properly used over here. I have seen a lot of designers and developers that they don't know the proper usage of quotation marks, and the types of quotation marks. There are two types of quotation marks. One are straight quotation marks, and other are curly quotation marks. Now, the straight quotation marks are normally used for feet and inch, and also they are called feet and inch mark or second and minute mark. These are basically straight, and the curly quotation marks are basically used when you are showing that someone is talking. This is the proper use. You can see in the first example, I am using curly quotation mark opening and closing at the end and start. Six feet is shown with just one straight quotation mark, and inches is shown with two quotation marks which are straight. The other two are the wrong usages of quotation marks. Now, on the screen I'm going to show you the shortcut keys for showing these or using these quotation marks in Photoshop, or any other program, Word editing program, opening single quote, Alt plus 0145. We need to press that while pressing Alt key. For Mac users, Option plus right bracket. Also the closing single quote, Alt plus 0146, and for Mac, Option plus Shift plus right bracket. Now, for the double opening quotation marks, you need to use Alt plus 0147 in Windows, and in Mac, you need to use Option plus left bracket. For closing double-quotes, you need to use Alt plus 0148, and on Mac you need to use Option plus Shift plus left bracket. This is all about using quotation marks properly and when to use which one, straight one or the curly one. If you have any questions, ask me. Let's move on to the next lesson. 14. Roles of Typefaces: Now, what are the roles of different typefaces? Actually, inside of one single family, you might have seen some fonts with names like display, caption, subhead, regular, italic, something like that. Actually, this display, caption, and subhead are basically the roles of that font or typeface. What basically display type is, display type is made only for headings or very big text. Text type is for regular body text paragraphs or a lot of text where you need to read it a lot. Now, there are also few other roles of typefaces like caption. If we have seen some image on Internet, you can see there is a grayish caption at the bottom. That is basically sometimes some font family have caption typeface in it, so you need to use that caption because it is basically designed for that purpose. The display fonts are designed for headings, so you cannot use them for body fonts or a very large or big paragraph. Subhead means subheading. Display means you can normally use it for headings. This is all about the roles of typefaces. Always use the role and define them properly. If you are using one font for display type, do not use it for text type. Let's see some of the examples. Now, you can see here I have used basically a display type in a good manner and a bad manner. On the right side, you can see I have used a typeface, which is meant to be for display types in the paragraph. You can see it is all caps, and I think you cannot read it very easily. It was basically designed for display type or basically headings. On the left side, you can see I have used it properly, and I'm using it basically for headings. You might know the font Bieber's new and/or Bieber's, basically it is very tall font, same like the one I'm using right now. This is basically designed for display types. Sometimes if you are purchasing some font or seeing it online, you might need to read some of the text below it. If it says that it is for display or it is a display type, then user for headings. In all of your design, use it just for headings, don't use it for paragraph text. Define it roles. This typeface is going to be my heading typeface or display typeface, and use it for display. This is another example of wrong uses of typefaces. You can see on the left I am using a transitional font, and it's display type as heading, and on the right side, I'm using it as a paragraph, which is wrong. Don't use a display type of any font as paragraph. Try to use it just for headings or maybe subheadings, not for the paragraph text. Here are a few more examples of roles of typefaces. I'm using here PT Sans Google font on the right side and on the left side it's Chapel pro font. I don't know it's free or I have purchased it, sometime I don't remember. On the right side you can see Google's PT Sans come in a lot of flavors like caption, regular, and bold or something like that. I'm using all three to style caption. At the bottom and in the middle I'm using regular and at the top I'm using bold. On the left side, it is the same story. I'm using display type as my heading, regular as my paragraph, and caption as the caption at the bottom. This is all about roles of typefaces. Define the role of your typeface when you are designing something and use it in your design. Keep it consistent and your design will look great and awesome. Let's move on to the next lesson. 15. Typographic Scales: I have seen a lot of designers who have never used typographic hierarchy or scale. Now, this happens with a lot of novice designers or designers who learn from different tutorials or something like that. So the typographic hierarchy basically comes from visual hierarchy where we have concept of like, important things get bigger sizes. So if you have headings or subheadings or taglines, they will be bigger than the normal or paragraph texts. So keep in mind that size will differ with importance. Let's see how we are going to create a scale. Coming to the step that how to create a typographic hierarchy or scale. So first of all, what we are going to do is we are going to select one base size. For example, you consider like 16 pixels should be my base size or paragraph size or the base of my typographic hierarchy. Then you are going to select a scale ratio or how much you are going to scale it. Like in each step, you are going to scale it by 1.5 or 1.25, or the golden ratio, which is called 1.618. So at the bottom, I'm giving you a simple example of the how to calculate it. For example, my base size is 18 pixel. So the next scale step will be 18 pixel multiply by 1.5 which will be 27 points or 27 pixel font size. So keep in mind that this is how we are going to calculate scale. So this is the first step. If you want the second step, then you are going to multiply 27 by 1.5 to get the next step. So let me show you an example. Now here we have example of hierarchy. At the right side, I am showing you that we have a scale ratio of 1.44, and you can see using this ratio, we have heading at 54 pixels and then subheading is 37 pixels. Heading four is 26 pixels and heading four is 18 pixel and small text is 13 pixel. You can see on the left time using this scale for the tagline, I'm using heading three size which was 26 pixels for the heading 54 and for the body text, I am using 18 pixels. So this is basically the concept how we are going to harmonize basically each step. This is calculated so it will look good. If you just select random values, they are not going to fit together. 16. Online Tools for Typographic Scales: Now I'm going to show you some of the online tools to create this hierarchy automatically or get the values. Even if you're a developer or a designer, it will help you a lot. Let's see what those hidden gems are. The first site I'm going to show you is this modularscale.com. You can see here we have, at the left, is base and then the ratio. You can set the ratio from this. This is major third and these are based on, I think music. I might be using this golden ratio. You can use this one or you can set your custom. I can set like 1.35, something like this or maybe 1.4, which is even number. For the designers, they might be confused what these em values are. Basically, it is a relative measurement. So 1em is equal to basically 16 pixels. You can multiply all these values by 16 pixels, like 7.53 multiply by 16 to get your pixel value. The other method is that right over here, 18 pixels. You can see along with this em, it is showing you with the base size of 16 that the pixel value is basically this. Now, 18 pixel, then 25 pixels, 35 with this ratio. If I change the ratio, you can see this is going to increase. I'm going to use 54. Something like this. Maybe 618. This is golden ratio; 18, 29, 47, 76, 123, and so on, and so forth. The benefit of this site is that we can go in the smaller sizes too. After 18 pixels, we have 11 pixels. I normally like it to be closer to this 1.33 or something like this. It gives you a lot of good range like 18, then 24, 32, 42, 56, something like this. Also in the small sizes, it is not very small. I have 14 pixels over here. Now this is how we are going to use this modular scale. Then there is another one which is this one. It is also very cool and you can easily grab the CSS. It generates automatically. For developers, it is a very nice tool. It can easily generate the relative measurements and everything for you. Again, the base size is 16 pixels equal to 1em. It is showing you. Then you can use these. I think I like this one. Then you can also see a very nice view of how it will look like. Here is the heading and then we have the paragraphs and heading 1, 2, 3, 4, I guess. Here we have the small text or maybe caption. This is another tool. This is very cool tool. You can see here we have the values in em. If you want in pixels, you easily multiply it with 16 pixels. I'm going to set it to 18 pixels right now. It has shifted again with 18 pixels. Now my text is a bit bigger. The last tool, which is also very nice and it have one other factor which is this line height. If you are using this scale like I'm using 1.33, there is another factor to control here, which is line height. You can see it shows you how this line height will look like. I have set it to 1.45. Let's preview it. Very nice. Close the preview. There are some good things about it and some few cons about this site or this tool. It can create the code in pixels values. You can see over here font size, line height, everything. In the RAM unit, which is meant for developers. So if you are a designer, don't worry about it. Just use this pixel value over here and you will be good to go. Here we have body texts, which is paragraph 18 pixel, then heading 1 is 42 pixels. If you are a developer, you can easily copy all this code over here and use it in your development. Here's the HTML they have used, here is the CSS. These are all the tools I wanted to show you guys about how to use grid scales or typographic scale in a good manner and to improve your designs. I hope you have learned some good lessons in this lecture. Let's move on to the next lesson. 17. How many Levels of Typographic Hierarchy do i need?: We have already learned about typographic hierarchy and what it is. Now, we need to know how many hierarchy levels do I need? Maybe it depends on your project, but normally 4-6 levels are more than enough. Now what does 4-6 levels mean? I'm going to show you in the next few minutes. Now, you might have seen that small headings like heading 5 or heading 6. If you are a developer, you might understand what I'm saying right now. So if you are a designer, don't get worried. I'm going to show you in a few seconds. Small headings are rarely used, like heading number 5 or heading 6. Some people might agree or some might not agree with me, but I think that six levels of hierarchy are more than enough. Now, first of all, we might need headings, which are heading 1, 2, 3, 4. So four levels for headings or four different sizes for different headings, like heading 1 and then subheading and the sub-subheading, something like that. Then we need one size for body text, which could be 18 pixels, 20, or 16 pixels. Then we need a small text. Sometimes we need to write a very small text, like captions or very grayish text, somewhere like you might have seen some dates written in very small numbers or very small size. So from my point of view, six levels of hierarchy are more than enough, if you are designing for mobile and web. I'm not talking about books. Book or magazines might needs more than these levels. Let's see how I have used five levels of hierarchy, or you can say five different sizes of the scale ratio into my hierarchy and how I have implemented it. You might have seen this before. This is the same exercise. You can see on the right I'm using five different sizes; 54, 37, 26, 18 and 13. Now on the left side I'm using a tagline and a heading and a paragraph text. So you can see for the heading 4 and body text, the size is the same, just the heading is a bit bold. Heading is in bold and the body text is a regular typeface. Then I'm using 26 pixel, which is heading 3 size for my tagline. So if you are designing, you are the designer or a web designer or mobile app designer, you should keep this in consideration. So you can use the same five levels into your taglines, headings, body text, lists, or something like that. So this is about levels of hierarchy, or how many levels do we really need in our web or mobile design. I hope you have enjoyed this lecture. Let's move on to the next lecture. 18. Vertical Rhythm: Now, let's talk about what is vertical rhythm or baseline grid. Some of you might be using baseline, but I know that most of the designers even who are using Photoshop from past few years, they don't know what a vertical rhythm or baseline grid is. Basically, we are going to create harmony into different design elements by using an even vertical spacing. This is basically to layout our text. Even you can apply it on different design elements like buttons, graphics, and few other things. It basically creates a vertical harmony between our design elements and our type. Now, how to calculate baseline grid size. Basically baseline grid size is based on your base font size multiplied by your line height. So if I have a base font size like 18 pixels and my line height is 1.5, you will get 27 pixel baseline grid size. Now, this is basically baseline grid size. You can also use multiples of your base font size, like if you have 27 pixel baseline grids, you can also use nine pixels or maybe 18 pixels. Sometimes you might need to use nine or maybe multiple of 27. This baseline grid is basically the unit of harmony. So if you want to use it, you can use it in all your design elements. Like if you want to size a button, so you can size it like 27 multiply by 2, it is 54, I guess. Now, you can use the height of 54 pixels for your buttons. Same applies to the width. This is basically vertical rhythm, so it will be more applied to the height of the items rather than the width of the items. This is how you apply it to your design, your type, and everything. Let me show you the example of baseline grid of 26 pixels. On the left side, I am using a word without vertical rhythm. I'm just spacing out with my instinct. You can see on the left side, they are not aligned vertically very well. Also the paragraph is a bit misaligned. Then on the right side you can see I am using the baseline grid and I am vertically aligning everything according to my vertical rhythm and baseline. You can see the subheading Roboto Condensed 26 pixels on the right side is aligned in between, in the middle of the two baselines. Also, our main heading is aligned between three baseline units, and our paragraph is also sitting inside each baseline and in the middle of it. You can also align it with the bottom of your text. So you can just rather than aligning paragraphs in the middle of these baselines, you can put them or you can make them sit on the bottom of your force baseline. Match the force baseline with the baseline grid and that can also help you aligning everything perfectly. In this section, I'm going to show you how you can use the multiples of baseline grid, forward margins, spacing, and/or other design elements. As I have told you before in the previous slide, you can see on the left I am using the 26 pixel as my baseline, so 13 pixel is also a unit of this baseline a multiple of this baseline then 52,78,104, and 130. How I got this, 26 multiplied by 2 is 52, and then multiply by 3, 78, multiply by 4,104. On the right side, you can see I am using this same multiples to space out two sections. The top one paragraph and heading and new section at the bottom you can see I am them with 104 pixels, which is also a multiple of 26 pixels. This is basically how to create harmony and vertical rhythm in your designs. This will really enhance your design to the next level. If you are using a very good typographic skill along with this baseline grid, then even only the type of your design, just the type, heading and texts can really impact the user, so use them wisely and let's move on to the next lesson. 19. Vertical Rhythm in Photoshop: Now, let me show you some of the ways we can create this vertical rhythm in Photoshop. I'm going to open a new file and I'm going to size it 1400 by 972 pixels. Don't color manage this document. Here we have the empty canvas. I'm going to press "Alt Delete" to fill it up with a foreground color. Now, I'm going to use 18 pixel base modular scale. This one, I'm using this site 18 pixel base and 1.5 is my ratio. Basically my baseline is 27 pixels. I am going to show you how to draw those 27 pixels lines so you can easily use them in your designs. What I'm going to do is I'm going to show you how to do it in Photoshop. First, we are going to use some text over here. Maybe I'm going to choose this grayish color. I'm going to use a paragraph over here. Size should be 18 pixels. Our 18 point site note is 18 points. I'm going to go to type and paste Lorem Ipsum over here. The line height I'm going to use is 1.5. So I'm going to say 27 pixels over here. Keep this in mind, you are going to use the line height same as a baseline. So 27 pixel is basically your line height for 18 point font. Now, this is our paragraph text. Sorry, I should be using a regular font rather than medium. This is my base font, base type, and I'm going to use a heading. Let's see what is the size of the heading, 41 pixels. I'm going to use right now, 41 pixels. I'm going to click once over here, 41 points over here. I'm going to use bold face over here. I am going to show you this is going to be our heading. Let's use some subheading over here. Let's use medium for that. It's a subheading. Subheading is here. This is just a dummy text, so don't worry about it. I'm going to change its color to a bit grayish color right now, like that, just to get some variety. Let's see what falls the next size, 27. I'm going to use 27 for this one, like that. Right now, I am not using any grid to align all these. So now we are going to use a grid. Let's get started. We're going to create a new file with the width of 100 pixels and our grid size was 27. So set the height of that document to 27 pixels, press Okay. Then from this Shapes menu, select this line tool. Zoom in a bit, control plus and drag one pixel. Make sure that at the top it is one point line. So I am using this one point line and drag it at the bottom. We can also use a bit darker black color. Now, control A marching S, select everything. We are going to use defined patron. Here we name it 27 pixel baseline grid. Press Okay. Move to this document. Select this layer, and I am going to press and go to layer styles. Then we are going to use this pattern overlay. We are going to use this last one, which was our baseline pattern. Now, this is our baseline pattern. You can see our text is not aligned. There are two ways we can align it like that, sit at the bottom of the baseline. This is how I do it normally, like this. The subheading should be over here, like that. This is how we are going to align everything. If you want, you can go, for example, if I want the subheading to be more closer to this one, how much I can move over here, do you know? Do you remember? I can move nine pixels below. So right now I'm going to move 1, 2, 3, 4, 5, 6, 7, 8, 9. It is still in proportion because nine is also the multiple of 27 and 18. So this is how our text will look on a baseline, and using a baseline grid. One more thing is normally, some designers also use it like that on the web, use it in the middle like this, and also align it like that. Subheading should be over here, like this. So this is another arrangement. I am aligning everything in the middle. This is another arrangement which is recommended by a lot of web developers. So right now we are going to use this one, follow this one. It is looking more professional to me. Now, if we try to hide this pattern overlay, you can see our text is laid out perfectly. Here is the next challenge for you guys. Create something like this. Use a modular scale. You create a typographic hierarchy and use that and align it with vertical rhythm and show it to me. Let's move on to the next lesson. 20. Design Exercise for Vertical Rhythm: In this lesson, we are going to improve the last lesson we did ours in section one. This is the lesson we did in section one. Now what we're going to do is we are going to apply the skills we have learned, typographic skills we will apply on that. Then we will apply baseline grid to this design and line-height and everything. Let's get started. This is our blog article from the previous lesson, so let's save it as another file. Maybe fixed or something like this. Now first of all, we are going to use this site which is gridlover.net and our base font size is 20 pixels, line height, I'm going to use 1.6, scale factor is 1.3. Scale factors basically means how much the difference from one heading to the another. Our font size scaling difference. This is the ratio. I'm using very low ratio. Don't mix this line height with the scale factor. Scale factor is different, line height is different. So 20 multiplied by 1.6 is 32, so our line height will be 32. First let's apply the line height to this page or this design. What I'm going to do is I'm going to duplicate this background. First we are going to quickly apply the pattern. In the previous lessons, I have told you how to create this pattern, so I don't want to repeat it again. I have already created a pattern for this 32 pixels. I'm going to apply it to this document. You can see this document is not fitting well at the top and the bottom. What we're going to do is we're going to edit the image size. Let's see, divide 800 by 32 and it is 25, so it is almost perfect. Let's get started. Let's shift the background a bit up. Zoom it, 1, 2, 3, 4, 5, 6, 7, 8. This looks perfect. Now it is fitting our pattern overlay of 32 pixels is fitting. If you don't remember how to create this, see the section one, I have created this for you. Now first of all, now we are going to shift the settings and sizes for our text and everything. This is our text. First we are going to use 20 pixels because 20 pixels is our baseline size. Let's go to 20 pixels and line height was 1.6, so it is equal to 32 points. Let's shift that to 32 points. Let's move our text according to the baseline lines over here, grid over here. This is how it looks. Let's move the Thursday. Thursday size is 18. Now here we have the problem. We need another scale which shows our small text too. We are going to use modular scale and 20 pixels and 1.3. This is already I have saved, so enter 20 pixels, 1.3 ratio. I am going to see the size smaller than this 20 pixels, it is 15. If you want, you can use 15 over here like this, 15 points and move it above and below this heading. Now, why I use this one? Because this grid level doesn't show me the size for the small text. If you go to this code, you cannot see any small text over here. Heading five is 20 pixels and no size is below 20 pixels. We need a size which is below 20 pixels, so I shift it to this modular scale. Now if you see our font sizes is 20, 26, 34, and 44. Same is over here. You can see heading one is 44 pixels. You can see over here font size 44 pixels, then we have 34, then we have 26, and 20. Scale is the same, just we don't have the small size calculation over here. Our next step will be to size this heading perfectly. We are going to use maybe 57 or 44. You can decide whatever you want to use. I will go with this 44 pixels. Now I'm going to select this heading and let's set it to 44 pixels. This is how it's looking right now. Let's add few more text to it so it fits on two lines. We do not want to leave a second one or two letters at the end. It is not a very good typography practice. Size is 44. Now I am going to set the line height to 44 too because I want just one equal to line height, one for headings. If you remember my last tutorial or lesson, you might remember that line height for heading is almost 100 percent or 110 percent, so it's closer to 100 percent. You can see I am using these three lines over here to balance this heading. You can see I am using these three lines, so let's align it a bit more at the down. Let's have the size of this one equal to 20 pixels, so it is easily readable. We are not looking for too much variety. We need the user to read it and everything is set right now. I guess just we are going to change the size of this one. Height is 15, so we make it equal to eight, which is also related to our baseline size and we just place it in the middle of the C like this. One more thing. In the previous lesson, we applied this grid line, so make sure your elements are aligned to this grid line. If you don't remember how to create this grid line, go to View, New Guide Layout, and then use eight columns, 30 pixel gutter and everything else. Just leave it margins. If you don't want margin, just leave them like this and press Okay. You will generate something similar to me. Eight columns, 30 pixel gutter, and up till now I think you might not know what gutter is because it will be in the next lesson. So don't worry about it. Just keep the settings like this. I enabled my grid with this control columns to see where my things are lined up. This orange bar is lined up accurately. Everything else is looking great. This is our first milestone. Let's hide the pattern overlay and see how our document is looking. It is looking really nice. The spacing between elements is great, everything looks fine. We have applied typographic scale and baseline to enhance our designs. Now the second step. Second step is that if you see closely between these two paragraph and the lower paragraphs, I think it's a bit bigger space between all these paragraphs. Why not make them closer? We are going to Control J in this text. This is our old text, so I'm going to duplicate this layer. What we are going to do is we are going to remove one space or return over here. I pressed Enter or return over here. Now they are lined up. Now select the first line and see what's the line height is it's 32. We need something between 48 or 64. The next step is 64, but we will divide our baseline to half, so half the baseline is 16 points. I'm adding 32 plus 16, so it's 48. I'm going to shift this to 48 rather than 64, which was the previous setting. Also this one to 48. I will show you the difference once it is finished. Let me enable the pattern overlay for our baseline grid. This is our baseline grid. You can see over here that our baseline is getting off beat like in music, but as soon as it goes to the next point it is again inside the pattern. It is again lined up to our baseline grid. Why? Because our baseline scale which is 48 points is basically, what's it is? It's basically 1.5 times our baseline size, so 32. Let's tell you the secret over here, 32 multiplied by 1.5, 48. Whenever you try to go off beat just go something like this, multiply it with 1.5 or 1.25, 32 multiply by 1.25, something like this. 1.25 and 40, it might also go well, but I think 1.5 is good enough. This is how we used our baseline grid and this is the previous text. This one is previous and this one is a bit shifted up. Over here you can see a bit less gap between paragraphs and it is looking very nice. This is the secrets of line height and scales, typographic scales, baseline grid. Also if you count the words in this line, I think they are closer to something like maybe 70 characters. I think it's closer to 70 or 80 maybe. It's I think optimal line length. I don't want to waste your time counting over here. This is how we applied our line height with two different methods. One is using perfect line height, which is 32 pixels or 32 points. Then we went a bit offbeat with multiplying our line height to 1.5 by shifting two paragraphs closer to each other. These are two techniques we did. I hope you guys liked this exercise, download its files from the resources, and see you soon with more at such exercises. This is another challenge for you, try to replicate what I did over here. Let's see what you can come up with and hope to see your designs very soon. Let's move on to the next lesson. 21. Intro to Modular Grid: In this lesson, we are going to learn about modular grid, and we will see how to use it, what are the different parts of it, and how to use modules, margins, scatters, and grid lines to create awesome looking designs. Our first step is that we already know about baselines. This is our 30 pixel baseline. What I did is that I created this document with the size, which is multiple of 30 pixels. Height is 810, so height is basically multiple of my 30 pixel baseline. You can see in the layers panel, I have created a layer which is named 30 pixel baseline. So as I've shown you in previous lessons, created a pattern with 30 pixel baseline, and I applied it to one layer. From here, you can see that we already knew this baseline stuff, this is first step. The second step is that we are going to divide this design into horizontal and vertical portions. So here comes the gutters. How I created these gutters, you can see over here, this is basically my grid. If I turn on my grid lines controlled column on Photoshop. Grids are basically spaces between different columns. You can see over here the white portion is the column and the gray one is the gutter. So gutter is basically inner margins between different columns, this is just to space out different items to each other so they don't touch each other's ears or nose, etc. So if I am designing something and I placed something over here like this, the next thing is that I am going to place another one over here like that. This is basically the margin between them. It really creates an elegance in your design if you follow this. If you are a web developer, you already knew about 12 column or 60 column grid lines. They are also based on this. Even Bootstrap uses 30 pixels gutter. So this gutter in Bootstrap is equal to 30 pixels. How I created these gutters in Photoshop, I just went to this new guide layout and I have got 30 pixels gutter and eight columns. Right now, I have divided this layout into eight columns. You can use 12, 16, whatever you want. Also, the third part which I am using in my design, which is very important, is that you leave some margin around your design. So let me just first clear the margin, show you the margin. So this yellow portion is basically my margin. So if you view it over here in grid line, you can see I have 90 pixel top margin, left 30, 90 at bottom, and right at 30. Here is the secret: Why I am leaving 30 pixels and 90 pixels margins, the secret is our baseline. Our baseline is 30 pixels, so I have set everything around that number; 30 pixels, then 90 pixel, multiple of our baseline. So this is how I've set up everything. We have setup our baseline grid, this is it, and then we have gutters, then we have margins, and then the next step. So next step is that we have the space inside this area, we have divided it into horizontal columns and vertical columns, eight columns, but now we are going to create another thing which is called modules. We are going to subdivide this into separate different boxes or modules. You can see over here that this is one module, this one is one module, and this one is another one, or we can also use modules like this; like we have 1, 2, 3, 4, something like this, but the height we will be using will be equal to this module. So actually what we did is we are dividing whole design into different portions which are mathematically calculated so it brings harmony and elegance to your user's eye. So for example, if I'm using these two for my image like that, then I am going to use, for example, first four modules like that or maybe this portion for my text. For a less spaced Lorem Ipsum over here like this, let's change the size, maybe 72 is good. Let's change this line height to 72 and increase the size to 100, maybe like this. Line height should be 90, and let's use 10 over here like this. Still, I think we are having some problem with the line-height. This one looks good, just create a simple layout like this. So this was our image, let's hide this one. Where is the image? Okay, this one. Let's lock these layers which are our baseline and everything, let's lock them up. Gutter, I'm going to lock it, margins, I'm going to lock this one so we don't select them by mistake. This one was a bit hideous so I'm going to convert it to this color and we are going to remove its border. Where's the properties? Here we have the shape properties, we need no borders. We have created a simple layout. Let's just hide these margins and everything so you can see how we are doing with the word design. Let's hide this and everything. So you can see how we are using margins and everything to lay out our stuff and everything. Let's create one other text layer over here. Now, I'm going to use all this area or maybe this whole area to create text over here. Let's space Lorem Ipsum, and this time we are going to use very small size, like maybe 24 pixels. Let's use the height of 30 pixels like this, we are going to use zero or maybe less than zero, minus 10 like that, and we are almost there with our margins like this. Let's change the color to some black or something gray-ish like that, let's hide our margins, gutter, and everything else to see what it look likes. This is how our design is looking right now. There is one more thing we can do, we can use the margins a bit more over here so it doesn't look like it's touching on the right side. So maybe we can reduce its size to like 30 pixels. With 30 pixels, let's create a bit of more margin over here. On the right side, I've created a box of 30 pixels over here. So this is 30 pixels, then I'm going to duplicate it with my alt key. This is again 30 pixels, so we have now 90 pixels margin over here. So let's size this paragraph again to this 90 pixels margin like this, and let's hide these margins and everything else. You can see how we have created the layout like that, you have seen these kinds of layouts in magazines. Even if we can make it a bit bolder, something like this, maybe a bit less space between letters, less space between 72 like this. You might have seen these kind of layouts in magazines so you know that the magazines designers, they are very good at creating these layouts or these modular grid. Keep in mind how to use this grid. These are the basics. We have gutters which are in between our different columns. You can see my content is not inside any gutter. I wide them like here, let's touch it at the left of our gutter like this, and you can see even my content is not touching any margin, it is away from the margin. There are two things you should keep in mind while designing. One is that use modular grid, and in the next exercise we are going to create a lot of different themes like you can see over here, this one, this one, and this one using our modular grid. Now, you have learned all about modular grids, so let's move on to the next lesson. 22. Preparing Grid for Blog Layout Design Exercise: In this series of exercises, we are going to design something similar to this. Let me hide to details over here so you can see what it is going to be like. This is one example. I trade a lot of different layouts and designs for the same content. This is our content. This is one arrangement, this is the second one. You can see how it is affecting our design. This is the third one. We will use modules, margins, baseline, everything in this exercise, even vertical rhythm. This is the last one. There are a lot of things you need to set up first. In this exercise, I am going to tell you how to set up this baseline, this scatter size, these margins, and how to create these modules. This is our document. Let's first see what other resources we are going to use for this document. The first step we are going to take is we are going to choose our Google fonts. The two fonts I'm trying to select here is Lato and Source Sans Pro. If you remember my last exercises, you already know that one font is going to be for headings and one is going to be for body text. I'm using Source Sans Pro for headings and Lato for my text. These are two fonts. If you want to download them, you can download them from here, this icon over here and install them on your PC or Mac and use them. Then we are going to use Gridlover or Modular Scale, whichever you want to use. We are going to use a scale factor 1.3, line height 1.5, and base font size is 20 pixels. Solid line height will be equal to 20 multiplied by 1.5, 30 pixels. Thirty pixels, line height, font size will be 20 pixels, scale factor will be 1.3, so our heading 1 will be 44 pixels. You can see over here, font size 44 pixels. If you switch to modular scale, you can get the values more easily because it only has ratios and base size. We have 44 over here. You can also use this 57 if you like, but 44, 34, 20, then 15. This is our scale if you want to use table over here, you can switch to this table to view all the sizes. We have selected our scale, typographic scale, our fonts, and their roles, which font is going to play which role. These are the steps we have covered. Then we are going to use the data from this site, the content from this site, RealIpsum. For images, you can download images from this picjumbo.com or Pixabay or any other good website. I really like this website. If you go to Categories, you can switch to People, Nature, Love, whatever or whichever category you prefer, you can go to Architecture. They are very nice images, you can see over here. You can select any of them, go to next page. For images, use this picjumbo.com, category, people or any category you like, RealIpsum for text. We have selected our fonts and font rows and our modular scale and our grid size, which is baseline grade, which is 30 pixels, and base font size 20 pixels. Now, our first step will be, we are going to create something like this. Let's get started and open up a new file. What we are going to do is we are going to set the width to 1400 and the height is going to be 810 pixels. Why? Because 810 is easily divisible by our baseline, which is 30 pixels. If you try to divide 810 divided by 30, it will be a whole value which is 27. Eight hundred and ten and press Okay. This is our documents size. Now let's set up some grid over here. First what we are going to do is we are going to create new guide layout. We are not going to use 12 columns, we are going to use eight columns. If you want to create rows, it's up to you. You can create rows or you can create eight rows. I think here we have eight rows, 1, 2, 3, 4, 5, 6, 7, 8. This is basically creating our modules. Now I'm going to hide it. Gutter size is going to be 30 pixels. Each column has a space in between which is 30 pixels. This is our gutter. Now for margins, the top margin is 90 which is equal to our three baseline height. This is going to be 30, bottom is going to be 90 again, and right is going to be 30. There are no hard and fast rules, if you want to set more margin, like 120 or maybe on the right and left you want to be 45 or 60, it's up to you. Make sure that it is in sync with your baseline height, which is 30 pixels. Now this is how I have created my grid. Press Okay. This is my grid and gutters and margins at the top and the bottom and on the right and the left over here. This is just a start of my document. Now what we are going to do is we are going to create some modules. How we are going to create some modules. But first step is, we need a baseline grid. Let's create a baseline grid which will be 30 pixels. So weight 100 pixels, height 30 pixels. Let's zoom in 1,200 percent and use this line tool, press "Shift" and create a line over here, change the color to some gray. One pixel line, make sure it's one pixel line. See at the top over here where is the height one pixel. Make sure the height is one pixels because it will create problem if you have a two pixel line. Control A and define pattern 30 pixel base line. What we are going to do is we're going to create a new layer for our baseline grid. Control A or Alt + delete to fill this layer with gray color. We are going to Pattern Overlay this layer which is going to be our 30 pixels like that. Our grid is a bit off. We're going to adjust it. Don't worry, make sure this is scaled to 100 percent Snap to origin, and I think it is already fixed. Press Okay, and Control D. This is our baseline grid, it is setup. Now we are going to create some modules in this document. What we're going to do is, we are going to create 1, 2, 3, which is going to be 90 pixel high. Make it 90 pixels. This is going to be a bit different color like this, or maybe this one. This is our one module, or basically a row. Basically, rows and columns, they mix together to create this modular grid style. I'm going to group this and control G. We are going to basically align them with each other like that. I'm going to quickly do it. Skip this step so you understand what we are doing over here. Here we have all the modules. We can now use something like this. We can use three like this, three modules over here on maybe four columns and three rows over here. This is how we are going to use. Basically, we have created few legal blocks over here. Let's group them altogether. Control G and make its opacity 50 percent. We can see our grid line, our modules are rows. This is our grid. Our document is ready. You already know that the top portion or the left and the right, it is basically the margin. We have created 30 pixel baseline grid with modules, different portions are rows and columns. This is basically modular grid and we are going to use it to create three different layout in the next lesson. This is how I prepared my design and you should also follow these steps when you are designing and laying out your websites or typography on mobile apps. Let's move on to the next lesson where we are going to create three different layouts out of these modules. Let's move on to the next lesson. 23. Design First Blog Layout: Now, first, we are going to create this layout, so at the top we are going to set our heading, at the left, our date of this article, and at the right side, 147 likes. At the left, we are going to use Lato, a slanted italic version, italic style of Lato to have some quote or quote text over here, quoted text. This is, we are going to use 1, 2, 3, 4 blocks, four columns to layout the first introductory paragraph, and for the next text we are going to use these three blocks. Three and blocks, or three rows and columns for this one, this module for this image. Basically what we are trying to do is we are balancing out this layout. Let's discuss some of the balance over here. Like you can see this blue color, normally the color gets more attention and it is heavier. This is how we are balancing out with this image and this color over here. This empty space is basically balancing with all this text over here. In the middle we have text, at the left we, again, have color to balance out the design overall weight. It is just like you are balancing or weighing things in your two hands or maybe like you balance on the seesaw. Here we have more heavier small object, and here we have less heavier big object, like a bag of air balloons or something like this. Here we have two stones. This is how I try to balance my design. This is a very, you can say, basic tip which a lot of designers might not know about. This is how we are balancing our layout, this is the basic technique between behind this design. Let's get started. First, we are going to use the scale, if you remember, the heading size was 44 pixels, and the text size was 20 pixels. Right now I am going to use these two sizes. I'm ignoring all others. Let's make our modules more dull or more into the background, so we can see how we are going to lay out different things. First, I am going to use these three lines to create my headings, maybe this whole block, and I am going to use again Real Ipsum. Let's see where it is. Here is the Real Ipsum. Let's copy all this and paste it over here like that. The text size I'm using 44 points and Source Sans Pro bold. If you want to go with black, you can go with black too, like this. Just to fill the space, don't worry about what text I'm using. I'm going to set its line-height to 44, like that. If we want to go above 44, we can go like 50, like this. Just make sure it is in between these three lines like that. Also it is touching, you can see this column over here. This is the gutter, we're not inside the gutter, we are inside these 1, 2, 3, 4 columns. This is how I am using this, if you want to expand this, maybe you can use five like that. Not expanded much, because it is a heading, so we need less space between the letters. Now we are going to use some text over here, maybe we can leave this row, this row over here, and start our text and use these maybe four columns in this module, and we are going to paste it over something like this. This is our start paragraph or intro paragraph. I'm going to use 20 pixels over here. We can use a bit of more line-height, maybe the 45, something like this, and we are going to use regular, and this is going to be Lato, not Source Sans Pro. Lato not hairline, but we are going to use regular. Now you can see I can set this block of text at the top of this module, or maybe at the bottom, it is up to you. Now if we set it up like this, may be like this, or maybe at the bottom. I think I am going to set it to the top. Let's create another text block like this one, the same one, Control J. I'm going to copy this one, and we are going to double-click this and adjust the width and the height of this three columns, and we are going to use this or maybe you can go beyond this because it is a continuous web page. I'm going to use 30 pixel line-height, and we are going to use these two paragraphs. First copy this one, paste it over here. I think it is a very long paragraph. Maybe we need to shift it a bit down, or maybe on the line like that. It doesn't matter while you are designing, if you want to set your texts on the baseline, you can make it happen, but when you are coding, I think it is not possible easily, so maybe we can set it like this, and also this one I am going to use it like that. Let's hide it, it is looking not very good, maybe we are going to use some different settings. This is Lato 20 and maybe we can also use the same line-height over here, or maybe change the color to some darker color like this. Make this introductory paragraph look nice. If you want to separate with two lines, it's okay, but I think two lines between this introductory and this paragraph is too much. Let's leave it right now, let's put the image and other texts over here. We are going to put some text over here. First we are going to put over here. Let's copy it from here. Friday 30th, September 2010, I am going to paste it over here, and we are going to change the color to this gray color, maybe a bit darker gray color like this one. The next step was, I guess 15. If you want to size it to 15, you can size it to 15. Right now what I'm trying to do is I'm using these two columns and centering this text over here. Now this date has set all set, so we are going to use this 147 likes over here, so 147 enter and Likes. Let's make it close together, and I am going to use center line for this because it is a very small piece of text, it can be easily read with center align. Reduce it's to auto, and I'm going to use 34 pixels over here. The font will be Source Sans Pro. If you want to go to this "Light," you can go to this Light one and just select this one, use the Color, maybe this one. I'm going to center it in this column, like this. If you want to go with Bold, I guess we can use Bold or maybe Semi bold. "Semi bold" is looking good. We have set our 147 likes, our date and our heading, and our text. Let's put some more text over here because it is looking very odd. Maybe we can "Copy" one line from here and "Paste" it over here like this. Remove some of the text to make it look good like that. Let's use some dull color for this one because it is looking all the same. I'm using color for this variation. Maybe "50 percent" and I'm going to go towards the bit of gray color. "Dark gray" like that. It's looking great now. We can add some image over here and at the left side we're going to add some quote. It will end the first design iteration. Lets get the image. I have a lot of collection of images. Let's use any of them from here, rather than downloading and wasting time. Maybe use this boy over here with a football. I'm going to "Drag" it over here and "Size" it like this. I'm going to use these three modules over here. I have pasted it over here like that. If you want this image to be exactly in this module, then we are going to clip this inside this box over here. Create a box bounding box and we are going to "Clip" this image, press "Alt" and "Clip" it. This is how we are going to clip this image like that. Let's "Hide" our modules and everything to look how this is going to look like. This is how it is looking right now. Looking great, spaces are great and everything looks fine. Let's add some quote over here. I'm going to use my grid again and "Drag" it from here like that. I'm going to use these three rows for this quote, and I'm going to use some text over here may be like this. This is the quotation. "Copy" and "Paste" it over here. It's very small. Maybe we need some more text. Make something like this. It's a long quote, I'm changing the text to balance this design so don't worry right now about it. Lets "Remove" the quotation marks, because we're not going to need them. Maybe we need to squeeze it a bit because I'm going to use some blue bar over here. Let's use these three rows for this one and I'm going to use blue bar over here like that. Ten pixels. I am going to "Change" the color to this Lighter blue. Most of these colors are flat, so don't worry if you don't understand what colors I'm using. You can see I'm using very few colors. Mostly grays and blacks and blues. Nothing else. This is how I'm going to lay out this quotation. If you remember, we have Italic headline. Maybe we can use headline Italic or maybe Light Italic. I think "Light Italic" looks great. It's a bit difficult to read so maybe "Regular Italic" is good. Maybe we can change the Color to this blue or this white, or maybe this gray color. I "Double Modules" and these lines and you can see how this is looking. Once you have set your design elements try to hide everything else to see how it is looking or what result it is getting so you can Change the "Color" of over here. I just shifted it to this "Grayish" color. I think this is great. Maybe use the same "Gray" over here like this one. Now you can see this is how we use modules and baseline grid to lay out our design. We are going to create more layouts from the same design by rearranging our modules or rearranging our design elements. This is the first element. You can see over here how I have used all these modules if I Turn-up the grid like that. This is the end of the first exercise and you can see how good it is looking. If you want to change few things like moving this image a bit below because our text is not lined up with this image. These are few settings. You can go with that end. You Select this image and this Rectangle and move it a bit down like this and reduce your rectangle size a bit so this image looks almost parallel to your paragraph. Hide this lines and all the modules. This is almost perfect. This is the first layout. Let's create some more layouts in the next lesson. Stay tuned and I will be doing a lot of these exercises. Don't worry, you will get a lot of great things from here. Just remove this quotation. It is irritating me like that. Stay tuned and let's move on to the next lesson. 24. Design Second Layout for Blog: Now in this lesson, we are going to create this layout using only this gray and this red color as our highlight color and also, I think we are going to replace the image and this quotation places with each other. Let's get started and see what we are going to come up with. This is the last part where we left. What we're going to do is first, we are going to create another group. This is our design second, so that was first design. Now what we're going to do is we are going to change few things over here. First is that I'm going to use not all caps, but I'm going to use, Sunday, do you like that, and select this th, and go to this text panel and use this subscript or superscript, whatever it is called. Also we are going to change the size to 20 pixels like this. Also we are going to use italic over here. This is going to be a lot of shift in corrector, and few things. Now we are not going to highlight this one. We are going to use a grayish color for this 147 and use, likes, the same color like this one. I guess it is the same, no. What we're going to do is we are going to use 44 pixels for this top one, use bold. What we are trying to do is we are trying to match the width of this one and with the second one. You can use this tracking value. We can set 30, 50, 150. I think 150 a bit more. So 100 is looking good, 147 likes. If you want to change the width of likes, you can use zero over here like this. This is all set. Maybe we can reduce the line height. This is the 30 and we can shift it to 45. I think it's looking not very good, maybe we can use 30 instead. Also change this color to this one. So they looks the same though. Now the next step is, we are going to replace this image with another image of a smiling woman or girl. I'm going to select this image and we are going to move the image and the container over here like this. Let's turn on our grid. Right now I'm ignoring my margins and I'm going to set the size of this to all these three modules over here or rows, I think four rows. Let's see how many are these; one, two, three, four, five, six, six rows, I'm setting the size and everything over here. Let's move it a bit down, equal to this text over here. This one is our quotation, so let's move all this over here. Now for the quotation, we are going to use this area, these two columns and these three rows. This is how I arrange everything over here. Let's copy this image. This one, drag it over here, and copy it like that. We are going to drag it over here, remove this, and select this one. It is here, move it at the left. Sometime you cannot see the image when you paste it because it is outside of the container, you have clipped in it. I'm going to press "Shift and Alt" to resize this image like this. Let's hide the grid, it's almost perfect, but here we were using something else. So let's change the style. Use some quotation marks over here. This is how we are going to use some quotation marks with italic, and let's use a bigger size, which was the size 74 pixels. So I'm going to use 74 pixels. Add the quotation marks like that. Let's rotate it. I pressed "Shift" to rotate it in some specific angle. Let's put it over here like this. Let's make it a bit more closer to each other, like this. Now, is there anything else left over here? So maybe we can change this text to italic. Just a style change, maybe. We can also expand it a bit, 15, looks good. Now, is there anything else we need to change? Let's add few more details. There was a line after this text over here. Let's create a line, slim line, Line Tool. I'm going to highlight this area, this is our line. It should be this color maybe. Let's move it on the left and make it two pixels in height, like that. Also we are going to use some other color, highlight this text. We're going to use this color to highlight this area just to balance it. Also we are going to use a dull color for this area. Maybe this 7a7d80. Also I'm going to use two separate paragraphs over here because it is looking very strange. Let's create two paragraphs by giving some space over here, like that, I pressed "1" enter over here and we have two paragraphs now. Also if you want to be more specific, you can use something like this, but I think this is also good. Now, we can make some more here and use 20 over here like this. Also in this text too, use 15 or maybe 20 like this. Remove one line so we have good balance of our design. Maybe we can use some color over here to represent our link like this. It is looking great and I think this sums up our second iteration on this design. Also I guess there is a line over here. I think we forgot over here. Let's put some block of line over here like that. Let's use it like this, inside our grid. This looks great and I think this sums up the second design. This is the iteration I came up with. I think this is it and we should move on to the next lesson. 25. Refining the 2nd Layout Design: Now, let me show you I made few just adjustments to this design at the end because I was not feeling good about this area over here. So what I did is I moved this a bit below, and moved this line on this baseline. So that this line, placed it on our baseline. Also, you can see over here, I used this quotation marks in between these two baselines, and also I moved it a bit inside this gutter. If you want to move it more, you can move it too like over here, like that. I think we need to change this text over here. We are going to use Source Sans Pro Regular for this, and we are going to use italic basically. These are few settings or changes I have done to this design because I was not feeling very good with this area. Also, if you want to switch back to regular, you can switch back to regular, and maybe we can use more space between different letters and have something similar to this. Also if you want, you can change its color and make it a bit darker like we did in our first exercise. Let's see and hide our modules and everything. See what it is going to look like. It looks more balanced now because I have moved this portion, this quotation mark a bit below because we need a good amount of space in between these two paragraphs and this portion. It is almost perfect. I think this line is getting too much attention, so if you want, you can change its color to maybe this red or something gray, I think, that looks also good. Maybe this one, and change the quotation marks color to red just to grab attention. I think this looks better, and it is good and better rather than the design before. Also, I think it is looking very dull, so I'm going to use a bit dark gray color to show this date. Now, why I have used a bit darker color because readability is our first priority. So use a bit darker gray color. This is how I adjusted the last design and shifted and changed a few things. Always make sure that design is a progressive thing. If you design something once, you need to open it and refine it again and again, until the time you find the perfect balance, and perfect colors, and the perfect sense. This is all about how I have refined the second part. Let's move on to the third part. 26. Last layout for Blog Design: Now, in this third lesson, we are going to create this one and also this one. These are not different from the second part, you can see this is a bit different, this top bookmark style. Also, I have used only two blocks for this image, not the whole area over here, everything else is almost the same. I changed the colors from red to blue over here and then also we are going to create this layout. Here, we have different things over here, I will explain them, like we have this yellowish color and this purple color over here. Let's get started and create these two layouts in this design part C. This is where we left, so we are going to keep everything same. Here, we have the image, and I'm going to grab some other image, may be this one. I think we had this one, drag it over here and we are going to use it over here like that. Also, you can use this whole area like this for image, this is also another layout. Right now, I'm going to use this image and clip it inside that block. Now, what we are going to do is we are going to highlight our modules. Here, we have our modules and I'm going to use and size it to this area and we're going to leave all this area over here. Just to make sure that we are going to size this girl so we can see her hair and few other things like her clothes, maybe like this. It is looking better now. We can hide a few other things, I think this looks odd to me. Maybe I'm going to use some blue color from her shirt, this purple blue color and make it a bit more saturated like this. For the links, and I'm going to use the same gray. What is the color of this text? It is 7a7d80. Now, we have set of our colors over here, we can also sample colors from her shirt. Maybe again, use this color, 147 likes, maybe we can use this color over here, maybe her hair color or this purple color. I think it is very dark, so maybe very sharp, so leave it like that. We're going to hide our modules. This is how I just changed this design. Maybe we need to change this one too. I can use a very dark color over here to bring the attention on this sharp color over here, to bring attention to the title. I'm going to use my pen tool to add some anchor point over here. "Press A" and shift this anchor point. What is happening? You stretch selection tool. This is strange. I think I should use A and then Pen tool to add some anchor point over here. Like this. Let's zoom in and click on it with this convert point tool once to make it sharp edge, not the rounded one. This is our main shape, so I have changed this shape and everything else. It is looking good. Maybe I need to use Lato over here. Lato Bold. Let's see how it look. It's looking good. This is how I have changed everything over here. This is another design. Let's copy and save it as design 3.1. Now, we're going to go ahead and we are going to create design 3.2. Let's first save it with the other name, 3.2. Now, what we did over here is we are going to expand this area. Let's delete this girl over here. Expand this rectangle to the full size like that. Okay, so get some color over here, maybe this one, any color you like. It must be a bit sharper color. Where is our date? Date, here it is, bring it at the top of this layer, change the color to white and we have done almost all the work over here. Do we add anything over here? No. So let's remove it. It is just creating more nuance. We want more open and empty feeling. This is our date and let's highlight our grid. Let's create another rectangle over here using this area and move it below this 147 likes, let's change the color to this one, or maybe this one, and change its color from this to maybe this black or maybe white. Let's hide this and you can see our design is almost perfect, so let's change the colors to this. Our new color, highlight color. Maybe we can use this grayish color. This looks great and if you want to use purple over here, you can use purple, blue, or purple or this purple. This is looking great, purple and this creamish color, they are looking great. If you really want, you can use this heading and move it over here. It will also create another layout heading over here in this area, and dates and likes over here and maybe move the text above. There are a lot of variations you can do with these designs. We have this grid and modules setups. We just need to change the legal parts and balance the design. You can use them with the bold text and maybe colors. This is how we use colors and bold text and layout and modular grid to create different layouts. This sums up my last exercise, I'm going to save it, it's already saved. I gave you challenge that creates some layout like this one. This is the last one. Use some images from this picjumbo.com, use a text from Real Ipsum, Google Fonts, select any two Google Fonts you like. Use some modular scale, use your own scale factor, but keep it consistent in your designs and create something awesome and show it to me. You can post it in the question answers. Give me the link and I will share with you my ideas on how to improve it or how to change it or something like this. I see there is something like this a lot, so don't mind. I will be creating more exercises. But this sums up this modular design exercise. This is the last one. I think you might have got a lot of good skills on spacing out elements and how to use this topography effectively with this baseline height and vertical harmony and how to use rows and columns and modular grids. Let's move on to the next lesson. 27. How many fonts to select?: When it comes to selecting fonts, the most difficult question, the first one is how many fonts to select? I have seen a lot of novice designers and developers, they make a lot of mistakes. Even I have seen few websites and made adjustments to them, where the coders have selected maybe five or six different Google Fonts, and when it comes to loading, it can really impact or slow down your website. So always keep in mind that you should not select too many fonts. You should only go with maximum two or three, if you really know how to combine them. I still insist on just selecting two fonts. They are almost enough for your whole website. Also, make sure that you don't select too many styles from single fonts. Again, it's going to impact your loading time and page size. Now, keep in check the font size, how much loading size in kilobytes, I will show you just in a few moments on Google Fonts. Now, the second step is, once you have selected the fonts, you have selected one or two fonts, assign them roles. We have already talked about roles. Choose one font for headings, and subheadings, and/or taglines, and everything and one font for body text, because body text font is going to be read a lot and it should be easily readable and visible. So make sure your body font is readable and it's readability level is good. Here is an example of choosing fonts for display and body. You can see here I am choosing one font for display. Now, on the left side, you can see I have used a very tall font, an all caps font, like Bebas Neue Font and you can see that text or body copy is readable and very simple Sensory Font. Now there is one more trick to it. If you are selecting font for your heading or display text, we will call it heading in simpler terms, so just keep in heading. So one for heading, one for body. Now, when you are trying to select font for your heading, you can be a bit creative because heading is going to be a bit larger than the body text. So even if it's very squiggly font, or very tall font, or something like that, they can be easily read because of its size, but about the body font, it must be readable, its x-height should be good, and it can easily be read in large amount, for example, a big paragraph, try to see whether it is going to be easily read or not. So these are a few considerations you need to keep in mind. Let me show you Google Fonts and how we are going to interpret our loading speed. So just keep in mind that when you are selecting, for example, if I select this font like this one, one family selected and the next one, let's select this Source Sans Pro with this one. So I am going to select Source Sans Pro and above one. Two families have been selected, so you can see their loading time is fast over here at the top. Now, if I try to customize it and I try to select few a more, where it's like, I want bold, you can see the loading time is moderate. Also, if I go to this Secular Font, it only have one face, so it only have one style, which is regular 400, which is its weight. Maybe we can get to this regular italic, I think so. Loading time is moderate. Now, you can download it from here like this and install it on your PC or Mac to use them in your designs. You can use this sky fonts. I haven't used it before. If you want to try it, you can try it. This is one thing you need to keep in mind while selecting your font. If you are selecting too many fonts, if I go to this like more than three or four, five, six styles, you can see it is going to be slow, so make sure your loading time is fast or moderate. Don't go more than three styles. I think two styles, like regular and regular Italic are good for our body text and this one is good for our headings. So this is all about how to select fonts. Let's move on to the next lesson. 28. Moods/Voices of Typefaces: In this lecture, we are going to train your gut feeling about the fonts and topography, what the font is saying, what your gut is hearing, and your feeling about this font, we are going to increase that scale and I will tell you how to get used to it. So each typeface has different voices or moods. If you are designing for some maybe harbor or organic product, you will select particular typeface which is conducting the mood of that brand or something like this. So first, you need to find the mood whether this font's mood is related to your project, is it good for your business site or your fashion magazine or it is elegant? Is it fun? Is it good for reading? So these are different situations where you need to see what mood different typefaces have. Now, I am going to show you different moods, I have selected randomly few fonts from my collection and I will show you how to get used to them or you can say, train your eye for the moods of typefaces. So let's get started. First one is fun theme. Now, you can see all this fonts I have selected, some are splash fun for your kids, eat healthy, have fun with olive oil. They are not too much edgy, so they don't have very sharp edges or something like this. So this is a bit fun theme, a bit relaxed. Top one is a Sans Serif font and second one is a bit Slab Serif font, but its corner are a bit rounded. Then at the bottom, we have again Sans Serif font and its corners are also round. Even you can see in the edge of the school, back to school, word school, it has a very curvy touch to it at the end. You need to see few things, you need to write it in some color that is fun, so this is first step and try to, I try different fonts, if you like one, then move on to the next one. I don't think it's matching my theme, so then move on to the next one. No typeface designers, maybe there are few experts who are very expert in this typography matching exercise. But for me, normally I try to keep on iterating different fonts till the time I find the one which looks perfect for my theme. Next is love theme. You can see I have selected few different fonts over here, few are very curvy and scripty fonts, handwritten fonts, and one is Slab Serif and the top one is a bit transitional font which have a very distinct style. So this all depends about your situation. If you are writing for some marriage ceremony or something like that, you might go for script font, maybe just like I have in John and Jenna are getting married. If you are in a happy love theme, you might go to the last option which is everything can be achieved with love, so it is also showing some hope to it. So these are different themes. If you see the sweetest sensation theme I have, love is the sweetest sensation I'm using, cyan or greenish blue color to it and you can see even it's a very slim Slab Serif font but it's looking very nice. The top one is some theme like losing love or maybe having it forever or something like that which is related to time or something like that. So I have used it, a theme where some of the portions of my fonts are removed, so this is maybe related to time. Just like we have love memories or something like this. So this comes with practice, you need to iterate a lot of fonts, write the line, you want the theme, for example, I have this love is the sweetest sensation in my heart. So this is the theme line Write the theme line and then keep iterating different fonts one-by-one, till the time you find the best one. Here is the health theme, first one is candy sweets, you can see that selected to kids and candies, it is very different font, have big slabs, very funny touch. Then, we have cupcakes are the sweetest sensation for kids. You can see this is the same font I used in last exercise which was love theme. Now, here we have again little to sweet, so it is little to sweetness, so we can use it with cupcakes too, then we have fruits and vegetables are healthier than junk food. Now, fruits and vegetables, this is a very wide font. It have some integrity to it or you can say some weight in showing you that this thing is good. So it is descent, I can say or very roundy where I have some very regular shapes which is related to, you can say geometric Sans Serif font, perfect geometry, and it looks good on this theme. Then we have all natural, organic, GMO free candies for healthy kids. Although it have very edgy corners, like you can say that k and h and everything. But the angles are very different. So it looks like a kid style font, so it can really work well for natural organic and something like this. Then we have pure, organic, GMO free health tonic 500 ml, you can see at the bottom. Also, keep in mind that I'm using colors with mix with my theme. So the pop up better than just simple gray or black color. Here we have again organic theme but it is different, maybe it's a tonic for adults or something like that, so I have used a font. Again, it has very roundy shapes, it is Sans Serif and it is looking good with this theme. Next we have technology theme drone rover version this 2.5 great for teenagers, you can see the difference between x-height and capital height is great, so it is looking good for technology websites, maybe modern techs, something like this. For kids or maybe teenagers, then we have another, like modern tech is dangerous for kids, says me. This is just our fun heading. So it is also some geometric Sans Serif with very roundy shapes, not perfect rounds, but oval type roundy shapes. Then we have at the bottom, we are most innovative design studio in New York. This one is a bit serious and geometric Sans Serif and it is related to design studio, so maybe we want to say some seriousness with our work innovation, something like this, so I use this font maybe, you might choose another font, so this depends on each designer and its taste but this is just to train your eyes. Now, we have business theme. Business is related to seriousness or maybe power or something like this, so these fonts, even they are looking very similar to each other, they are Sans Serif. They have very serious theme, they are not showing any much roundness, you can see over here the edges are totally flat. I have seen a lot of new designers that are using very modern type of fonts with business themes, so this is just your judgment, this is just to train your eye if you want to. Go with some modern type of font, you can go with it, that's not a problem. This is the fashion theme, some elegant looking fonts or typefaces here, some are very slim and dull just like models, supermodels. Although I don't personally like very slim models, they look like sticks and maybe clothes hanging on the sticks, so that's my own opinion, don't take it personally. Now, the second one is a bit classical, maybe wrist watches, so I am using some humanist font, you can see the e in the watches and the latest, you can see e is very slanted, it has a very slanted slope. So it is basically a humanist font and it is related to classical old type, so we've used this one. Then, we have very geometric font at the bottom, which is fashion design is not just about clothes, it's about you. It is related to some geometry, it's very geometric, very thin and slim, the dots are what you can see, the dots on the eyes are vertical and just like slim rectangles. So this is how I choose different fonts for different themes. Let's see some more examples for fashion theme, you can see again, I'm using Bodoni modern fonts, you might have seen it on a lot of websites. Bodoni fonts are modern fonts like this one, fashion designers these days are idiots. They're not idiots, it is just what I think sometimes. Super models are very thin just like broomsticks, yeah, that's true. Vivaldi 2.0, the latest in classical wrist watches on sale. So I try to use different fonts this time, most of them are Bodoni, they have very thick and thin alteration of strokes. So this is how we use Bodoni fonts in fashion themes. Now, we have sports theme. So you can see here I have four different theme lines. Can you run like a cheetah? It is very slim, slanted to run like a cheetah, so it is showing me speed when it's italic. Then we have 69 pushups to get your belly slim today, so it is very hard exercise, pushups. I think I can't go more than 10 in my current condition. Now, so I am using very hard or very tough textured font on this one. Then we have, if an elephant can get slim, you can too. Now, you can see how I've used [inaudible] in this line to show my theme, it is a fun theme but you can see if an elephant is bold and then slim is a bit more slimmer. So this is how I used different weights to convey my message. Then, we have Fantasy Football is here. This is an announcement. So it is in very thick bold letters. I saw this font used on Yahoo advertisement on yahoo.com, so I just tried this one over here. 29. Effect of Color on Typeface Mood (Voice): Now next stop is effect of color on typefaces. Now, you can see in the previous lesson, I have shown you different typeface modes. So color have a create effect on typeface mode. If you are using a color which is very different from your theme, it can really change or alter its mood or voice. You can see, can you run like a cheetah? I'm using cheetah colors and a bit of a brown color which is related to ground, maybe sand, or something like this. Then you can see in the next line, 69 push-ups, I'm using grayish-black color, which is related to toughness or something similar. Then in the elephant line, I'm using color, which is related to elephant and slim is the main focal points, so I'm using red color that you can get slim. Fantasy is related to purple color, it's magic, it's spiritual. Or something like this, so I am using purple color for fantasy football is here. So when you are designing or choosing typeface, make sure you choose the right color for the right team, and don't get too much into these colors. If you are already using a single color for your headings, use them on your typeface for headings. If you have another color for your body text, use that on your body texts. So don't fix your mind, try to select two different colors, maybe you might have a different color for your subheading or tagline, and a different color for your heading, so something like this. Let me show you a few examples from my work where I have used this color. You can see over here menthol flavor. I'm using menthol color for this one and you can see here we have three traditional tobacco flavor where I'm using brown color for this tobacco flavor. Also you can see these boxes are also the same color which I'm using over here. You can see here I have heading, then a subheading, then these are section headings, and we have two features like this one in this product. So this is one example of using colors with your typeface. Let's see if I can find another one, another example over here. Here we have another example, you can see I am using three colors over here for different icons on the left, in the middle, and the right side. I am using the same color for each step, like for this one, our step number 1, 2, 3. This is how I'm using two colors. Then again, I'm using over here two colors for showing some interest like, let us help you acquire, and then the number for calling is in different color just to emphasize it. Now you can see here I'm using again two colors, one is for heading and second is a bit grayish color because I don't want it to be very prominent. Again, here I'm using A+ rating with Better Business Bureau in red because I wanted to highlight it or make it more powerful, maybe look more powerful. So this is how I'm using different colors on different typefaces. So this is all about how to use colors for different typefaces. So let's move on to the next lesson. 30. Introduction to Font Pairing: Here's a brief introduction about font pairings, so just to clear your mind of some assumptions or some thoughts about how to pair fonts. First and foremost rule, there are no hard rules to pair fonts, so you need to train your eyes and guts for that. Try to develop your gut feeling that, okay, these two combinations look awful man, it's ugly or something. These two fonts are looking great together. This is how you train your eye or gut feeling, but it comes with time. You keep on seeing different combinations again and again from different designers, and then your eye and guts will be automatically trained. There are a few basic rules. First one is avoid too much similarity between fonts. If there are fonts that are equally round, and the X-height is same, and curves are same, then they will be identical to install [inaudible] such fonts. Then the second rule is look for contrast. Even in nature, you can see contrast is everywhere, even in plants, flowers, colors, everything. So two different fonts that are very different from each other, like Serif and Sans Serif, or Slab serif and sans serif, they work great with each other. Now, the third rule is look for similar features. You need to look for geometry of that font, roundness, open counters or closed counters. Whether the counters have very big space or they have very less space. Then also look for the X-height. If they share the same X-height, they might get well together. We are going to see all these rules in detail in the next lesson, so don't worry about it. Here are a few important points you need to keep in mind while trying to pair fonts. First one is readability. It is very important. If you are choosing text for your body, then readability is our first priority. Second one is display font or heading font. You can be a bit creative here, you can select any font, maybe very wide, very thick, very squiggly, or something like that. Now, the third one is voice of typeface. You are going to appear both fonts or select both fonts, keeping in mind about your theme or purpose of your design. If it's an organic design or something related to nature, then you should keep in mind that both font pairs should reflect that. There is last thing that I need to clear, which is some fonts, they just stored match at all. So if you are feeling that these fonts are not matching, then don't try to match them. Some fonts they really repel each other. Last one is that keep on combining different fonts together. You will learn with experimentation. Nobody tells you this trick. It is the best one to learn typography pairing. Open your fonts, select one for the body text, and then iterate for the heading in your theme. Keep on iterating till the time you find the best one. So this is how you train your gut and train your eye for combining different fonts. This is a little intro about font pairings, so let's get started and see and dive deep in the next few lessons that how to pair fonts. 31. x-height matching: Let's have a look at another typography matching or pairing technique, which is called x-height matching. You already know about x-height. If you can match the small letter x-height of two fonts, they are likely to go very well together. I am going to show you few fonts matches I came up with just to train your eyes. It is not voodoo magic or something. It is just hard work. You need to match one x with another x of another font. So keep on iterating and selecting different fonts till the time you get the x-height almost exactly matched. So you can easily combine those fonts. This is the first one. These are the fonts on the right side, Andron and Chaparral Pro Regular. This is the first combination. I am bidding Old Style font or Garamond style font with Slab Serif. At the top left, you can see that both x's are at the top, they have the same height. Only they differ in the stroke and the Serif endings. So the Serif endings, one is Slab Serif style, one is old style. It has a bit of curvy slabs at the top. You can see at the bottom left, I have matched these. One is used for heading. The other one is for body text and they are looking good together. It doesn't always seems that they are really perfect or they are looking great together. Sometimes they might look normal together. They might surprise you that, "That's awesome. They're looking great." But sometimes when you are matching x-heights of two fonts, sometimes they match very perfectly. Let's look at another example here. Again, I have the same x-height. One is old style with Slab Serif and old style thickness. You can see it has a very thick and thin alternation. In this example, I am using Chaparral Pro with Garamond font and you can see they are looking great together. If you want to vary, you can go ahead and choose other styles like I have used in this Chapter 25 over here at the left in the heading. I have used italic over here. So this is how you can introduce a third font. Use another style of the same font. If you have selected Chaparral Pro as your heading, you can use Chaparral Pro italic as your sub-line or subheading, or date, or showing chapter number, or something like this. So this is a very basic trick. Here is another one, transitional with old style. They, again, share the same x-height and you can see one is this Plantagenet Cherokee. Another one is MM Times, which look like it's a bit of transitional font to me. Here I am using transitional one as my heading and the other one as my body text. Here is another pair. I am using MM times bold as my heading and Inconsolata Medium, which is a bit of monospace fonts just like typewriters at the bottom. They're looking great together. They share the same x-height. One is transitional, one is Sans-Serif, or you can say much of a monospace typewriter font rather than Sans-Serif. So let's look at another example. Here we have a very great match. I don't know, maybe you feel some other way. I'm feeling this way. This is from the same font or same typist family, Droid Sans and Droid Serif. Again, the x-height is the same. Just their bold is different. One is Slab Serif or one is Sans-Serif and they are looking great together. I am using one italics style for variation. You will learn more about variation in the next section. Now this is the last example. I got this example from googling around and I found it very useful. One is Georgia and other is Proxima Nova. Really they look great with each other, and why? Because their x-height matches perfectly. So you can see not even a single pixel is up or down. They are perfect match of each other. So I am using Georgia as my heading and Proxima Nova as my body text. So this is all about matching fonts with similar x-heights. You need to find them. They will not come to your door. You need to find them. I tried different font combinations. In your spare time, try to use this technique and try to pair some fonts. So this is all about this x-height matching technique. So let's move on to the next lesson. 32. Pairing with contrast: Now let's talk about another technique which is called contrast in font pairing. Few years ago, I was just a novice and beginner in typography matching. I still consider myself just a beginner like you guys. What is contrast in font pairing? Contrast is basically of many types. It could be a contrast in the thickness of two fonts, maybe stroke thickness, one is very slim and the other one is very thick. It can also be a difference in the style, maybe because one is very roundy and one is very bold and bulgy and solid, it is not very round. Don't fix your mind that it is just contrast between maybe x-height or something like that, it could be contrast in any features of two fonts. Now, you can see here I have matched three fonts; Gadugi Regular, Colaborate-Regular, Aleo Regular, and I have shown you the x-heights of all these three. You can see one is a bit smaller and the other two are almost matching. I have seen few examples on Internet, I have googled around few examples of where the designers have matched three fonts. Now, the most common thing and the most common secret I would say I found is that most of the time, 90 percent of the time, the two typefaces, like here we have two typefaces which share the same x-height, so one is different. Most of the time, the other two share the same x-height. So that is the key to their matching three different fonts together. So this might also help us in using contrast in our font pairing. Here we have three fonts, and two have the similar x-height. Also, one is a bit slimmer, the two have more thickness. If you have more thick font, you might use it just for headings. This is common sense. If you want to go with some more details like this Internet / Market / Latest Posts subsection or tagline or something like this, you can use another one. For the body text, choose the one which has good x-height and it is easy to read or something like this. So this is how we are going to use contrast in font pairing. Here we have another example. Here, again, we have three fonts; Garamond, Franklin Gothic, and basically Franklin Gothic Medium; these are two styles from the same font. That is why I am showing you just two x-heights because these Franklin Gothic have the same x-height. So here, what I did is I am using Garamond as my heading. Garamond is a bit bolder than other Franklin Gothic fonts, so I have used it for my heading. Then in the subtext, Internet / Market / Latest Post, I am using Franklin Gothic Medium, I guess, and for the body text, I am using Franklin Gothic. So this is how I combined all these fonts and they are looking really awesome. Here is another example where I have matched Garamond, Halifax Light, and Georgia, three different fonts, and it is difficult to match three different fonts. Now, the secret source I already told you is that two fonts with similar x-heights and one is different from these two. So one have smaller x-height, other two share the same x-height. With regards to contrast, they have a lot of similar features, but their thickness and stroke is different. So Halifax Light is used as a tagline and Garamond is used as heading, and Georgia is used for body text. Here is another example of contrast. Here I am using Garamond, Garamond Italic, and Georgia. So basically two fonts, Garamond and Georgia. You can see they have contrast over here, if you look at the X over here at the left. They have contrast in x-height. So a lot of contrast in x-height, although their features are very same, one is Old Style, one is Transitional, and still they are looking great. They make a theme of a poem or maybe a suspense story or something like this. So this is a very good example of contrast using only just our x-height and a bit of contrast between Old Style and Transitional. Here is another example matching two fonts. Again, we have Transitional fonts with each other. Just they have difference in stroke and style a bit. One of them, I think, is old font Garamond style. So they don't have too much contrast, but still they can make a good pair. Plantagenet Cherokee, one font is, and the other is MMTimes. From my perspective, my gut feelings is that it is not a very great match because there is just contrast between the stroke thickness. Otherwise, their x-height is similar. So they are not giving us a cue that they are a perfect match. Here is another example. Here, we have a good contrast between the x-heights, although the features are same. They both look like geometric fonts. One is monospace Inconsolata Medium, which is monospace font and other is Montserrat Regular, and this one really creates very awesome-looking font pair. So this is another example. Here, I have used x-height as my contrast and also a bit of stroke thickness. Here is another example of contrast with using two fonts from the same family which is Droid Sans and Serif. Although they share the same x-height, their stroke difference and also their slabs and Sans and Serif is basically the contrast. A lot of times, Serifs and Sans Serifs, they make a really awesome couple. This is the last example I'm going to show you guys. So don't get bored with my boring voice. I know you hate my voice a lot. This one is Ubuntu and Proxima Nova. You can see that Ubuntu is very thick and a bit curve in its legs of X. You can see also the x-height of both is a bit different, but they look very good together. They can make a very good, health-related or maybe tech-related team. This is the last one in contrast, in font pairing example. I think you might have gained a good knowledge and maybe good feeling from this session. So let's move on to the next lesson. 33. Pairing typefaces on similar features: In this lesson, we are going to learn another very basic trick to match font, which is to match the features of two different fonts. What does mean features? Let me explain it with some few examples. Because this technique can only be learned by showing you a few examples. Otherwise it is not easy to learn. Here I have, this is a blog stored.org. I found this example from this website. This is typ.io. You can see here we have one font in the heading. It is just led letter two heading. Then we have copy font, here we have it. If you look closely, even you'll think that this font has a very thick stroke. But if you look at the features like the E, the slope of E, and the X, how it is written. Also the I, everything they match a lot with that font below. The font over here you can see if you even look at the Q letter. If I go below a bit here, you can see at the end, you can see that Q, you can see that the Q is almost similar to this one, just the difference of a bit of stroke and style, the shape and the placement, everything is almost the same. Also, if you look at A, this is A, and here we have A again, the slant of this counter area of A is almost the same. So they have same features. You can see over here. If we can zoom in a bit more, maybe we can see that easily. You can see the similarity between A's, also the T, the ending of this T. You can see over here. This is almost the same like this one. It is also has the same ending. These are few features you will be looking for. They have matched these fonts with similar features. Although I still believe that you should train your gut or eyes to match the fonts. These features can be sensed. You cannot look them like this and analyze them mathematically. Let's see another example. Here we have another example. This is one font. It is very bold. I think it's circular, font's name is circular. Then we have here another font in the paragraph which is fried text. Now coming to the similarities, let's zoom in. If you see both fonts, some of the curves, they have like this, it is almost the same. Then we have T's. You can see the top of the T, how it is meeting over here in this area. It is almost the same with this T. These are few features that are similar in these two fonts. It seems very close to each other with regards to some of the curves and some features. This is another example then we have, let's see, few more examples. Now, if you look at Google Fonts specimens where Google Fonts share some font pairing, let's go to the new Google pairing. I think it's better. Maybe we can look at it over here too, so it's not a problem. Now if you look at this first pairing, they suggested Open Sans and Roboto, you can see there is a lot of similarity between these two. Both are Sans Serif, you can look at the A's in the paragraph, and they are almost the same Robot is a bit slim or the O, O's of Robot are a bit, you can see it has less counter and a bit vertical rather than this open Sans open counter, we have more counters in the O's. Still they look very similar, although I think they share too much similarity, but still they have showed it as a pair. Then I like this Open Sans and Source Sans Pro, they also share a lot of similarities like the curves you can see N and A's an N's and also the O's. They're very similar. From my point of view, they make a very good pair. Last stop is that this website, it is typeconnection.com and I tried to pair two fonts with similar personalities. One font is this Adobe Garamond Pro, and second one is Chaparral Pro. It also shows some of the physiques of like a trenchant, trim, solid, durable, agile with defined forms. We don't known that much about it. I'm not that of an expert. But what I want to show you guys is this matching graphic over here. It is very interactive and very nice. Right now I have clicked this Garamond Pro and you can see this highlighted one is Adobe Garamond Pro font. You can see the pit in the background, very light, that is basically Chaparral Pro. You can see the counters are almost the same and thus labs are serifs they share the same length. Although these Adobe Garamond Pro have rounded slabs, sorry, serifs they have rounded ends, they are not sharp or edgy. But the shape or the angles are almost the same. You can see the L over here, it is almost going in the same angle and direction. Also you can see over here it shows wedge-shaped head serifs. They are wedge-shaped for both fonts. Then we have small counters. Then we have sweeping lag. I don't know what it is, but they have showed it over here. Now, horizontal crossbar. We have horizontal crossbar very straight. Then we have smooth transitions to foot serifs. Smooth transition mean that there is very smooth angle for the stem to this foot serif. This is what they're showing. Now switch to this Chaparral Pro. Now, Chaparral Pro is at the front, which is a bit dark. You can see the endings are a bit thick and slabish. But still it is very similar to Adobe Garamond Pro or some features, the shares in the same features. Like you can see, O has small counters. They both have small counters than they have slight modulation. I think this is what they are trying to say about the angle. Then wedge-shaped head serifs. This is the same, then unbracketed slab serifs, it is different from the other font. It has slabs rather than this curvy serifs over here like this Adobe Garamond Pro. But this is a very nice site if you want to try to connect different fonts with similarities, you should check out this site. I will share all these sites' links in the resources. You can try them out, play this game. It is very nice and very cool. It will improve your eye for matching fonts. Also, I want to show you one more example. Bebas Neue and Din Condensed Web. The first thing when I look at both these fonts is that they are tall. This one is a bit tall. Also this is very tall font. Although it is thick but it look a bit slim and tall. The built is tall, the X-height is good. That's why they look very similar because this is also thick and tall. This is also thick and tall. This is the only similarity I can see because right now the Bebas Neue Font is in all caps and I think it's available only in all caps. These are few examples I wanted to share with you guys, Adobe Garamond Pro, Chaparral Pro, and few others. You can search the web sites, this typ.io, and look for similarities just to train your eye and keep improving your typography skills. Let's move on to the next lesson. 34. Avoid too much similarity: In this lesson, we are going to talk about too much similarity. So in the previous lesson, we talked about trying to find similar features among different fonts to combine them. But in this lesson we are going to look at, if you try to find too much similarity, it will hurt your contrast and your design, it can easily ruin your design. So keep in mind that too much similarity can easily kill the contrast aspect of our forward matching technique and it can really impact your design, so try to avoid too much similarity. Here I am showing you two fonts, Noto Sans and Open Sans. While I was designing for some web app for doctors, I guess, I came up with this combination. I tried to use Noto Sans and Open Sans with each other in that application and to my surprise, there was no contrast at all. I was just confused why it is happening again and again. I should use some other font, they are not matching very well. You can see at the top that x-height is similar, even the stroke's width is similar, they have almost similar stroke. At the bottom you can see I'm showing different letters, grow foax, it doesn't mean anything just to show you the curves and angles and counters, how much big the counters are? What is the shape of the counter? You can see inside the O letters, both fonts have almost 99 percent similarity. Even if you look at A the curves are same, even the counters are almost same, W is same, only difference is this G letter, I guess one is Humanist Sans-Serif and there is a bit geometric. The problem I want to show you here is too much similarity, so try to avoid too much similarity. Here is another pair I found which is Euphemia Regular and Open Sans. I think they are not too much similar, but still they share a lot of same personality. If you look at Euphemia Regular, I think it has a bit more curvy nature and ends and you can see a tail after A letter over here. Also, F is a bit different but the basic structure of letter is almost the same. This is another example, try to avoid such combinations. It is better that you write something like two lines in two different fonts and try to see whether they resemble with each other or not. Now here is another combination I found. I searched a lot and tried to mix a lot of fonts then I reached these two much similar combinations. So if you look at Droid Sans and Source Sans Pro. There are a lot of similarities between these two fonts. If you look at the G and the ear of G, the letter R, it is almost the same, W is almost the same, one is wider, one is a bit less wider, F is almost the same and then the curves at the A, the counter inside the A letter, close counter, this is the same, and the X is almost the same. X-height is a bit different between these two fonts, but still they share a lot of similarities. So this is all about avoiding too much similarity, if your gut feel that these fonts have no difference because your eyes and brain is more trained to look at differences and similarities. If you find any similarity or you find that there is too much similarity between two fonts, try to avoid them. Now, let's move on to the next lesson. 35. Pairing fonts from same designer or family: First we are going to take off very slow. So we will look at techniques that are related to easily combining different fonts. So how we can pair fonts very easily. Now the first rule is, if the fonts belong to a very big family or a same designer, then they will fit together very well. Now, why is that? Because same designer or same family means mostly the similar geometry. So the shapes and angles, most of them they will share their traits. Now there are families which are called super-families like we have Roboto over here. Let me show you on Google Fonts. If you look at Roboto, where is Roboto? Here. One is Roboto over here. It has 10 or 15 different sizes. Then Roboto Mono. This is a very big family, so it has different variations like Roboto Mono. There is one more, Roboto Condensed. So all these can be mixed together very easily because they are built and designed by same designer. Actually it's basically very big Jimbo mega family of fonts. So same family could be a very large family or it could be a mix-up of sans-serif or serif of the same type. Droid Sans, you might know the Droid Sans and Droid Serif. It is also two couple of families and they are basically the same. Then Roboto and Lato are single big families. So keep in mind that if a font have a very big family and it has styles of, for example, let me show you. Like this Kanit. So it has many variations, many different styles, many thicknesses. So stroke thickness; 100, 200, 300 different. Also this Exo, Exo 2, it has a lot of variation. With these fonts, we can create a lot of variations. So the first step is that you find a family which have a lot of styles. So you can use only single family and use different ways and styles to create variation and contrast in your text. So this is first. Then the second one is that you select fonts from the same designer. Let me show you example. Here I am showing you example of Justin Gravante Site of the Day. It's from January and it is using fonts FF Mark, Freight Display, and Freight Text. Now Freight Display and Freight texts are basically designed by the same font foundry, which is GarageFonts. You can see over here my fonts over here, Freight Text, GarageFonts. The designer is basically this Joshua Darden for both fonts. This is the same designer. If you click the "Profile" of this Joshua Darden, you can see he has a lot of different design fonts like Freight Text Pro, Freight Display Pro, Freight Sans. So all these fonts, they can be mixed together easily because I think they are almost sharing the same geometry, because they are designed by the same designer. Also their name is same, Freight Sans, Freight Sans. So this is how we match different fonts from the same designer. Then we have few more examples of these Freight Text and Freight Display. You can see over here, they have used four different fonts on this design. You can see over here. It is very marvelous use of fonts. I think he might be very expert in typography. Then we have another side. This is UrbanStems. It is also using just Freight Display and Freight Sans. They are looking great together. One is sans serif and one is serif font. Then here, this is a Viaduct Rail Park website and it is also featured on Typewolf. Here again, we are using Freight Display and Freight Sans. Not we, but this designer. They are looking cool together. It is also one is a bit related to sans serif family and one is for serif. So they are designed by the same designer. This is basically, I want to show you here. This is how you use fonts from the same big family or the same designer. Use this site, better Google fonts. I will share you this resource. So make sure you keep it and look for different forms that have big families. So this is all about the first rule, which is how we are going to easily combine fonts from the same family or the same designer. So let's move on to the next lesson. 36. Online Tools for Font Pairing: In this lecture, I'm going to share with you guys few of the very best websites that will really improve your font pairing techniques, and font pairing guard, and your font pairing eyes, and your font pairing, I don't know, maybe brain, something like this. I don't know you have it or not. Now, this first one is type connection. This is a very great game to type pairing. You can select different fonts, like we have these old fonts, Garamond Pro, ITC Century fonts, Univers, very structural, a lot of sans serif style fonts. Then we have some slab serif style fonts, and this is a very different font. If you select any of them like if I select this one, then it gives you four options. Seek the similar, you want to use the same similarity in two fonts or you want to get the contrast, explore the past, or you want to go with the historical data of this font like which font was in 1800 and which was in 1900 or something like this. Also, you can rely on the family. Whether you want to select from the same family like this Adobe Garamond Pro. These are few options. If you click on this like "Embrace the Other", then it gives you options to select three more. You can select any of these three. For example, if I select this one, let's see how they are going to match up with each other. It shows head over heart. They really match, let's send them on a date. Maybe not because are too much alike, they are both old style serif that remain crisps small-sized. This is how it trains you with type matching. You go back and try to combine them again like over here. This is a very cool game, you can play it again and again and train your eye. For example, if you select this one and I am going to embrace the other, it is very rounded, so we might go with Futura which is very sharp, edgy font. Let's send them on a date, see how it happen. Yes. They have made a very successful match. Let's see how well you can do over here. Then we have few more sides. This one is very good, Type Genius. You select one font like this one, and the view matches, and it will show you a lot of different matches like Adelle, FF Dagny Pro. This is one match it found for this font. You can select others like maybe Bebas Neue and view matches and you will find a lot of like 1, 2, 3, 4, and 5 different combinations. This is very good, another tool to maybe train your eye or quickly find a font pair. Then we have this website, fontpair.co. You can search over here or you can select fonts over here. You can also go with san serif, san serif combination, or cursive with san serif, or serif and sans serif, something like this. One is for heading, the second one is for body of text. It is normally showing you, most of the time, Google Fonts. These are all Google Fonts. It will also show you where to download these fonts. Then we have few other websites for type inspiration. This one is create typewolf.com, and it will show you all that new create designs and typography masters and their masterpieces and along with their fonts. You can see at the bottom, they have three fonts used in this website. If you click on it, you can see the details over here, like this. At the bottom, and at the top, if you click on these fonts, you can go to this font details and where it has been used. Also, you can download this font or maybe you purchase it. Then there is one more typ.io, it shows you inspirations of different fonts, also the fonts used over here. Also the tags which means that which category it belongs to. Then the site link, if you want to go over here, you can check your self. These are few tools I might find more and I will include a PDF or maybe other file in the resources to download it and see for yourself. Keep practicing and improving your font pairing skills. I will give you a lot of challenges in the next few lessons, so let's see how you can improve and how much you already have improved. Let's move on to the next lesson. 37. Dribbble Design Exercise Preperations: In this exercise, we are going to create something similar to this one. First, I'm going to show you the resources we are going to use and the fonts we're going to use. Let me show you the resources. For the background image, I have used this pixabay.com. You can see over here iPad tablet. You can search over here, iPad tablet and I think this image will appear. For the fonts, I am using three fonts. One is Bitter by Google fonts, this one. You can search over here. Then, we have Aller font, which is a free font from Font Squirrel. I really like this font. Then, we are using Aleo font just for the logo. So it is not going to be used in the design, just for the logo. Then for the modulus scale, actually, I didn't use any modulus scale. I just used 42, 16, and 18 pixel, three values. But actually, I found a scale which is related to this ratio, 16 pixel base and 1.15 ratio, and you can get the same values I have used 16, 18, and 42 or 43. So you can use this scale. In the end, we are going to use this Galaxy hand mock up file, free file from graphicburger.com, and we are going to use it in our design. You can use any of this, as we don't have any mobile app right now, so we are going to use the same preview over here. Let's get started. First of all, we are going to just set up our canvas. Let's go ahead, new file. I'm going to select 1,920 by 1,080 full HD. Don't color manage this document, square pixels, and we're going to click "OK", like that. Then, we are going to drag over this image into our Photoshop like this, and just try to expand it so it covers the whole canvas like that. Then in the middle, we are going to create a rectangle. Click over here once, and the rectangle width should be 1,360 by 784. So 784 is basically divisible by 16 pixels, so I am considering this size in height. Let's create this. Let's hide its border. Select an grayish styled color over here, and we are going to move it in the middle, like that. Now, the first step is we're going to create some guides, columns, and some gutters and all the stuff around this layer. The best way in this situation is I'm going to use a plug-in called as GuideGuide. First, I'm going to make a selection, control click around this layer, and our margin is 0, 0, 0, and 0, 12 columns. Number of rows, I am going to divide it into four sections. Here we have 1, 2, 3, and 4, so four sections. Then, we have no width and here is our gutter size 20 and let's add the guides like that. Now, if you don't have this plug-in, don't worry, you need to create, first, the document size. In this instance, you are going to create 1,360 and 784. Just create this document first and build some guides around it, like this, New Guide Layout, 12 columns, 20, and leave the margins around it like that. Press "OK". So if you don't have this plug-in, your first step will be this one. So first, you need to create this document, then go to this canvas size and expand your canvas size to 1,920 by 1,080. Press "OK". Now you can see your canvas has been expanded and your guides have over there. So you can use these guides like that. But right