Typography & Vertical Rhythm for UI Designers and Web Developers | Muhammad Ahsan | Skillshare

Typography & Vertical Rhythm for UI Designers and Web Developers

Muhammad Ahsan, UI UX Visual Designer 10+ Years

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
71 Lessons (8h 29m)
    • 1. What we will cover in this course

      4:35
    • 2. Introduction to Typography

      4:40
    • 3. About Font and Font Families

      5:09
    • 4. Typography Anatomany terms

      6:36
    • 5. Humanist Old and Transitional

      6:45
    • 6. Sans Serif and Script

      5:34
    • 7. About Line Length

      3:14
    • 8. Text Alignements

      4:55
    • 9. Line-Height (Leading)

      6:39
    • 10. Letter Spacing (Kerning)

      4:47
    • 11. Design Exercise to apply what we have learned so far

      10:58
    • 12. Hyphen, en & em dash usage

      2:28
    • 13. Using Quotation marks properly

      2:52
    • 14. Roles of Typefaces

      4:37
    • 15. Typographic Scales

      3:00
    • 16. Online Tools for Typographic Scales

      5:28
    • 17. How many Levels of Typographic Hierarchy do i need?

      3:13
    • 18. Vertical Rhythm

      5:13
    • 19. Vertical Rhythm in Photoshop

      7:02
    • 20. Design Exercise for Vertical Rhythm

      12:04
    • 21. Intro to Modular Grid

      11:07
    • 22. Preparing Grid for Blog Layout Design Exercise

      10:44
    • 23. Design First Blog Layout

      16:21
    • 24. Design Second Layout for Blog

      10:02
    • 25. Refining the 2nd Layout Design

      3:10
    • 26. Last layout for Blog Design

      9:30
    • 27. How many fonts to select?

      5:18
    • 28. Moods/Voices of Typefaces

      12:42
    • 29. Effect of Color on Typeface Mood (Voice)

      3:57
    • 30. Introduction to Font Pairing

      3:49
    • 31. x-height matching

      5:28
    • 32. Pairing with contrast

      7:47
    • 33. Pairing typefaces on similar features

      10:04
    • 34. Avoid too much similarity

      4:15
    • 35. Pairing fonts from same designer or family

      5:15
    • 36. Online Tools for Font Pairing

      5:31
    • 37. Dribbble Design Exercise Preperations

      5:00
    • 38. Hero Header Design Part 1

      16:19
    • 39. Hero Header Design Part 2

      15:31
    • 40. Hero Header Design -2nd Theme

      3:52
    • 41. Hero Header Design - 2nd Theme Part 1

      7:42
    • 42. Hero Header Design - 2nd Theme Part 2

      5:34
    • 43. Social Media Ad Design Exericse → Preperations

      3:59
    • 44. Social Media Ad Design Part 1

      6:38
    • 45. Social Media Ad Design Part 2

      14:26
    • 46. Social Media Ad Design Final Touches

      2:54
    • 47. Juicy Design Exercise - Preperations

      3:26
    • 48. Juicy Typography Design Exercise Part 1

      15:58
    • 49. Juicy Typography Design Exercise Part 2

      12:03
    • 50. Intro to Point (PT) sizing in IOS Devices

      12:00
    • 51. IOS Typography Specifications

      3:22
    • 52. Designing Multiple resolution IOS Screens with Photoshop

      13:57
    • 53. Student Question about Resolutions

      13:55
    • 54. Mirroring your Photsshop to Iphone

      5:04
    • 55. Android Typography and Scales

      4:16
    • 56. Desinging for Multiple Android Screen Sizes

      8:30
    • 57. For Developers → Using Google Fonts

      3:36
    • 58. For Developers → Using Premium Fonts

      5:38
    • 59. For Developers → CSS Font Sizing

      2:37
    • 60. For Developers → em Font Sizing

      8:11
    • 61. For Developers → rem Font Sizing

      4:34
    • 62. For Developers → % Font Sizing

      4:15
    • 63. For Developers → vw Font Unit

      4:09
    • 64. For Developers → How Vertical Rhythm works in CSS

      8:28
    • 65. For Developers→ Gridlover Coding Exercise

      8:05
    • 66. For Developers→ Custom Typographic Scale Bootstrap

      12:33
    • 67. For Developers → Dont use code from Typescale

      2:22
    • 68. For Developers → Intro to Responsive Typography

      6:55
    • 69. For Developers→ Different Scales for Multiple Screen Sizes

      9:44
    • 70. For Developers → Percentage CSS unit for Responsive Typography

      11:39
    • 71. Student QA → How to Expand Typographic scale for Responsive Web Design usage

      6:56
23 students are watching this class

About This Class

Have you ever wondered that Why the designs of Dribbble and Behance looks so elegant. One of the secrets behind those great Web and Mobile App Designs is perfect use of Font Combinations, powerful usage of white space and grids.

To learn this Super Power of Typography and use of Time and Space, Take this course

This course main focus is on Typography for Designers and Developers. All great designers possess the skill of Typography and their usage of white space is always out class.

Take Away For Designers :-

In this course we will convert your boring designs to Dribbble level designs by learning

  • Basics of Typography Classes and Anatomy
  • Learn how to make your text look interesting by using variation techniques
  • Create elegant web & Mobile app design by selecting and pairing meaningful fonts
  • How different Moods or Voices of Fonts works
  • Master Font pairing and learn tons of online resources to automatically pair fonts
  • How to use white space effectively by using Vertical Rhythm and Modular Grid
  • Learn about IOS App Typography and understand different IPhone Screen sizes
  • Learn Google Android Typography, its scale and its SP unit of type
  • Use Free Apps to connect your Photoshop Screen to IPhone or Android Device
  • How to balance your design using LEGO Blocks method
  • Dribbble Styled Design Exercises to improve your designs

Take Away For Developers :-

  • How to use padding, margins and other elements to create Vertical Rhythm in CSS
  • How to use Vertical Rhythm in Bootstrap
  • What are absolute & relative font-size units e.g em, rem, vm, % and when to use them?
  • Step by Step coding exercises to apply Baseline Grid for Developers
  • How to show baseline grid in HTML page with just one line of code
  • What font sizes are best standards as Base font Size
  • How to set up Typography Scale using online tools easily
  • A lot of quizzes to test your knowledge

So if you really want to step ahead of your fellow Designers & want to get out of the crowd. 

Requirements to take this Course :-

  • Must have good knowledge of Adobe Photoshop (For Designers)
  • Must know HTML and CSS (For Developers)
  • Download and Install Adobe Photoshop CC2015 or latest version

Take this course now and I will see you inside the course

  • NOT for Novices (Must have some Photoshop Experience)
  • Web Designers
  • Mobile App Designers
  • All Designers who think their design have something missing
  • Web Developers
  • Graphic Designer

Transcripts

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 now, I'm using this plug-in. So just to ease the steps, I'm using this method. Let's make a bit more white color, whitish gray color. Now our modular grid has been created. We have a lot of columns and four rows. We are going to use all these rows to create our design. In the next lesson, we are going to design over this canvas. So let's move on to the next lesson. 38. Hero Header Design Part 1: Now, let's start creating its logo first, we are going to select Text Tool or type T on the keyboard to select this tool. We are going to select Aleo font. I think it was bold, and size must be 36 points, and color will be this one, I think aaafb2, press "OK". Click anywhere and write F-A-S-T. Fast is basically the firm name, we just imagined it. There was something below it, a orange line just to emphasize that it's a logo. It's a dummy logo, so don't worry if you worry too much that why and where this logo has came from. Just drag a line below it. Just remove this stroke and use this color orange. This orange color we used over here, it is a bit of flat orange but a bit sharp like that. Right now, don't worry about the placements. Just create a group over here called Logo so everything is organized. This is our main container, so name it Container. This is our background, so make it Background. Always use naming convention which is meaning-able and easy to understand. Otherwise, it will create a very big mess in the end. Now for this top navigation we are going to use font, which is Aller. So basically we are using two fonts; Aller and Bitter. I'm going to use Aller regular and font size will be 18 points, shift it to 18 and color will be a bit more dark grayish color, maybe this one, I think it was not this one, it was this one, 333683, press "OK". First one was About us. Why I cannot see because I have can move it up, About us. Then we had Case Studies, Recent and Contact. I advise you that you use another copy. Case studies, now all these have been created. Let's move the last one which is Contact to the end where we need it. Highlight your rows and columns by clicking "Control Semicolon", select all of these and we are going to align them like this. This is basically distribute it horizontally. Sometimes still it doesn't distribute it horizontally very nicely. You can see About us, has been moved over here. I need it to be over here, and then again, I'm going to select it like that. I need Case Studies to be over here. Let's arrange it again. No worries if Recent is over here, so let's keep it like that. Now, we are going to create these three bars over here. For that, we are going to use this rectangular tool, which is our rectangle. You can also use this rounded rectangle if you want. I think I have used rounded rectangle may be like this. It has some grayish color like that. Over here, we are going to select the color, maybe this one, maybe lighter grayish color. Duplicate it, one, two. Like that. Group them and we have our navigation over here. If you want to move it up, you can move it up over here. Just keep the distance, which is going to be 1, 2, 1, 2, 3, 4. We can also add a few more, maybe six more, 1, 2, 3, 4, 5, 6. The total distance from top is 30 pixels. I'm not right now, considering my baseline, so right now I am free of my baseline. Sometimes when you are designing, you don't need to think too much about baseline when you don't have a very long paragraphs or very long texts to edit or you need to design for blogs or something like that. Right now I'm designing for the header. So I am just using my blocks of legos to arrange everything. Four rows or four sections, horizontally and vertically, I have 12 columns. Let's name it Menu or Nav, navigation. Let's move it up, align with this. Why I'm using groups because I can easily align them with each other. This one has been aligned with this easily. Also, you can double-click it and you can change the color of the whole group simultaneously. Color Overlay, and we are going to use some color overlay over here like this, this looks great rather than too dark grayish color. Also, this is called Hamburger menu. Our tab bar is almost ready. Let's align the logos too with these. Maybe I need to have 1, 2, 3, 1, 2, 3, 4, 5, 6. I guess 16 multiplied by 2 is equal to 32. So let's move it four pixels over here, 1, 2, 3, 1, 2. So 32 pixels, I have moved it from top. Let's move them two pixels below, one and two. A great design is basically very calculated. So don't think that you need to be very creative to design this. I think you need to be very analytical to design this. Let's hide this and see what are the distances between our elements. I still think that there is much more distance between About and Recent. Let's use our inner gut feeling to align these. I am going to move it over here and move the Recent over there. Let's move it like that. Let's move the Content two times over here. Now, it is looking perfect. You can see how I used my inner sense, or gut feeling to align these. Don't always rely on these grids. Right now I'm using this area for the navigation, 1, 2, 3, 4, 5, 6 columns, and two columns for this logo. This is how I am lining everything up. Now, I need the text over here, which is going to be in Bitter. I'm going to use this whole block, 1, 2, 3, 4 columns. Let's paste some texts over here, which was this one, see how Woo-Commerce and everything. I am using Bitter over here, and the font size is 43, as I mentioned earlier in our typographic skill. Let's copy it. I am going to use Notepad to paste it because it will paste the whole style. I want you to see me while styling this text. Let's paste it over here. This one is fake layer, this one was real. This is our text. What we're going to do is we're going to select Bitter over here. This will be Bitter Bold. I don't know, was it bold or whatever? Let's see. No, it wasn't bold, it was regular. Now 43 and I selected the line-height to be 60. You can see over here. Now the space looks a bit less over here. I don't know why it is not fitting up over here. Let's expand this to the next one. So 1, 2, 3, 4, 5 columns, right now we are using over here. Now I'm going to select this and I'm going to use some darker color over here. I think it was this one. Is it getting below some layer? I think it was inside this group and I had applied color overlay on this navigation. So I have moved it out. I'm going to use a bit of dull bluish-gray color over here. I think this looks great. I'll be a bit less. This looks great, now I am going to use this. Select this first and I'm going to use this dull grayish-blue color. This area is ready. Now let's create our button over here. So for the button I'm going to use rounded rectangle, and we are going to use some size. Let's use 240 by 36. Let's try this one, and our radius will be 30. Let's use 30 over here, and 30 over here, and 30 over here, and 30 over here. So it is very slim. Let's create a bit more height, a bit more big button. Maybe we can use 16 multiply by 3 is 48, I guess. Yeah. I think 48 is closer. Let's see what was the size I used over here. Control D, and the height was 60 pixels. So I think 64 will be in our range for our baseline height or everything. Let's use it over here. So I'm going to use 64 pixels. Let's color it something else right now. Now we have some problem with roundness. I have shifted it to 32 pixels. Now it's perfectly round. We have created our button. Let's move it a bit down below, maybe in this area, or maybe if we need to space it out, we can use 1, 2, 3, and 1, 2. So 32 pixels away from this area. Let's see how much of it it was from this area. I think it was in the middle of these two, top and bottom. Maybe you should need to use your inner gut over here, so don't worry. Also, I think you can see over here I have fixed it in two columns. So right now it is extended from this column. We are going to contract it from here. We are going to fix it in two columns, like that. Let's move it a bit more below 10 pixels and one, two. It is right now 48 pixels away from the top. So we are going to use Aler over here, so 16 pixel points, Learn more. It is looking really cool. Let's change its color to white, like that. What is happening with me? For the icon over here, the arrow icon, I have used this plug-in called Font Awesome PS. I'm going to search over here arrow, and it will show me all the arrows inside this Font Awesome. This is the arrow I have used because ultimately I'm going to give it to coders. So this will be a very big help if they can use this arrow over here. Let's move this arrow. It places a very small arrow, so don't get confused where is my arrow or it has been kidnapped somewhere. Let's use white right now and move the size up. I'm going to zoom in and Control T, and let's press "Shift" and "Alt Shift Option", and we are going to increase the size like that. I think the size is almost perfect. Now we have created our button. Let's put the text over here. Right now don't worry about this button color. We are going to give some final touches in the end. So this is the text. I think I should have copied it before starting this course; somewhere like that, somewhere here. This is a bit of inconvenience for you, but I think you should bear it with me. Now you can see over here, this is the area I'm using. Now as soon as this area ends over here, this block, I am going to put my text over here. I'm going to put text over here like that Control V. These are two layers, let's color it with this gray right now. I think they have a lot of separation due to this line-height. So I have fixed the line-height to 24, and I think we need to make this one a bit more grayish like that. So I've used this button color. If you are designing, it is better and wise that you first use gray colors. So try to use shades of grays on all your design rather than using any color. Then in the end, use one or two colors to highlight everything. This is another great tip to get you started and create a very great design. Let's move on to the next lesson where we will be giving some final touches to this design. 39. Hero Header Design Part 2: Okay, now this is the last session. We are going to first bring our mobile phone screen over here. Let's go to the mobile screen we have downloaded. Let's extract it over here. We are going to use this first one. This is the first one. What I am going to do is just hide this background. You can bring everything like this, Control G and group this, Window Arrange and go to Tile Up Vertically and move it over here like that. We are going to close this 1.psd. Let's arrange the windows back. Consolidate All To Tabs like this. Now, this is very big. Let's keep it mobile, zoom out, Control T, Okay, and we are going to move it like this. Press "Enter". Now, I'm going to sorry. Now I'm going to select this group. We are going to use our shift and arrow keys to move it around like that. Now, what I'm going to use is I'm going to use 1, 2, 3, 4, 5 columns for this phone. Right now, I'm using almost six, so don't worry. It is almost going to be here. I think the size is almost perfect. Like that. Now, you can see I have extended the hand at the bottom a bit and you can see the hand is coming out. What we are going to do is, we're going to convert it to smart object, move it down to the container. This white background is specifically the container and clip it like that. This hand has been fixed. Let's hide [inaudible]. Everything is looking fine right now. There are few things like we need to fix the area over here. What I'm going to do is we are going to select this button, Learn More button background, go to Layer Styles Gradient Overlay. I am going to use this orange to not multiply but normal. This is going to be orange to yellow. It should not be radial, it should be linear. I am going to use 180 from the left, the angle is from the left, so this color is coming from left. You can use this method to whatever you like. I'm right now using it like that. If you want to fix the colors, you can go ahead and use more saturation over here like 95 maybe. Also for this color maybe, it is very light, let's make it a bit dull. Maybe 95 and saturation 100. No, I think it is very close to this color, so I'm going to use some other color maybe in the yellow area like that. A bit more yellow. Okay, now it is looking great. Basically, I am combining yellow with orange color. They are very close in the spectrum, so they look really nice and vibrant. This is basically how I created this. Let's use 1, 1, 2, 3, 4, 5, 6 and 1, 2, 1, 2, 3, 4. I have used 24 over here, so let's create 24 over here too. So 1, 2, 1, 2, 3, 4. So 24 from both sides. If you want, you can use your own imagination and your own gut feeling to align these. If I try to move it over here maybe 1, 2, 3, 4 pixels, it is looking good. Also, this arrow, if you want to shift it up, or maybe on the left, maybe on the right. It is looking more better now. If you want to get some shadow around this button, select this one and I'm going to use some diffuse shadow over here, so like that. What I'm using is I'm using 20 percent opacity for the shadow and let's create the shadow a bit closer. Distance is three pixels. You can use nine or whatever if you want to shift that distance at the bottom like that. I think maybe six will be good enough or maybe eight, it is the medium of your baseline height, so 16. Now, it is looking great. If you want to shift the color more subtle, you can go like this. Very subtle shadow, very light, very diffuse shadow. Press "Okay". I think we have finished this exercise. Still, if you feel that this area has less space than this one, you can shift this button down a bit. Let's create these alignments. We are going to use our inner gut feeling to shift this. I'm going to use over here, 1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8. It is almost aligned with this area or this mobile phone bottom over here. Also, we can shift this arrow and this button. Let's group them to button. Let's move it to the bottom, or a bit down, 10 pixels down. So this is better now. You can see over here, still if you feel, you can move the button down like that, I think it was better over here. Maybe 1, 2, 3, 4, pixels down. Open your imagination, don't fix your thinking that we are going to use baseline, and it is not going to be in the baseline. Just use your imagination. Just make sure that this is going to be in this whole area, and also you can play with the line height if you want. If you want, you can play with the line height light 64 or maybe 68, something similar to this. You can use more space over here and you can send the button a bit down more like that. This is one way. One other thing is, you can see over here that our visual alignment is a bit off. Why? Because these have edges and this is round. If you look at it, you can see it is looking a bit inside this area, so they don't look aligned with this line. How you can correct this, you can shift this paragraph and this over here. I think it is a bit more. I'm going to use 64, and I can also shift it eight pixels down. I've shifted it eight pixels down, it is just my liking. I want to create more space over here, so I'm shifting it down. Also, if you want to select this mobile phone and and we are going to shift it down a bit more like that. Maybe move the Samsung inside. Let's move it a bit up and a bit left. Sometimes you need to hide your grades and guides to see what the design is coming up and move the things around freely. Now, to fix these two issues, we have our this two text areas, we are going to ship them over here like that. It was 10 pixels, so let's move them back 1, 2, 3, 4, 5. I think five pixels, or maybe four pixels will be more than enough to make them show in your visual alignment. This is basically called visual alignment, although they are mathematically aligned, but visually to our eyes, they don't look very aligned. Also, I think I used a bit regular font over here, so let's shift it to regular. If you want to use bold, it's your choice. I think this is a great exercise. I have shared a lot of my very special designing tips or secret tips with you, like how I design, how to hide grades. Sometimes you need to see your design from far away. Zoom out and see how it is looking. You can that this text is looking too much apart. Maybe I need to change its line-height back to 60. It is better now. Maybe I can move it down. Right now, you can see there is a lot of distance between this orange button and this text. I can move it down over here or maybe I can move the button a bit up. This is all your choices. Like that. I think now it is looking better. This looks like a block, this one is continuous. This is separated. This is how we create designs that are closer to dribble level. Keep practicing, don't lose your focus. I think this one has a bit of blurred because I used this other technique. I think next time if you want to move it over here, you can see it is clearer over here. Don't use this drag the whole layers, but copy and paste over here. Let me show you. I think it's better if I show you like that. Hide this, Control A, Control Shift C or Copy Merge basically. This is our design right now, and let's paste it over here. Hold F5, convert it to smart object. Lets hide the first one, which is blurry. Let's move it around over here. Your design should be perfect, so you need to move it like that. That's shift it with the container. Also, you see I'm aligning it with this area almost in the middle. Let's see where our hand is right now. Let's move it a bit at the bottom like this. Now, I think it is perfectly balanced. If you want to add anything to it or try to create something similar to it, you can see now it is not blurred from areas over here. This is how you create a very cool design, a design closer to dribble level design. Now for this four selection, this is the main topic over here. Now you can see I have selected this beta font, which is a bit, you can see curvy and have very slabs. It shows solid form. We have a very solid form and very innovative like we have a very good curves, curvy surfaces. It looks very modern, solid and very adjustable and maybe flexible company. That's why I have used this one, I tried to use Aleo, I think before A-L-E-O I guess, yes. I also tried to use Aleo over here. If you want to shift, you can see how the whole message just shifted up. You can see now it doesn't look very solid or bold company. If you try to use regular, you can see over here the effect. If I jump back to the font I selected, the beta you can see have more weight and more value. This is how I selected beta rather than Aleo for this exercise. Also you can see this Aleo font it has very rounded surface, is well rounded corners, and it is very legible. I tried this font and I think it is looking perfect. Let's move this recent a bit over here like this. I see the space a bit off in between these two elements. Let's save it exercise ultimate 1. I think you have enjoyed this lesson. I'm going to create a lot of such exercises. Stay tuned and keep watching the updates. I will send you the updates, so watch for them. Let's move on to the next lesson. 40. Hero Header Design -2nd Theme: Now, in this lesson we are going to design something similar to this one. It is very elegant and very powerful looking business website or business to business website with a lot of solutions provided to other companies. So from the last lesson, we are going to convert our last exercise into this one. First, let me show you what are the fonts and colors I'm using. You can see that the dominant color is red over here, and the background is a bit of textured, this architecture. Now you can see the whole theme has been changed by just changing the background and few colors and few fonts. So this is how we are going to create and use our design thinking or typography combinations and to convert one design into another totally different theme. Calculations, height and width, everything is the same, just I have changed through fonts, which is basically topography and few images over here which reflects this organization. So this is how you convert one theme to another. Let me show you some of the fonts and resources I'm using in this lesson. Now the font I am using for the logo is this ARCHIVE TYPEFACE. I really love it. It is very bold, very thick, and very techno-side or maybe you can say technology-based, very rounded and straight. Then we have this Clear Sans. It is modern Sans Serif, I guess, and it has some curves in it. I'm using Clear Sans for smaller text. Then this is a premium font I'm using, which is Amsi Pro. I bought it, I think a year ago at that time it was launched and I think I got it for maybe 26 or $30. Right now it's for $300. So I'm going to give you one other alternative for this one if you don't have this one. Here is an alternative for this Amsi Pro. If you don't have this Amsi Pro, you can use this Google font which is Muli. You can use light version or extra light version of it for the text. So I'm going to show you the document we're going to design. So here is our Amsi Pro, and here is Muli. So I am showing you both examples. You will not notice much of the difference. So what I did is actually I selected this font, some of the text over here and I used Photoshop's newest thing which is this match font. When I match this font, I found Muli over here. So it was very close. I think it will take some time to match fonts. So give it some time and if you have a similar font or mine, you can go ahead. You can see here are few fonts it has matched. Also, I went to Google fonts to see by my eyes which font is going to help, and it was this Muli. So you can use Muli over here. It is very elegant, very unique. So you can use Muli instead of Amsi Pro. So in this example I'm going to use Amsi pro. It has some curves and very nice rounded curves around it, around the text. So I really love this. So for this area, we are using Clear Sans, this is also Clear Sans, this is also Clear Sans. For this logo, we are using archive and few colors over here, I have already assembled them. So let's get started and see what we can come up with in this design session. 41. Hero Header Design - 2nd Theme Part 1: Now, in this lesson, we're going to create something similar to this. We are going to start off from our previous design. This is totally different theme, it is very business-like elegant, or business premium theme. This is a bit energetic and creative theme, so there are few differences like the text, the colors, and the fonts. The curves of the fonts, I have selected very different fonts. In this situation over here you can see they're very straight, you can see sometime bold, and a bit serious, like technology-based fonts very serious. Let's get started, and change this theme into this one. First of all, we're going to change the background, we have this image background. I got this background from somewhere I don't remember. Here is my background. It was from a free websites. I'm going to drag it and drop it into my Photoshop over here like this. It is almost perfectly fit and I'm going to just move it around like that. Shift and Alt, to make it in the center like this. You can get some pointy things all here if you want to. The second thing we are going to do is we're going to add some opacity to this container. I'm using 90 percent of this container. Let's zoom in and make some other changes like changing this fonts over here. First we're going to change this logo and change the font of this logo which was Archive. Archive Regular is the font and the size is 36. I'm going to change it to Userable. This is going to be in the red, so I'm going to change it to this red color which is dull red ae5240 color. You can get it a bit sharper, like that. May be increase the saturation a bit up. I am using this color, then remove this orange line from here. Then the second thing is that we are going to change the fonts of all these texts over here, this text links or navigation. I'm going to select character and I am going to change all the links at once. The font we're going to use is Clear Sans Regular. It is going to be 18 pixels, don't forget about this line height, and then we are going to change few text over here, few buttons, and few other things over here, also this image. The final adjustment of fine-tuning will be done in the next step or next lesson, so don't worry about it right now. The distance and everything we are going to adjust them in the next lesson. The text we're going to paste over here is going to be the text I have already written for that exercise. I'm going to copy that, we provide powerful solutions, copy and I'm going to paste it over here. Control+V or Command+V, double-click to highlight and I'm going to change it to Amsi Pro Light, and the font size was 36, and the line height is 48. Like that. Now we're going to go to this button, remove the gradient, so we have this. Then go to these properties, and we're going to use four pixels for the roundness. Good to go, looking good. Learn more, the font is Aler, so I'm going to change it to Clear Sans, which is our font for body text. Then for this area, we are also going to change the font to Clear Sans Regular, and we are going to change the text also. Let's go to the text or content over here, and we are going to copy this, and we are going to paste it over here in the Photoshop. Paste it like that. Then we are going to underline this because it is a link, this is another step. It is going to be a link, I'm going to use dull blue, grayish color. We are using basically dull colors over here, this is 376899. Also we are going to underline it. I'm using this textile to underline it. You can also use underlining by putting a line under it and I think it is more effective right now you can see it's a bit blurry line by Photoshop. The better way is that you use a line tool over here and draw a line manually like this. Right now its size is 10 pixels, so I'm going to change its height to one pixel. Lets remove the underline from this text, you can see over here. Now change the color to this, and you can see it is looking more live and more accurate. I'm going to select this, move it around a bit like that, you can see it is looking more sharp, and also you can change the color of this one. This text to this, also for this I think something messed up. Now we are done with most of the changes. We are going to change the image over here if you want to change the image, or you can put anything over here like maybe right now I am going to copy this area over here and I'm going to copy it, copy merged, and I'm going to paste it over here. Just to get you a demonstration, it is another app I designed. I'm not really proud of it, but it was a very strange line of work. This is how we have changed the image over here. Actually this image really matters. Whatever you are designing, the theme you are designing, this image should have some colors or color scheme similar to this theme. If I am designing in blues and reds, you can see this is our blues and reds. This is really matching with this. This is the main reason we are using everything over here. You can see this is the exercise we are designing, I think I should close this one. To avoid mistakes, I've closed that one. We are working on this area. In the next lesson, we're going to fine-tune and change all the spacing around, and I will show you how I'm going to use this grid to space these three areas. These three are very important. Also we are going to use some spacing around this and this area. So let's move on to the next lesson. 42. Hero Header Design - 2nd Theme Part 2: Now, in this lesson we are going to fine tune this design. Adjust some spacing and whitespace issues which is, you can say, a very important part of your design. Basically, your design is going to improve and get more attention or more shape and form with this whitespace issues. What I'm going to do is first of all, this area or this text, our main headline, we are going to shift it to this top flow line. These are basically called flow lines. These lines. These are basically modules or spatial areas. You can see over here, these are few modules. This is one. Now, what I'm going to do is I align it at the top along this line. Now, for this one, this button, I'm going to align it in the middle of this module. This area over here, I'm going to get the middle of it. This is really helpful. Why? Because you can see that this is taking this whole space and this is taking this whole space. Now, again, I'm going to repeat this area, this same patron, and what I'm going to do is I'm going to align this along with this, again, flow line. This is how I aligned my texts perfectly for better spacing. Here, we have space like that. If we can try to improve it, maybe we can improve it with some more line-height, maybe 52, something like this. Or maybe we can increase this to 38, something like this. Let's hide the flow lines and our guides and see how it is looking. Maybe this should be 36. Thirty eight was looking good. Let's move it to 54, let's enable the lines and they are looking good. The distances between these two are looking great. Even if you want to use 48, still it will look great. All the distance will be harmonious. This is how I treated this area. Now for this area, you can see over here, we need to have same space around over here. Let's enable our guides and remove this guide over here. Also, I'm going to move this guide at the top like this, and one guide, I'm going to place over here. Now, we are going to select this container, Control and click or Command click on this, and we are going to use Griddify to get some spacing of 42 around it at the top, like this, and also from here like this. I think 42 is looking too much, maybe. Let's just try it. Now, what we are going to do is we are going to align our navigation with these lines over here, like that. So 42 is the space I'm using at the top and at the bottom, like this, looking good. Also, I'm going to do the same for this userable. I'm going to align it at the cross of this. Now, you can see how it is looking really cool, you can see the space around this area. It is very manageable, very nice. This is the benefit of living margins around your design. Now, everything seems good. There is a bit of small problem which is, you can see, this hand is a bit of transparent in the background and also in this architecture background behind. Now, what is happening here is that this phone is clipped inside this container and the container is basically opacity of 90 percent. It is a bit of transparent, 10 percent transparency. It is taking the properties of this container. What we are going to do is we are going to unclick this like that, and we are going to use a mask. Command click on this container, then go to the phone, and click this. So we are done, we have completed this design. If you have any questions, ask me. If you want further exercises or something you have in mind, you can message me. If something looks good, I will really try to update this course. I'm going to add one more exercise to this course and then I'm going to stop because I have almost conveyed a lot of design tips and techniques related to spacing and grid usage. If you have any further questions, ask me. Let me know. If you are facing any problems, you can go ahead and ask me any time. If needed, you can set up a video conference call with me. One of the students already did that. So let's move on to the next lesson. 43. Social Media Ad Design Exericse → Preperations: In this exercise, we are going to design something similar to this. You can call it a social media ad or a discount ad or a print ad. You can design it even in Illustrator or Photoshop or whatever tool you like, but the basis of this design will stay the same. What I'm going to do is I am using a one pattern at the background. Then I have this overlay background on top of this pattern. It is a bit transparent. Then we have text in three different fonts and few colors like this, pale orange and this yellow color. First of all, I am going to show you all the resources I have used in this lecture. Let's view the resources and where you can get all these fonts because I have mixed three fonts over here. One is a bit you can say very wide and very tall like this one. It's Aileron, and therefore a bit, you can say script-ish font, and then we have this rounded, very bold font Signika. Let me show you all these resources. First, we are going to see what other fonts I'm using. This one is Google fonts Signika Negative. This is the top one I'm using. You can see over here, it is very curvy and very playful nature. Then we have this Antre font, which is from some guy, Taner Ardali, Istanbul, Turkey and it really connects with the next letter very nicely. You can see over here. This is another one. Then the third font we are using is by TipoType Aileron, and it's a free font, you can download from here, type 'zero' over here and Add to Cart and you can download all its greatness. These are three fonts. Then moving to the other elements. I have used this sweetly splash type thing over here, this floral art or whatever you can call it. Then there's this background over here, this pattern. I downloaded them for free and I'm going to show you one site where you can download all these things for free. It is basically this site. Creative Market always shows you six free downloads every week and gives you these free, awesome great looking backgrounds, icons, sometime brushes, fonts. This is this week's bundle. I downloaded these few weeks back like this one, this Ditsy Floral Digital Pattern by, I don't know, by JSquarePresents, and then I downloaded this one. I got them for free so I don't recommend that you purchase them, but you can subscribe or create an account on this site and you can get free downloads every week. Maybe you can find such things on online on Google by searching. Maybe you can find them free, but I use these two elements. Ditsy Floral Digital Pattern and Hand Drawn Flower design elements. Let's get started. Let's move on to the next lesson where we're going to start this lesson and design. Let's move on to the next lesson. 44. Social Media Ad Design Part 1: In the last lesson, we looked at the resources of this design exercise. Let's get started. I'm going to open up a new file and the size will be 1,400 width and 900 pixels height. Press ''OK'' and this is our art board. To convert this layer to background, just name it background and we are going to go to layer, new, and background from layer. We can align things with this because it is locked. Now, we are going to create inner box on this because we had this one and this yellow layer and then we have the text inside. We have actually one and two rectangles on this background. We are going to create an another rectangle. Click on the rectangle tool as you press ''U'' on your keyboard and press once like this and the size should be 1,200 by 725. You can adjust on your on side if you want to, but I have calculated all these sizes before so we can set up quickly. Align them in the middle and now we need the third one. Third rectangle will be inside this rectangle which will be our main yellow stroke path. It will be actually 900 by 500 pixels. This one has been created but you cannot see the layers because it is some other color right now. We are going to align it in the middle of this rectangle. Let's name them accordingly. This is our transparent back. It will be a bit of transparent, then this one is our main yellow border. This is how we are going to design this area, actually what we had is we had this rectangle as our yellow, it had a yellow stroke. Let's set the yellow stroke go to layer, layer effects, and we are going to go to stroke, and the color is F-F-E-E-9-9, press ''OK''. The stroke size is six. I'm setting it on the outside and that is all you can click "OK" then you can go to fill, press zero, and here we have our yellow rectangle. Now, for the pattern at the background we can create, what's that, a new layer over here, fill it with anything you want. Control + Alt delete to fill it, like this. I filled it with this color. Now what we're going to do is we're going to create a pattern from this file. I'm going to drop it in Photoshop like that, just ignore the colors and we are going to create a pattern. Control A, select all this, and go to edit, define pattern and this is our pattern, let's close it, and on this layer 1, which was our background layer, just a layer. We're going to use this layer for our pattern, so pattern layer. Let's color it something else so it doesn't feel very weird. Maybe this one, so it feels different from the other one. Don't worry about the color because our pattern is going to overlay on this design. Go to the end and you will see this pattern. Let's scale it back to 100 percent. Opacity should be full and it is looking very big. Maybe we can snap to a region. We can reduce its size to 50 percent or 25 percent, 25 percent is looking great. Press "OK" and we have our pattern. Let's change the color of this one to this earth tone. This is a bit of earth's tone, you can see over here. Maybe this color or this one. It is a mixture of red and grease. To make up this earth tone, you can use this one. I think this one is more closer. Now, we are going to make it a bit transparent by changing this opacity to 90 percent. You can see our background is already completed. Let's create a pattern over here. Pattern size will be 500 by 110 pixels, it is also going to be a rectangle over here like that. Let's move it above this window, and we're going to color it with some orange color, maybe this one, a sharper orange or this orange. Whatever colors you like, I think it doesn't look very well over here. Maybe we need a bit more sharper color. Something over here like that. Let's zoom out and see how it is looking right now. I think this orange color is looking something a bit odd. This one looks better. I'm going to use a bit sharper color over here. Also this color looks a bit strange to me. I don't know why but it has something missing. Now, it looks great. Don't worry about the final details, we can fine tune it in the end. We can change colors for an hour so I don't want you to waste your time over here. 45. Social Media Ad Design Part 2: First of all, we are going to create our heading, which will be in Signika negative. Select the font. You have already installed the font, search over here Signika. There are two font, Signika regular and Signika negative. I'm going to use Signika negative bold, and size will be 170 points. This is not hard and fast rule, don't worry where I came up with this size, actually. I just experimented and I found out that this is the best size that matches the next line, let me show you 35 percent OFF. Now, in this exercise, I am not going to contract this size. I'm not going to move it a bit smaller. Let's move it in the middle. Let's create another layer and we are going to use the font Andre regular. We are going to use the line summer surprise and the size should be 83 points. Now, you can see it is almost the same size as the top. You can see the edges are a bit off, it is happening because of this tracking, I guess. We are going to set it to zero. Now, they are actually met the next letter. This is good, so far, so good, we are going to create another layer. This is going to be the text HURRY. What was the text? HURRY Expires July 31st. We are going to write over here, HURRY. The third font we used was Aileron Regular and we are going to reduce its size to 50 points. You can see over here it is almost the fit size over here, it is actually equal to the size above summer surprise. Now, the next line which was summer coupan code, some says coupon code. I say coupan code, so don't worry about it. Summer16. It will be wide and we should move it above this button. I am going to use a lighter version of this font right now. This must be all caps, so we are going to use this one. Let's move it around in this, I'm going to align it in the middle. You can use these. I have created custom shortcut keys which I explained in my other course, where I created a lot of custom keyboard shortcuts for Photoshop. There's one more thing, we need to make it superscript. Do we call it superscript? Yes, superscript. Now, just to make sure that it is going to align with all the top ones, we are going to increase its tracking, it's almost equal to the top. Summer surprise. Why we have to summer surprises over here? Let's line them up and use this vertical spacing. Still it is a bit off, so we are going to move everything in the middle like that. It's up to you, you can leave this message closer to this one, or you can separate them with the same space. It's up to you whatever you want. You can also create something like this, like I have two main promotion message at the top and then the action at the bottom. So I have separated both of these into two different areas. Also if you want to round this rectangle, you can go to this properties panel and get some roundness. Maybe it is closer to this team. It is actually summer surprise, or you can say summer sale. I'm going to add one more thing. I'm going to add some drop shadow to this pattern. It is going to be closer to this pattern. Like this, you can see over here, a bit of shadow coming out and you can increase opacity of this shadow. Maybe this is good enough. We have almost finished this exercise. If you want something change into this, sorry, I have the wrong spelling of the summer. Now, it's summer surprise and maybe we need to shift the size to 81 points, adjust according to your needs. One more little detail. I left the swoosh thing. This is the one I used. It is the clip art. I showed you the resources before so I'm going to just drag it in Photoshop like that. We are going to reduce its size. Rotate it like that. I am pressing shift so it is rotating with the angles I have specified in Photoshop. If you don't know this, then you should go to this preferences and you should set the sizes over here. We have over here, I don't remember right now but I think it's in this settings. You can find them over here. My Photoshop is slowing down. It is looking very big, so I'm going to squeeze it a bit more. This is looking almost perfect. We are going to give it color overlay because we don't want a black swoosh around here. Color overlay, maybe you can use this one. It's up to you. You can use white or gray or whatever you like. Make sure that color opacity is 100 percent. This is one Control J, and I'm going to move it over here. I am going to Control T or Command T on your Mac. So replace, whenever I say control, you replace it with command flip horizontal and press Okay, and make it a bit more closer to this one. Now one thing, make sure that this space from this line, this border to this, this space is equal to space around here. This is one thing you need to make sure. Now, you can see we have almost completed our exercise. Maybe we need a bit of bigger button because it is looking a bit smaller to me. Also, if you want, you can make them closer or maybe more spacier, it's up to you like this. So maybe make it more spacier. Also, I think the button is looking a bit smaller to me so I'm going to increase its size. I think it's too much. Maybe height is going to be 120 pixels, it is good. Now, maybe I need to move it. These are just the final details. You can use them whenever you like, or try them out and just lock this. I'm going to select this one, move it a bit up, or maybe closer to this. So it makes sense. I'm also going to move these two a bit more up like that. So let's create a group of all these top elements. Move them up a bit. I think here we have the perfect balance. Now, if you want to add something more to this design, you are free to go. This is just an exercise to create something similar to, you might have seen a lot of social media ads like these, so you know how to create them. Now you can see, I see that there is less space over here than this over here. So you can see here it is balanced. We have more space over here. I added this intentionally, so we are going to add it over here. So make it a bit more bigger like this. So you can see is a bit of more balanced space. We need maybe more increment in size like that. So this is how we use our own judgment and gut skills to align things and design things. So maybe we need more sharper orangish color like this. This is better, I guess. This one is better. Also, we need more earth tones, so maybe we need to move around a bit. Maybe over here, this one looks good. So this comes with practice. Color sense is not easy to develop. Also, this typography matching skills are not easier to develop. You can see all these fonts are looking well together. This one is a bit serious, or you can say a bit legible, more legible because I wanted the user to read this exactly what it is. This is very big, so I can get creative with these areas. So summer surprise as it is used in a very big font. So it is good to go with the script font, so easier to read. Make sure you don't have too much tracking in the letter. So it should always fill a script rather than some broken script font. So now, we have this inner content area. So let's make them all together. Also this one, move this one over here. So let's group them together. Again, I'm pressing Shift. So this is our main design content. I always do this because we need to move this around and align it. So I don't know what is happening, why it is not aligning with our background. So let's move it up. So we have one locked layer inside this one. So just unlock this and we are going to move it around. Now, it's almost perfect, so it is very closer to this design. I think I had more peachy color over here. What is the color, what is this color? B10. So it is more in the orangish shade and it is in grayish orange mix. So you can see over here, here we have color slider. So here we have a bit of more darker color. I think it is not always perfect, say that copy everything from the same design. So I try to create something different every time. So this looks a bit more. Maybe I need a bit more lighter color like this one. So we have created this exercise. We are going to create a new alternation or new variation for this one, which was, I guess this one. So we will do it in the next lesson. We will be using this Sian, very Sian sharp color. So we will do it in the next lesson. So stay tuned for such exercises and keep on collecting different fonts, try to combine them and create some designs using this background pattern technique. So just add some context in your design. So this looks like a pattern of clothes or your shirt or women's shirt, something like that. So let's move on to the next lesson. One more thing, don't forget to download the exercise files, PSD files, original files I'm going to include. So also, I will include all the links to all these design resources like all these fonts I've used. So let's move on to the next variation in next lesson. 46. Social Media Ad Design Final Touches: Hello guys. This is the same design we did in the last lesson. I just did some of the fine adjustments. I guess that I should share them with you. First thing is that I moved all these elements in the center. I reduce the size of this text from 50 points to 45, just a bit bigger than this button. If you want to align it with the button, I think it's okay, but it feels better to me like there. Also follow this background, it was something closer to this area. Grayish and orange. I moved it in a bit more top portion where it is more peachy color. Something closer to this, or maybe this one. Then the third thing I did is I edit some effect, you can see here it is orange and here it is a reddish peachy color. They are like peachy color scheme altogether. Reddish and orange colors, if you ever seen a peachy, all these colors are from the peachy, I guess yellow, this color and this button color. What I did is I added an inner shadow with this color, e55f50. What I did is I just moved the slider a bit down and this is all I did. I use the settings distance 81 because I need a very good area covered over here. You can also do it with gradient overlay. There are many things you can do to apply the same style. The size is 128. This is what I did. Also, I changed the size of this one, I think a bit 81 points. I moved it from 83 to 81 points. That is all I think I did. I think it is looking perfect. I showed you this because I believe that design is progressive thing. You try and try to improve it again and again. If you are designing something and it is not looking very good, get up from your seat and maybe come back later after 30 minutes and start your design again. I added few things over here. I'm going to share this PSD with you, don't forget to download this PSD. This is all about this design, in the next lesson we are going to design the alternative version of this one. Just we are going to change some colors. That's all, all the design will remain same. Let's move on to the next lesson. 47. Juicy Design Exercise - Preperations: In this series of lessons, we are going to create this awesome looking fresh and juicy, healthy meal recipe header. I will do a lot of variations, so let me show you the variations. You can see this is the one I showed you. Then we have this with the Oval Button and different font over here. Then we have the third one which is with another font like this shared by Venessa Malik or something like this. These are basically four different fonts combined together and I still am not sure about the fourth one, but I am very much- like this combination, these three combination. One is very fat and you can say squeezy type, rounded corner and playful and funny, fun-looking font, this one. This is looking good for this theme, which is fresh and juicy. So remember the exercise I told you about, I have a previous exercises where we had this themed font selection. This font selection is based on this theme. Then we have healthy meals, so it is just to be more open and authoritative that these are really healthy meals. Then we have this script font used over here for Browse Recepie. Maybe it is for intimacy or maybe closeness to your customer or something like this. So it is basically looking really nice with these three combinations. I am going to show you in this lesson that, where the resources I got for this exercise? All these are free fonts, I'm going to show you these three. Okay, one font is this Blenda Script. I have used this font, this is a free font and you can see over here, license; Free for personal and commercial use. You can download this font and install it. Then we have this Damion font, so also download and install this one. I am going to share the links for these resources, so download them. This one is Gilroy, It is a premium font, but they have two free fonts along with it. If you browse down, you can see this one is zero, Gilroy Light and there was one more, Gilroy Extra Bold, this is also zero. So download both these fonts or you can go to Font Squirrel and download these Gilroy. It also has these same two fonts. Then we have this image. I got it from picjumbo.com and this is the link, fresh oranges on small farmers market. I think one more font was this Dozen Free Font and I downloaded it from this freedesignresources.net. So you can see over here personal and commercial, it is free and designed by Kenny LKC. So download all these resources before starting this exercise. Let's get ahead and dig into designing this awesome looking exercise. 48. Juicy Typography Design Exercise Part 1: Now let's get started and create this awesome looking, fresh & juicy exercise. We are going to start with a new file. Size will be 1920 by 1080, and background content, don't color manage this document, click "OK". First of all, we're going to drag our image over here, so let's drag the image. We are going to drag the image to the Photoshop and let's drop it. It will be converted into a smart object and we are going to scale it like that. Don't scale it too much, it's already on the borders. We are going to press Enter, and this is our artboard or main background which is ready now. Select this layer and we are going to convert it to background layer. This is a bug with this Photoshop here, so it has vanished my background. This is basically the artboard. I deleted the artboard by selecting it, and my background is back. Now we're going to throw some fonts on it, and first of all, we are going to select this Dozen font, which was our main font. The size will be 96 points. I'm using almost this scale, so size will be this, fresh & juicy. Control A, Control Alt H, to centralize it. These are my custom shortcuts. If you don't know how to create them you should look at my other course, UI design in Photoshop. This one is created, now next we are going to create this rounded rectangle or maybe this rectangle. Create it like that. Just use your head width for the proportions, like this. We are going to color it white, and let's move this fresh & juicy upward. First we are going to change the corner radius. Go to this properties panel for this rectangle, and this corner will be 60, and unlock them. We are going to choose different settings for them, like that, 60, 60, 0, and 0. Now let me just color it something else so you know that it is over there. Now what we're going to do is we're going to first place this inside this rectangle, like that. It's looking a bit up, so use your visual center. There are two centers in a redesign. One is calculated by machine and one is calculated by your eyes. I'm right now moving it downwards. My eyes think that it is in the center. Now it is almost in the center. That's almost perfect. Now what we're going to do is we're going to Control click on this to select this layer selection, this font. Then we are going to select this rectangle, the rectangle below, and invert the selection, Control Shift I, and then click on this mask. You can see over here, it has created a mask. This one is this layer which our for selection is almost transparent. If you don't understand, I'm going to repeat this step again. The first step was we are going to select this layer. Control click on this to select this selection, then invert the selection, Control Shift I. We have selected everything else, this area inside this text. Inverse selection, then click on this layer, and click on this. Now you can hide this font and you can see this layer has been emptied out. One more thing I forgot, we are going to use some modular grid over here. We are going to divide all this background into seven divisions. Why seven? Because our design is basically centralized, everything is centralized, so we are basically using two modules at the top for the space and two at the bottom, and three inside this area. Three modules here toward the top, let's show you so you can understand it better. With Griddify I'm going to divide it like that in this direction with this. I'm going to Control Colon to show my grade. If you don't have Griddify you can use this view over here, and new guide layout. Let me show you another way. Let's clear these, clear Canvas guidelines, and we are going to create new guide layout. In this example, we don't need columns because everything is centralized. What we're going to do is we're going to need rows, seven rows without any gutter. Like that. Also if you want to remove the margins, it is better. Seven rows, you can create guide layout like that. Here we have this rectangle almost completed. Lets move it downward on these oranges like that. I think that it's better. Now we are going to select second font which is going to be our Gilroy. It is basically a geometric font. I'm going to use Gilroy right over here, and we are going to write HEALTHY MEALS in all caps. If you remember, we used all caps for headings, so we are going to use it, color it to white. We need to size it a bit down, maybe 60. Move it around over here in the middle, Control A. Let's make it in the middle, like that. One more thing, we are going to use some tracking to open it up, like that. I think 75 will be good, like this. It's looking a bit small to me, maybe I think we should use 72. Seventy two is good, 72 and 96, this are two font sizes we are using right now. I'm going to move it a bit down, like that. The next thing is we are going to create a button over here. For the button, we are going to use rounded rectangle, or maybe just the rectangle, regular rectangle, and we are going to create a button like this. Now, just forget about the color right now we are going to use stroke over here, stroke of four pixels. It should be white, and it should be 100 percent opaque. We are going to use it at the outside. Now, one thing we are going to use this fill to zero. I'm going to show you one more trick right now. Now we are going to add the third font for this one, which was Damion, I guess. Yes, it is was Damion. This one, Damion regular, and we are going to write over here browse recipe. I just added an S over here. Now, we are going to size it down to 36. No, I think 36 is too small. 48, 48 is too big, then we are going to find a middle ground, maybe 42. Don't worry about the scale. Right now, we are using our own imagination or whatever you can see. Now, we almost have our button over here. Now add some arrow at the downside. One more thing you can see, that our text is not visible. Now, it's a simple trick. As our background is filled, we have moved the fill to zero percent, or we are using some fill over here. You cannot notice is this fill right now, but it is there. We have darken the background a bit below this text and you can see it is looking awesome. This is the trick I used over here. You might not notice it, but you can see over here, five percent fill. Right now, I'm using 12 percent fill. You can set it up where you like it, so I like it over here. Now we are going to add some arrow over here. For that, we are going to use our awesome font. PS this extension. If you don't know how to install it, you should go and such for it, font awesome PS extension and install it. I have talked about all these extensions and secret extensions in my other course, which is UI design for Photoshop. So what we're going to do, is arrow, so maybe we need to write down. This one, is what we need. Let's size it a bit up. Maybe here, move it down, Control A move, it in the center. Also we need to pair this up. This is a button. So name it button. We are going to use color overlay for this arrow, we are going to use white color. I'm going to align everything in the same middle. Now you can see, we have already created a lot of goodness. Now, there are few more extra things I did or you can. You cannot see right now, let me show you. If you look at this healthy meals, there is a red shadow around it. Then in this juicy meals, you can see there is some shadow over here in these areas. So these little touch or details really impact or create a very great impact on the user. You might not feel it very instantly, but it is there. So for this meals, I'm going to use some drop shadow and the color is going to be this read bf 4,000. You can also sample the color from here, over here, or maybe over here, it is up to you. Like this. You can sample a color from the image like this. I sampled it from here right now. Now, this is how you can use 30 percent multiply, keep the distance same spread to minimum two and three pixels. Not too much, but it's up to your liking. If you want to increase it, you can increase it. So this is how we have used. If you want to add another shadow, let's add another shadow. Now what we're going to do, is we are going to add a dark shadow over here and we are going to spread it like that. Like this. What we are doing is actually, let me show you the effect. If I tried to hide this, you can see the effect going and coming back. Actually, we are making it more visible over here. So if I add some drop shadow or very widespread drop shadow around it, you are not going to feel that drop shadow is there, but it will make your texts appear more crisp and easy to read. You can see if I try to increase the multiplication of this effect, you can feel it like this. Also I am going to increase this a bit. It is looking really great. Four. Let's move it to the normal rather than multiply. Press Okay. Now it is looking great and I think we have almost completed it, we just need one more over here. So on this layer, this is our main fresh and juicy layer, fresh juicy layer and we are going to add one other shadow over here, drop shadow like that. It is not going to be this one, it is going to be this red one. Now, what we're going to do, is we're going to keep it very small like that. Distance would be one pixels or two pixels, something closer to this. Make it 35 pixels, and make it two and this one three. So this is how I use this effect. Maybe you can more lighten this effect, make it more light like that. 15, no, 15 is to light. 25 is good. If you want to try, you can try something like this. You can see how this effect is going out. So keep this size to minimum. Maybe two pixels is good. Also this distance, you can see how it is moving the whole area above and down. Also keep it too minimum, I think two pixels is more than enough, you cannot go beyond that because it will show more distorted areas over here at the bottom. So this is good. I think we have almost finished our exercise. In the next exercise, we are going to do some variations and also we are going to reattach it for the fine details. So let's move on to the next lesson. 49. Juicy Typography Design Exercise Part 2: In this lecture, we are going to do some final retouches which are really important to get the real shape of your design. We have almost completed everything, but it is looking off due to some problems. I'm going to create the grid, I don't know why it is not showing my grid. Where is my grid? Sorry. I just want my grid lines over here. Now, you can see the distance at the top, this is a problem with a lot of new designers, it is more than the distance at the bottom. This is what making our design a bit, you can say, "Not in harmony." We are going to use our head in this game. Now, this arrow, I'm going to move it down by 1, 2, 3, 4, okay, 24 pixels. We are going to make this button stay here wherever it is. We are going to move these top two layers at the top a bit up like that. Maybe like this. Now, the next thing you are going to do is keep on hiding and showing your grid lines guides and see whether that design is looking balanced or not. If you want to move it down or maybe you need to move it up, this is how it works. You are going to move it up and down. You can also do something like this. Just have half the letters on this and the rest of the letters like that. You can hide this shadow, just keep the red shadow. Also sometimes people color this, some other color half, and the other one is colored into some other color. Also you can see over here we are having some problem like we have some other element coming inside this. What we're going to do is we are going to duplicate our layer, this background layer, and we are going to adjust it. We are going to move it up. We have some problem over here because the original image is now lost. Let's make it a bit more bigger like that, more closer and more bigger. Move it up like this, and we have our fresh and juicy oranges back in the frame. Now, let's move this healthy meals a bit up over here, I think it's looking good. Maybe I think we can move this button and this arrow a bit up, maybe 1, 2, 3, 4, 5, 6, 60 pixels at the bottom. We should also measure this one too. So 1,2, 1,2,3,4, we have 24 and 60 pixels over here. Still, I think it is looking something missing. So I'm going to move it back a bit like that, and we are again going to move it more upwards, a bit more up. Yeah, I think it is looking better now. If you want to make it more slim because this button is taking more space. So we are going to make it a bit slim. Go to this height and make it 85 pixels, something like this. It is looking better. We need more focus and more energy over here in this area not on this button, so make it slim. Also, I'm going to see if this text is lined up with this button. Now, I think we have almost completed this exercise. Maybe we need to move this background a bit up like that. Make it more bigger like this. I think we have done this exercise, we have almost completed the final effect. Also, if you want to make it more bigger, you can make it more bigger like that. So it has more effect like this. Another thing you can do you can move this healthy meals at the top and you can move this arrow a bit up like that. Maybe we can move the button, maybe we have 1 and 1, 2 like that. If you try to increase the size of this block, it is going to increase in size proportionally, so don't worry about it. Now, I'm going to go back at my previous settings. I don't want it to look too big. I think we should move the size of this one a bit low. Now, it's looking more balanced. Healthy meals is a bit smaller, it is 60 pixels, this is 96, and this is, I think 42. Let's make it 40, 42 is looking a bit bigger for my taste. [inaudible] and I'm going to move a bit down. Just visually centering it. Now, this is our final exercise. These are really important, these final touches. Now for the button, I'm going to change the button, and we are going to use the other button over here, like we did before, and that was our Eclipse button, 190 by 190, and I'm going to place it over here. Now, we are going to use Blenda Script font on this, so I'm going to select blenda script. Now, I'm going to centralize it, over here like this, and also I'm going to make the size a bit smaller, 32 pixels, hiding the button at the bottom. Also I think it is looking very small, so make it a bit bigger. Let's lock at size and increase its height to 200 pixels like that. Also we are going to need this angle-down arrow, so I'm going to use this arrow over here, and we are going to move it up this eclipse. This is our arrow. You can use one arrow, you can duplicate it, it's up to you. Now coming to this browse script we have a lot of tracking over here, so let's keep them close because it's a script font. In the script fonts, always make sure that you don't use too much tracking, it is going to separate their effect like that. You can see they look good when they are very close like this. So always make sure it is set to 0 on script fonts. If you want to make it more bigger like 36, okay 36 looks better. Let me show you one more trick over here. If you go to this S, and you can see we have few more features available here. These are called ligatures or more features in open type font. If I switch to this alternate style, you can see how this swash has happened below my recipes S. Also you can give this same effect to this E, if you select this, you can see over here. This is how we can use alternative effects and alternative characters for the same typeface. This feature is not available in all typefaces or fonts, it is available in few of them. So always look for these options over here. If one is enabled, then you can use it. I'm going to revert back right now. Maybe this looks better for me, I don't like it in very small size, so if you have a very big size font you can use these alternative effects. In the small size, I don't recommend using these swashes of floral endings. So this is our next one. We can duplicate this arrow and move it downwards and reduce its opacity to 50 percent or maybe 30 percent, whatever you like and however you like. I think one arrow is more than enough over here, so use that like this. Now, why this color is looking great on this because I have sampled it from here. So you can sample the color from here. Maybe this basket over here. So this is how I created the second alternation for this design, and I think this is going to finish up my work over here. I don't recommend that we are going to add another font over here. If you really want another font, I have used this one. This is my student Saqib Ameen. So recipe by Saqib Ameen and font I'm using really. One geometric font and this one is also geometric, so two geometric fonts one script and one a bit roundy and fun font. You can add one geometric font over here if you want, and you are going to add it in the last module over here in this area. Keep me updated about this design. I'm going to share this PSD with you. So I'm going to save it to juicy part 2 and tell me if you can create something like this. This is also an exercise, try to create something like this. You can also change the title over here, like maybe juicy blender, or something like this. I hope you have enjoyed this lesson, and if you face any problems, or don't know the shortcut keys, you should contact me or take my other course which is UI design in Photoshop. Take care, and let's move on to next lesson. 50. Intro to Point (PT) sizing in IOS Devices: First of all you need to understand what are these points sizes because all the sizes for iPhone design are in points. So you need to understand two concepts here. One is points and one is this 1x, 2x, and 3x, so it's called basically pixel density. Now, the original iPhone when it came, it had small screen and the pixel density was 1x, so it means that if the iPhone specifications are 320 by 480, it means same should be in the pixels. If you see below, it is translated into pixels. So 1x means that it is the same, and what are points? Points are basically relative measuring units for Android. They have different DPs and SPs and for iPhone it's points. This is the screen size, 320 is the width, 480 is the height. Now, if you come to iPhone, which is iPhone 5, you can see 320 width is same and the 568 is the height. Now, if you see actual pixel sizes, its actual pixel size is double its points. So 320 multiply by 2 is equal to 640, 568 multiplied by 2 is equal to 1,136. Now one point is basically equal to two pixels. Here we had in the original iPhone, one point is equal to one pixel, now we have one point equal to two pixels. This goes on until we reach this iPhone 6 plus, which have 414 points. So 414 multiplied by 3, so it is 3x. Each point contains 3 pixels, so each point is equal to 3 pixels, so it is 1242 pixels actual, and it is down-sampled by iPhone 6 device to 87 percent to be at 1080 by 1920 high-definition size. Keep in mind all this relation that we have points, which are actually iPhones own relative measurement units. So everything will be in points, even your text size, which we will be discussing in the next lecture will be in points. If you are designing for like this size, 320 by 480 in Photoshop, you don't have to change any of your font size. You should use the same font size and it will be 320 by 480 because your pixels and points match. So if you try to design for iPhone 5, then your points will be different. Also in this, because our pixels, now pixels have different ratio in this screen. Here we have doubled the pixels, here we have tripled the pixels in the same screen. So before designing any iPhone app or anything, you should understand all this relation between points and pixels. Here's another very good screen size explanation by this Kyle guy. I found it online. Kyle Larson. You can see here is the actual screen size, 5.5 inch, then we have screen size in points, multiply by 3x, and the rendered pixels should be 1,242 by 2,208 pixels. Then it is down-sampled by physical pixels, which is device pixel, on device they are going to be displayed 1080 by 1920. This is how all this points and points is converted into actual pixels. This is the pixels we are going to design for 1,242 by 2,208. Here is a relative comparison in Photoshop, so I'm going to share this PSD file with you, so don't worry about it. These are four different artboards. If you don't know about artboards, you should see my other course on UI design for beginners. This is original iPhone, this is 320 pixels. So I'm just right now calculating the width. I'm not showing any height. So 320 pixels on original iPhone is 320 points. So this is the screen size. Then on iPhone 5, we have 2x, so it is almost a double. So 320 points, but the screen size on our Photoshop document is 640 pixels width. Then we have 375 points and 750 pixel width, it is a double. Then on iPhone 6 Plus, this is iPhone 6 Plus, so we have 1,242 pixels, which is down-sample to 1,080 pixels. Actual point size is 414 points. Let me show you an example in Photoshop on how we are going to scale all these things, all these screens. First we are going to open up the first screen, original iPhone. The standard is to design using this screen. So it is 1x. So always design in 1x rather than 2x or 3x. So I'm going to click over here. This is our art board. So I'm going to use Sensitive Compact Display, semi-bold, 32 points says my heading. This is my heading. Let's put some dummy text over here. Let's put the dummy text. I'm going to put 16 points over here and I'm going to use type, paste Lorem Ipsum. Let's adjust its line height to 24. Let's change the color so it doesn't look that different from our heading. Now we have set up this artboard, which is our original iPhone. Now, how we are going to design our second screen or third screen, so go to this image size. You can easily double it up 640 and make sure everything is selected like this. This is on lock. So these two are locked. They are going to increase with each other. Resolution will be 72 pixels, the same resample plus click "Okay". Now, this is our iPhone 5 screen, so it is 2x. I multiplied it to 2x. You can see here 640 x 960. Our actual height is different, but don't worry about it right now. Now, let's check the font sizes. I have double-clicked this font, it is 32 points. You can see Photoshop has automatically doubled my font size. Before it was 16 points for my text, now it is 32 points. Make sure this is how the scaling is happening. If I revert back to original size and I go to the third 3x, and so what I need over here is 3x means 320 by, it was something like 1,080 maybe. It was 1,242. So I'm going to use 1,242 and press "Okay". This is my iPhone 6 plus screen. Let's see how the sizes have been. So you can see my heading size has been increased to 124 points and my deck size is 62. I think it should be 64 actually. Now the problem is between this multiplication of these four sizes. What is happening here is that Photoshop is trying to multiply and adjust our font sizes. Make sure your font sizes are multiples of two. If they are multiplied by three or something like two or three, there should be a whole value. Now, 16 should be 3 multiplied by 3, 16 threes are 48. I guess it is the correct size. Then for the heading, it should be 32 multiplied by 3 is 96, so it should be 96. This is our heading and it should be 96 points. Something like this. No, I don't know why Photoshop has scaled it differently, but there is another way to scale this. I'm going to change everything back to my original size, which is this one. Now I have downloaded some actions which are related to scaling by B Django scale actions. You can see over here. If you don't know how to install the actions, you should watch my other course where I have discussed all the basics of Photoshop. Now, let's scale it to 300 percent. I'm selecting this and play it. This is how it has been scaled to 300 percent. Now you can see the sizes are perfect, so I'm preferring that you should use these actions. I will include the link to scale up or scale down. So let's scale it down like that. Now, this is all about points and pixels and how we are going to use different types sizes and how they shift from one size to another. This is how we are multiplying our size when we are designing in what resolution? Seventy two pixels per inch. There is another way which I will be discussing in the next few lessons that how to adjust different font sizes. We will be using 144 and 216 pixels resolution per inch over here. For this lesson, I just wanted you to get an understanding of how these pixels and points work with each other and how we are going to scale our 1x design, which was, this one was actual design which was on 320 x 480. We upscaled it in 200 percent and 300 percent and try to use these B Django actions. These are really great actions. This is all about scaling, and point type, and physical pixels and points, and rendering at 2x or 3x Retina or 3x Retina, whatever it is. Let's move on to the next lesson. 51. IOS Typography Specifications: In this lesson, we are going to look at human interface guidelines from Apple, and these are called iOS Human Interface Guidelines. We're going to look at typography section. You can read all about it here. If you want to download, you can go to Resources and download the fonts for the people who are using Mac, I think they might have already installed this San Francisco fonts, so there are two fonts basically. One is the San Francisco UI Text and San Francisco UI Display. Display is for headings and UI Text is for paragraphs and text with small size. Their specification is if you have 19 points are smaller than you should use San Francisco UI text and if we have 20 points or larger than we should use display font because they are made for bigger text sizes. Here are few more points about iOS Guidelines. Emphasize important information. We already know how to use font-weight, size, and color. Then if possible, use a single font because mixing too many fonts can be a bit sloppy, it can also slow down your app or something like this, so this is the suggestion. If you can possibly use this San Francisco font you should use it because it's System font. It will be loaded easily in your app. For Windows users you should download your San Francisco font from here. This is GIT repository. Also you can Google about it then download San Francisco font for Windows. You will surely find a lot of links just download it and install it on your PC. Here are a few specification if you are using San Francisco UI display, which is for headings, there is one line here which is font size at 2x, 144 P PI. Basically it is saying that at 2 x, at retina screens for iPhone 55 S, 6, not 6 plus. These are sizes for add 2x screens I think we discussed all this in the previous lesson. These are the font sizes in points. This is tracking. Tracking is basically how much letter spacing we have between in our text or paragraph. We will adjust this by using photo-shops tracking and these are a few font sizes for our headings. Now coming to this San Francisco UI text, there are a lot of different sizes in points. Again, we have a lot of tracking. You can see that when the size is very low, tracking is very high because very small text is not readable if the letters are very close together. Next, we are going to design something like this for original iPhone size 1 X, 2 X and 3 X. IPhone, old iPhone regional iPhone, iPhone 4, I guess, iPhone 5,6 and iPhone 6 Plus. Let's move on to the next lesson. 52. Designing Multiple resolution IOS Screens with Photoshop: Let' s create an art board with all these different sizes. We are going to create a new file with this art board. We are going to use our size is 320 by 480. Press "Okay". Now we are going to add another screen over here. This is iPhone four or old iPhones. Then we're going to click this plus icon and we're going to select iPhone five over here and click ones over here. This is going to be iPhone 5s screen. Then we are going to add another one over here. Let's create another one over here. I'm going to click at iPhone 6 and click over here once. Then I'm going to create another one over here, which is iPhone 6 Plus. The last one was selected. I am going to click this one and I'm going to press or highlight like this. Now zoom out and you can see these are all the screens. Let's line them up. This is a line to this one seclect this one. I'm control flicking these to align them up. Then, so all our art boards are ready, so let's get started. First I am going to start with our most small screen, which is 1x. I am going to use my San Francisco UI text. First I'm going to draw some margins around it. Now I'm going to use photoshops, default, GridLayout and let's remove the columns. We are going to use some margins at the top, 20, 20, 20 and 20. This is our frame. We are going to design in it. I have hidden all the other art boards so we can easily design in it. I'm going to select the text over here. I'm going to click and drag like this. This is our main heading. Our heading should be 32 pixels or 32 points. I'm going to set the 32 point size from here, here we have a different point size is 32 and 12 points tracking. Here I have, let's zoom in to a 100 percent. Now our document is ready, we have set the margins around it. We are going to use the text tool and draw some line over here to get our heading. We are going to use 32 points with the San Francisco UI display. We are going to use semi bold. I'm going to write over here this, my big and long, long heading, and it is just for fun. I'm going to shift the line height to 1.5. I think if tracking was 12th, I guess tracking was 12 points. Tracking is set to 12, and I am going to set this to 36 pixels as my line height, so this is my heading. Let's change the color to this blue color. Now we are going to add some more text over here. I'm going to select this Lorem Ipsum, Lorem Ipsum. We are going to use 14 points with 21 point line height, and it is minus 11 in San Francisco IS human interface guidelines. We are going to set it to maybe we need a bit of dull color, something like this. Now let's zoom in a bit more so we can see the spacing. one more text which is published on 6th May, 2016. I'm going to select this t and h, and I'm going to use this command to make it superscript or subscript. I don't know what this said. It superscript. Now we are going to change the color for this heading. This date. They've changed the color to a bit dull gray. Let's align it to this line, like this. Mode, now we are going to use 12 points over here for the date and I'm going to see what are the specifications for tracking for 12. We are going to use zeroover here, like this. Let's see how this one is. I think for 14 points, it's minus 11, so it should be minus 11. Everything is set up so let's copy these to our other art boards. Now we are going to use all these settings and all this text, and we're going to duplicate it to our other art boards, so let's zoom out. I'm going to drag my this art board over here, align them with these. Now I'm going to select all the text, delete this empty layer, also, this one into a group. You just name it text, and I'm going to use Alt and dragging it over to the next one. Let's hide other, all other art boards like that. Just zoom into this 100 percent. Now if you remember, we are right now in iPhone 5. iPhone 5, now what we're going to do is we are going to size these texts and we are going to "control T". We are going to change the width of this too. Let's make it percent and we are going to change it to 200 percent. This is how we are going to fit everything over here. Like this, and if you want to set the margins, you can set the margins overhead. Now if you check the sizes of all the force, you can see it is perfectly doubled. The 64 points and everything else is the same. If you want to, because we have more height, you can drag this over like this, and we can have more texts over here. This is how we are going to use other screens with this, so we have completed two screens. I am not using any margins, you can use the margins, you can use margins on each of these screens. Maybe double the margins or increase them by 10 pixels, whatever you like the best. Now let's move on to the next one, which is iPhone 6. Now we are going to again copy this and we are going to drag it over here on our iPhone 6 screen. You can see the size of our text should be the same. Just we have a bit of more screen size in pixels or physical screen size. We are going to just increase our sizes, paragraph sizes in the width and also in the height. Also we can go to the heading and we can drag it and make it equal to our paragraph. Now we have more space over here so we can shift it up. Now you can see how this is going to change on different screens because our screen sizes and screen dimensions, we have more space on some screens and some on some scheme we have less space. Let's keep everything same. Try to copy all the distances between different elements the same. If you want to apply vertical rhythm, you're going to apply it because if I try to apply vertically then no, I think this lecture will be 30 minutes long. I don't want it to be that lengthy. Here we have the last screen, which is iPhone 6 plus. Now I am going to again select this and I'm going to press "Alt" and drag it over here like this. Now, this is our iPhone 6 Plus. I'm going to rename this art board. Now here you can see these headings and everything is looking a bit smaller, so we are going to increase it to 150 percent. Why 150 percent? Because this one is 200 and this one is 300 percent. We are going to increase it to multiply to 150 percent, so change the width to 150. Wait a minute. First, make sure that you have "control T" and press this lock because we want everything to be increased in proportion. Let's make it 150 percent. This is how our text is going to fit on the screen, iPhone 6 Plus screen. Now, you can adjust everything accordingly, if you want to adjust the heading and spacing, you can adjust it like that. All our screens are ready right now you can see how I used all these techniques to copy everything. We did a simple calculation of multiplying our iPhone dimensions and pixels resolutions. We have come up with all this design. For one next hour. Everything was same for 2x. It was multiplied by two, we increase the size then this is also 2x, so no size difference. This is 3x. We multiply this 2x with 1.5 to get this 3x size. Also you can copy this text and drag it over here and multiply it with 300 percent shift it to 300 percent. It will give you the same effect. Now if you check the font size. This one should be 96. This one should be 64. This one should be 32. If we go to select this one, this is 32. His is how we use text sizes because an iOS app developer, he is going to need the distances and text sizes in points. You are going to give him something like this. Line height, this points and font size, font. You have used this one color, you have used this one. spacing between elements is this much. This is how you are going to design iOS devices and use typography in iOS devices. This is all about this iOS practice in this lesson, we have created four different screens iPhone 6 plus iPhone 5 and iPhone four. There is a challenge that I want you do design something similar to this one. Tried to design, create four art boards like this. Try to replicate your design on all of them. Show it to me. You can post it in the questions. Ask a question, show me your work and I will try to improve it. If you want to apply vertical rhythm, you're going to apply vertical rhythm, you can set baseline and everything. Even if you want to design just one screen, then you can select just one screen and design it properly. I just wanted to make sure that you understand that if you have to design iOS app in different sizes, how you are going to manage it. This is the most difficult thing in, while you are designing your iOS app or Android app or something similar to this. Let's move on to the next lesson. 53. Student Question about Resolutions: Today, one of my students asked me about iOS solution and it was a really good question. I never thought about it that this is going to be coming from one of my students. Let me show you the question. He asked that why you are designing at one x, which is 32 pixels on a iOS with the four specs at 2x. I'm basically using 32 points here and he's asking that why I'm using 32 points instead of 16 points on 1x. So to clear all this problem or concept, I think we designers should experiment first. We always learn with experimentation. What I'm going to do is I'm going to show you in Photoshop that how we are going to tackle this and how to understand all this mess. Let's get started. I'm going to open up a new Photoshop file. File and New. What we are going to do this time is we are going to select artboard from over here and we are going to select iPhone 6 or maybe iPhone 5, which are basically high resolution or 2x devices. Now, what I'm going to do instead of using 72 points solution, which is our standard, I'm going to use 144. Basically what I did is I shifted this 144 to 2x. Now my document is already retina. It's 2x, so I'm going to press "Okay." This is our artboard. Now, for this problem to be solved, I'm going to select my heading size to 32. You can see over here this is one of the scale of iOS devices. What is your game? Let's have something like this one and I'm going to align it in the middle. Let's just shift it to point size, convert to point size to align it better because it's a single line. Now you can see it is 32 points at 2x screens. If you go to image, image size, you can see, just ignore these inches. Our resolution is basically 144 pixels per inch. Now, what we are going to do is we're going to uncheck this resample and we are going to revert back to basically our 1x solution which is 72 pixels per inch. This is just to clear your mind that how we are going using our point size. Basically, our developers should be using this 32 point iOS font size. But while we are designing just for simplicity, we normally use 72 resolution pixel documents in all our different screens. Just press "Okay." If you now select your font, you can see it is shifted to 64 points. Why is that? Because we converted back from 2x to 1x resolution. Now we have less pixels per inch, so that is why our font size just expanded and because on the larger screens, this is going to be contracted. On a larger screen, this 64 will be 32 points. Why? Because we have more pixels to show per inch. So more pixels are pressed against each other in less space in retina screens. This is going to be, you can say compressed to 32 points. That is why on 72 pixels, the full size is enlarged. You can see over here that is how this has been enlarged. Sometimes when you design, like he asked that why I used 32 points on this screen because if I try to use, you can see 64 over here, let's use 64, this is my heading, just head is enough. I think we cannot fix it over here. If we try to use something like this and then we shift our image size to 144. Let's change the pixels values to where the pixel is. I'm going to resample it. Let's have the pixels. I think it was 750, around 750 or 760 something like this. Let's see the size of our iPhone 5 because I don't remember them. 640 by 1136. I'm going to change the width over here to 640. Let's have resample over here, 144 and pixels. It is already shifted to 640, so I just changed the resolution and you can see it is 640. If you want to change the height, you can change the height by using 1140 over here, like that. I think you should stick with it like this, 144. We are shifting up in our resolution so press "Okay." Now you can see this is already shifted to 64. It doesn't shift in size. This is very strange. Always try to use font size that is, you can say realistic, and I think 64 is too big over here. Maybe we need 32 points. This is, I think, a good heading size. Let's try 32 with our 1x screen like this. This is my heading size. I'm going to use 32 points. Let's just leave it like this right now. Don't worry about it. In the image size, I'm going to shift up to 144. Let's see what it is going to do. Again it is 32 points. Basically what it means is that at 1x, if you are using 32 points, it is going to be 32 points. If you shift your image size to 2x. In this example, as you can see, I shifted up to 144 resolution on which the iOS specs are and our font size shifted was the same. This is the real problem, the student which his name is Antonella, I don't know he is a he or she, but Antonella asked me that, why I'm using 32 points on a 1x screen? This is the answer. Let's repeat it again. I'm going to use 320, 480, 72 pixels. This is the 1x iPhone 4 screen. Press "Okay", and I'm going to use 32 points over here for my display size and hello Antonella. What was his name? Antonella. Let's use auto over here. Now you can see we are using these settings, 320, 480, 72 pixel resolution, and I'm using 32 points. Now we are going to shift up to 144 resolution and press "Okay", it is basically Retina screen at 2x. Press okay and if you select this size, you can see it is still 32 points because we shifted our resolution. This is how we are going to tell our developers that we are using 32 points for size. In my previous example, I was not shifting sizes like this, we were using only 72 pixel resolution. We were using like 32 over here. Let me show you this example. This is heading. If we try to create a new artboard over here, if we go to this artboard and try to create a new one over here with this size, this is basically iPhone 6 size, and I think it is a midsize. Let's just delete it, iPhone 5. Let's create this iPhone 5 over here and press this plus and click this one over here. This is iPhone 5 and it is a readiness screen. If we try to drag it over here, you can see it is basically 32 points. What we are going to do is we are going to multiply it with 2 and it is going to be 64. This is basically the actual size. If we move it back over here in this artboard, it should be 32 points. Here is the rule that if you are designing with the 72 pixels per inch, you need to multiply your font size in larger screens like retina and 3x screen, which is iPhone 6 plus. On 1x, you will be using this point size. Whatever you use on your 1x screen, while designing with this 72 pixel resolution, this will be your actual size, you are going to tell your developers that we are using 32 points, display size, heading size, and for the ease of work we were designing at 72 pixels per inch, so we don't need to shift pixels everywhere or resolution. They are all in the same resolution. This font size was actually on, this one was for 144 so we multiply it with two because we are designing at 72, which is half of this revolution. Our specs were at 144, but we are at the half, so we've multiplied it with two to get it equally to our specs. I think this have got your mind clear about this resolution and this screens mess. I think that's it. If someone else have some problem like this, I'm willing to create a new lecture or video for that. Don't try to rate my course bad like two or three stars. First, ask questions. I have seen a lot of students who ask questions, they have a lot of great improvements in their designs, and the students who do not ask questions and sometimes read bad, and then I messaged them that what was the reason and surprisingly, they say, "We had this problem." I say, "Why didn't you ask me first this problem before rating my course badly and giving me a heart attack?" Before rating my course badly or getting frustrated, you should first ask me questions. I always try to answer as soon as possible, and if needed, I will create a new video for you. So take care and let's move on to the next lesson. 54. Mirroring your Photsshop to Iphone: In this lesson, I'm going to show you how to connect your Photoshop with your iOS device to view this art board on your iPhone. First you are going to go to this edit and remote connections. What we are leading is this server service name. It is depart by written like this like Photoshop server and make some password over here. It must be six characters long. Don't make it very complex, just a simple one. Then you are going to need this IP address. Copy this or keep this in your mind that you are going to need this password and this IP address and the service name. Let's get started. Now I'm going to switch to my iPhone screen. The app I'm using right now is this one. This is iTunes Store, Apple Store, Ps play for Photoshop. I'm going to show you this app, and also I'm going to show you this Photoshop device proved preview app. These are two apps you can use to connect your iOS device with your Photoshop and view your designs. Let's switch to the iPhone screen. This is my iPhone screen, and as you can see in the third row, I have this app Ps play. You can click on it and you can see it has already been connected. So I am going to go back and show you how you are going to connect it with your iPhone. It is showing discovered connections and some saved connections. So most probably you are going to go with this discovered, it is going to connect with it. It will require the IP address or password, but you need to copy and paste it over here. I'm going to add new. For some reason on my computer, it is not showing me. It is not letting me connect to this iPhone server with new connections, maybe it is my firewall. So if you have such problems 79.1, and here you are going to enter your password, mine was microsoft. When you have entered all this information, press Okay and it will be connected to your screen. Right now I already have a connection, so I'm going to use this one. You can see it is updating and showing me the screen. If you tap once you can see all these functions have gone. You can take a screenshot, expand it and also there have some this option of 101, one by one ratio, I think screen ratio. Also you can refresh it if you want to. I don't use this app to take screenshots or do other things. I just use it to, you can say view my design over here and to see how much spaces I need, or maybe I need to move some element over here or over there. This is how I use this app. Let me show you another app, which is going to be our Photoshop, Adobe Photoshop app, which is this last about preview. You need to be signed in to Photoshop server, which is basically Photoshop CC. You can see it is already connected. It is showing me the art board one. So it is showing the art board name two. This is how this app is connected. Normally you just need to sign in your Adobe account, your Adobe CC account, and it will be connected to your Photoshop server. I don't remember how I connected it and it is not showing me any options. You can see over here. It is just giving me this iPhone art board five and document Canvas, this one. These are two methods you are going to connect your iPhone with your Photoshop. Make sure your Wi-Fi is running because it uses Wi-Fi connection to connect to this server. So this sums up this lecture on how you can connect your devices with your iPhones or Android devices. Somehow on my Android phones due to my firewall settings, I think it is not letting me connect to the Photoshop server. So only I was left with this option to show you on the iOS devices. So I think it will do the trick. So if you have some problem or run into any problems, just let me know and make sure you don't have any firewall. This is how you use different apps to connect to your iPhone and show those screens. This ends up this lectures, and let's move on to the next lecture. 55. Android Typography and Scales: Now you are designing for Android system. So there are two things you need to understand. What is DPI and what is SP which is the four size scaling unit for Android systems, which is called the scale independent pixels or scalable pixels like this one you can see over here. Now, if you go to this material, Google.com typography styles, you can see they have laid out everything and not in a fashion like Apple does, but I think it's better than them because it is showing a lot of different choices for display 4,3,2,1. Here they have some scale types over here. You can see here is the typographic scale 12, 14 ,16 ,20 and 34. So you can use all of these, I think they have two or sometimes gaps of four. Here they have few examples like title headline display 2, 3, 4, subheading, body 2, body 1, caption button. They are using 12sp for this. They are also mentioning all the sizes over here, 112sp, 56, 45. This is a very nice scale. It has a lot of, you can say unlimited variations. Here are few screens they are showing you for example, how we are going to use all the sizes interpreted in our Photoshop while designing for Android. Now, there are two things. One is, what is DPI? DPI is basically the different screens sizes resolutions which are supported by Google. These are LDPI low, DPI, medium DPI, high, extra high, extra extra high, extra extra extra high DPI. Unlike Apple, they have a lot of resolutions, 1.5x, 2.0x, 3x, 4x, original size and 0.75x which is very okay. Now how these are calculated, if you can go to this little tool, you can see over here, it is very simple calculator to calculate different sizes and scales. Now if you switch to this MDPI and put one inch over here, it is basically one inch on the screen and it contains 160 pixels, which is equal to this MDPI which is also 160. So on medium DPI, your screen resolution and your pixel sizes they are matched. So we will be designing using this screen size MDPI. Don't worry about this 160 right now. Okay, now scale independent pixels are also 160 so our all units on this screen size will be equal to the actual values. Also you can see density independent pixel they are also 160. Everything else is 160, 160 and 160. Now, if you go to this HDPI, you can see now the screen size within this one inch is 240 pixels. So just try to understand this concept in one inch of a screen now we have packed 240 pixels. So all the other things have changed, but the scalable independent pixels is the same and density pixels independent pixels are the same because they are independent of the pixel values. So to avoid confusion, we are going to design for this MDPI and we can extract our resources and everything. We can tell our coders that this is the size I have used, we don't need to calculate anything. Now for four sizes, we are using this SP. So our coders or Android developers, they will be needing the four scale or four typographic scale in these sizes. 56. Desinging for Multiple Android Screen Sizes: Let's design a simple screen, maybe something very simple. Now we are going to start with a file of 320 by 480 height. You can increase the height, maybe 600, and press "Okay." Leave the resolution to 72 because our scale independent pixels are going to be the same size. This is the size we are going to develop, which is MDPI. You can also change it to 40 if you want to, but 320 by 600 seems good to me. Press "Okay," don't color mine this document, and this is our size. Let's zoom in a bit. Now, for the heading, we are going to use Google's font, which is Roboto. Let's use this Roboto bold maybe, and 56 point. I think they have 56 in there. I'm going to use 56 over here. This is a very big heading for us and we are going to use 56, same. Let's leave it to Auto like that, or maybe we can use 56 over here, 56. They haven't specified any tracking, so we are going to use our own eyes and gut feeling. Basically gut feeling or maybe we can use zero over here, maybe they have developed a font like that. This is heading and then we are going to go to the subheading. Subheading should be something 24 headline, 24 sp, so this is going to be 24. Calculation is very easy like this. Let's move this up. We are going to use not Bold but maybe Light font for this one. Now maybe we are going to use this gray color like that. Let's move it closer to this. Zoom out to see how it is going to look like. We_can _do _it, this is our big heading and we can also say Yes, just to make sure it is looking good. This is our big heading and then we are going to paste some text over here like this. We are going to use type Lorem Ipsum. The size we are going to use is we're going to 40 sp, so 14 sp is for body 14 points. Let's use 18 points for the leading, like that. Maybe, I guess maybe more than 18 is good, 20 is good. We have set our leading everything on this screen size. For this MDPI, it is four MDPI. All the sizes are the same. Maybe we can reduce this 56 to 45 because 56 is looking too big. This one is 56, let's move it back to 45. Yeah, I think it's better, 45 and 45. Keep it simple like this, maybe red is good. Let's move it a bit below like that. Move the text more at the bottom like this. Let's change the color for this one to this dark blackish color. This is our art board. Let's move the heading at the top, maybe like this. Looking good. Now we have moved our heading, subheading, and everything according to the scale of this typographic scale by material design, Google Material Design. I think that's it. If you want to design for a bigger screen, I think you should adjust your font sizes and multiply them with the respective resolutions. Let's see if they have some sizes over here. This is HDPI which is 800 by 480, so let's design for this one. Or maybe we can increase our image size to that 150. I think it is 150. It is going to be 150 by 150, and this is how we have gone to the other screen size. Now if you go to this, you can see the pixels. The height is 900, and the width is 480. It is very easy to switch from one to another. If you want to go to the next one, you can also go to this 720. Change 720 in the width over here, like that, and you can see this is how we are shifting towards the next screens XXHDPI, 960 by 1600. Basically it is the width, don't worry about the height. We are going to switch to 960. Now you can see all our text sizes are also increasing with it. We should not be worried about because we have point sizing in our Photoshop settings. How you can set it, you can go to this Preferences, and go to Units & Rulers, and set your Type to Points. It is good practice to set it to Type to Points because of you when you are designing for mobile screens. This is how we have switched to different screen sizes and this is 100 percent. You can see how it is looking very nice. It's Roboto font. You can use other variations of Roboto if you want to, but I'm right now sticking with only a Roboto font. This is all about DPIs and sps, scalable pixels, and different sizes. You should give your developers these sizes. Right now we have, I guess this one is okay. I think I should go back to my original format. Step backwards, step backwards, step backward. It's not working like that. Maybe we should change the image size to 320 again, and this is how our text actual size is basically laid out. Let's see which was that. It's 14 points, then 24 points or basically 45 points. We are going to tell them that 45, 24, and 14 sp are used. This is all about the typography on your Android Apps and mobile phones. I have told you how to do that in Photoshop too, and how to cater for different screen sizes. This is it. If I come up with something else or you need my help, always ask me questions. I think we should now move to the next lecture. 57. For Developers → Using Google Fonts: The first and foremost choice for every developer is to use Google Fonts. Even designers love to use them because they can easily be hosted and they can be easier to use for designers and for developers. You just need to embed them with just one line of code and you are ready to go right now there are 804 for families which are totally free and hosted for you. Hosted means they are on another server on Google's servers. Also, the problem with these Google Fonts is the font quality. Sometimes that Kerning is off, sometimes anti-aliasing issues. Anti-aliasing means edges might be jagged and they are not smooth. This happens with a lot of Google Fonts. Sometimes most of them are good quality, but some of them, they have jagged edges. There are few more of the good things about Google Fonts. Let's switch to Google Fonts, now, there is one more thing, you can easily select a family and if you go to customizing it, you just need to embed this line of code and you are ready to go to use this family. This is the code also shows you the load time, which is fast, if you try to customize it, it only have one [inaudible] right now. Let's try another one, like this, one with this, we are going to select few more. You can see it shows you what is the load time will be. Even if you are a designer, you should choose your fonts easily from this Google New Fonts Preview. One more thing is if you try to select this view specimen, you can really see a lot of great things over here, like all the different styles, so different styles over here then we have bearing, which is very nice. Why bother spending hours, try to match different fonts. Why shouldn't we use just built-in or already matched forms, choose one you like overhere or which is really closer to your projects. Try to use this one also it is showing you usage how much it is used in different countries or different areas, and this is how many websites it is serving. It is a great tool to get you started, copy one line of code, get baring from here. There are a lot of good things about it. But still you can see, if you see some of the fonts, they might have, some of the jagged edges like you can see over here, this is not very smooth on my screen. Also you can see or hear Merriweather Sans, you can see between A and M darkening is a bit off. So these are few things, and still I think it is a very good option to start with Google Fonts because developers are going to love it, because it is very easier for them to use it. Just copy one line of code and they're ready to go, if you are a developer, you should communicate with your designer, if you're a designer, you should communicate with your developer to get started and know what are the possibilities. Let's move on to the next lesson. 58. For Developers → Using Premium Fonts: Now let's talk about premium fonts and why should we buy these premium fonts and what are the gems hidden in them? Now, first thing is great quality, okay? They are really great. They have great kerning. They're designed by great typographers and typographic companies, type foundries. Kerning is great, and they have a lot of linkages and few extra options. Anti-aliasing is good. They don't have any jagged edges, their web fonts are great. Now the biggest edge you have is custom look, okay? Now you have a brand, you have a team in your mind so if you use a premium font, it is going to give a lot of impact on your viewers and users, okay? Choose wisely, you can buy premium fonts and you can use them in your branding, in your websites, in your mobile apps everywhere. Customers are going to instantly recognize your firm or company or product from its type, okay? Now there is some cons associated with this. The problems we have is that they are expensive. Some fonts if you tried to buy them, they are $700 the whole family so it is very costly. Even, I like few phones that are four or $500 and sometimes I think that someone should give me such fonts because I cannot buy them. Okay, so the other thing is they might not be hosted for free, okay? If you buy a fonts from this site, myfonts.com, this is my favorite site. You can see over here, I am logged in. I have bought a lot of fonts from here, a lot of families you can see over here. Now the benefit of such sites is that you can find or match your team exactly what you are looking for. You can see over here different letters, there's shapes, okay? There uses that you can see over here. Britannica, then storytelle, okay? There are a millions of themes. You can look for great artists, you can look for special offers. You can buy them on some discount. Also, you can look for some free fonts if you want. I really suggest that you should subscribe on this website and they will send you some free fonts. If you want to search some free fonts you can such over here and add them to your cart and use them on web or your designs. This is how I have a lot of collection of free premium fonts. Anyhow, this is the site I really love. There are a lot of design ideas too. If you look at these typefaces and their presentation, there are a lot of ideas too, so do purchase some good fonts from here and purchase them wisely. Maybe you need just one or two or three style not all the font family. This is how you get started with premium fonts. There's another one which is Typekit, which is related to this photo-shop license. You can also purchase Typekit, it's subscription-based website with a lot of fonts. I don't know it is typekit.com or whatever, but I think it's from Adobe company and there it is. I think I am logged out of it, I guess. Anyhow, now I'm logged in. Okay, now you can see over here there are a lot of classifications you can select anyone over here and like mono handwritten, decorative scraped slabs out if this is very good and you can add them. You can use this fonts in your web bar, mobile apps or even your designs inside Photoshop. I have right now, I guess some 276 fonts and if you operate to another plan, you might be have a lot more options. This is another way. These fonts are hosted on Adobe Typekit so they also work like Google, I guess. This is how there are different options to use premium fonts. There might be more websites like this. We have this Adobe Typekit. This is where you purchase different fonts and web fonts. Okay, so then you can see over here web fonts, even if you go to any font like this one. You can see their web fonts right away. If you click over here, you can see, if you click over here, you can see how this font is going to look like on the web, here it is and you can see over here. If you want to buy, you can see in the buying choices. We have Desktop and web fonts, so you must always click web font if you are going to use it in the web, if you are going to use it in app or publication like book or something like this, then you need to purchase more licenses. This is all about premium fonts and their different methods of purchasing subscription-based or you need to purchase the whole font their licenses so you might have got good understanding and let's move on to the next lesson. 59. For Developers → CSS Font Sizing: When it comes to web font sizing CSS units, there are actually two categories. One is absolute units like pixels we used to use them in the past a lot, maybe four or five years back. Now, there is another category which is relative. As soon as this is responsive and adaptive, Web Design is getting popular and it is right now in these days. It is really essential to develop websites that have relative pixel major units. We have; em, rem vw and %. Pixel is used very less these days. Maybe in the body or something like this at the base font, we might need to use this. Otherwise, there is very less use for pixel values, Now, first we are going to see that em and % are both relative to parents. They are actually similar with each other. If they have parent div and then another parent div, then it can create some problems. I will explain it in a coding exercise video, so don't worry if you don't understand right now. vw means viewport width so it is relative to the viewport, which is the browser window our user have open. It is very responsive if you try to squeeze your viewport size or your browser, your heading or font will be squeezed too. It will shift it's size so it is relative to viewport. We will see its example with the code. I am just going to give you a brief overview. Now, last one is rem. Rem is relative to the base body font size. If you have set your body font size to 18 pixel, then one rem will be equal to 18 pixel. It is not dependent on any parent Div or anything. So in your whole website, your whole WordPress Blog. If you are using rem as your font size, it will always look for the body font size and do its calculation according to it. Two rem will be 36 pixels. This is very great feature if you want to keep consistency. Let's dig out in the coding sections. Let's move on to the next coding lessons. 60. For Developers → em Font Sizing: First, we're going to look at em units, so how we are going to specify. Let's see, here is an example document I have created for you. On the both sides, we are using em units but in different situations and different parents. Let's see how this can mess up, such problem like we have on the left side. On the right side, we have the proper usage. Let's stick into the coding. There's nothing fancy. Let's see what we have in our HTML document. I have imported this normalize to normalize.min.css. If you don't know what normalize is, it is basically to eliminate all the browser styles and other problems, mismatch problems we have. It is going to reset your styles. Then we have this Google API. We are basically importing this em. We have imported this Source Sans Pro font, and then we have a style sheet linked to it. That's it. This is my heading for the header, it has nothing to do with the example. Min code is over here. This is a container heading 1, 2, 3, body tags, span. Then we have small text, small, and then we have another container which is at the right side over here. This one is another container. Left is the container. We have two containers, right and left on the left and right side. Now, what is happening here is if you look at this container, let's go to the CSS style.css. Here, I have all the sizes specified. Now, in my HTML element, I am saying for size 18 pixel, so line height 1.5. When you want to set up your base font, always use HTML or your body tags. You can also use init, but I prefer to use it over here. You can use in both. You can use this font size. We are setting our base font size. Baseline is 27 right now. If you multiply 18 by 1.5, it is 27. Now, you can see over here our paragraph size is 0.9 em. If we calculate 18 pixel multiplied by 0.9, 16.2 pixels, line height is 1.25. Same as the other calculations like three em, 18 pixels multiplied by 3, and so on and so forth. What we're doing is we're multiplying our base font with our em value in each element. If we have paragraph element, we are multiplying its value with the HTML. Our em works in a way, like we have this em unit. It looks for the immediate parent. If the paragraph is inside this body and HTML tag, there is no other div, then it will be 18 pixel. In this case, if you look at our container code, let's show you what my containers have. If you look at this container on the left, this is the left one. Let's add over here. Now, you can see left container has some size for size which is two em. But this one on the right side, this container has no font size specification. What will happen here is that all elements inside this div will be calculated with 18 pixel HTML base font. This is going to happen over here. In this container, every heading, every paragraph element, everything we see, you can see at the right side, it is calculated on the level of our HTML element base font size. If you click at it and inspect element, you can also do this in Chrome. If we go to this computed box model, then this computed, you can see font size is 16.2 pixels. So 18 multiply by 0.9, it is the correct font size. But if we look at the paragraph inside this container, which is the left one, it is 32.4. How come this 32.4 pixel has been calculated? Let's see how this has been calculated. Everything that is a bit different is in this container. We have two em. This container had a parent which was HTML. Our base font size was 18 pixels multiplied by 2, is equal to 36 pixels. Now, in this situation, our parent have the base font size has changed. So everything that is inside this container will use this 36 pixels as their base font, because now their container have different base font. I'm using shortcut key for my sublime text. So 18 multiplied by 36 pixel is our base font for this container child elements. Basically, child elements mean everything in this container is its child. Here, we can see if you look at this, why this has been calculated as 32.4, because our paragraph size was 0.9. If we multiply 36 pixels multiplied by 0.9, it will be 32.4 pixels. This is how our paragraph has been calculated. This is how our paragraph size's calculated and also all our heading sizes. Three em in this situation now means that we have 36 pixels multiplied by 3, is equal to 108, 108 pixels is our heading 1 in this situation. Let's see whether this heading 1 is 108 pixels or not. Let's inspect it and you can see over here. Font size, 108 pixels, also the line-height is 108 pixels. This is how em works. Here, we have only one parent, which is HTML. This container, it has no font specification. In this case, we have container inside this HTML element and we have two levels of this calculation. Em is basically relative to its immediate parent. Its immediate parent was this container. We had this font size two em, so now its base font size changed. If you want to use it, use it carefully and make sure that you are using good relative calculations. This is all about em units. Let's move on to the next one. 61. For Developers → rem Font Sizing: Let's talk about Rem Unit or CSS font size specification. This is my favorite one, it is relative to the body. Let's see how it is going to work. I am setting my base font size on HTML rather than body. Sixty two point five percent means 10 pixels which is 16 pixels multiply by 0.625 which is equal to 10 pixel that is how it is going to be equal to 10 pixels. This is sometimes designer do designers or quarters they use this technique, it is very old one to make your calculations easier, but the recommended is four size 100 percent, so always use this one. I am using only for this exercise just to explain you few concepts. Now rem is always going to look for this HTML or inside this body tag, whichever is the base font. If we don't have HTML it will look in body tag. It will look for this size which is 10 pixels, and all its calculation will be based on this, so 10 pixels. Our paragraph over here is 1.6 rem which is 10 multiplied by 1.616 pixels. Then our span sizes 2.4 rem which will be equal 24 pixels, why? It is easier to calculate because we have setting over here. Then inside the h_2, it is 36 pixels, this is 24, 2016, 14 pixels so on and so forth. Now inside the container, if you try to specify some font size like I am specifying right now, 24 pixels. Let's see is it going to look for this size as our base size or it is going to look for this size. I have right now opened it in Chrome just to give you some taste of the Chrome levels. Now you can see it is an effective and our font size is, this one is going to be, let's see what is the font size computed. Let's see. Line height is 48 pixels. Then there is our font size, it will be in the f, c, d, e, f. Here we have. Font size 48 pixels. It was a bit difficult to find this value in Chrome because it have a lot of other values like flex, another the hidden. This is difficult to find it, but here we have font size 48 pixels. We specified 4.8 rem. Which means it is calculating according to this value. It is not looking for this value or not even considering it. We should always make sure that this is going to work with the base font element. It will be consistent always. If I want to change all the sizes, I'm going to just change your here. One change controls everything else. This is the thing I love, refresh. This is really magic and I really love this feature that you can control all the font sizes relative to one element which is this HTML, or if you have body, this is how we use this HTML CSS Rem Sizing Unit, and we use HTML as our base size and change all the values according to it. I normally try to use rem in my projects if I have a landing page I try to use rem because then I know that all my font sizes are relative to this one. If I want to change, I can change over here and everything will be changed on all pages or in the whole theme. Make sure you do this exercises and download the sample files. I'm going to upload all these files, so you can check them out. Let's move on to the next lesson. 62. For Developers → % Font Sizing: In this lesson, we are going to look at percentage unit usage in CSS font size specifications. If you are using percentage, it is also similar to emulate, so that is why I discussed emulate before. Now, here in my body, which is my main base font size., here I'm specifying base font size equal to 100 percent, which means 16 pixels. For almost every browser default, 100 percent is 16 pixel value. It is also considered standard, so make sure you specify font size 100 percent in your body element or your HTML element. Now, we have left and right containers. In the left container, you can see I'm specifying font size 140 percent. In the right container there is no font, so everything inside this container will be calculated on the base of this body because this is their parent. There is no specification of font size in the other parents like this one, but this one has font size specification of 140 percent. So everything inside this left container will be treated in the same way as we calculated M. Let me show you an example over here. This is the usage of percentage unit, and you can see on the left container everything is larger, and on the right container everything is the right size. Why we are having this problem? It is also the same problem with M unit that the immediate parent of this left fourths, this one, H1, H2, and H3, they have their parent size set to 140 percent. It means the parent size is 16 multiplied by 1.4, which is 140 percent. So 22.4 is their base size. Now here we have 22.4 pixels as our base size. If we have 22.4, then the font size 100 percent will be 22.4. You can see over here, if we go to this paragraph and right-click and inspect element, it will be equal to 22.4 because it is right now calculated according to its parent which is this left container, this one over here. Now, this is also same as M, so I'm not going to show you a very detailed lecture on this one. You can see over here, for the other sizes I'm using rem, so let's remove it right now to avoid confusion. So heading 1, 2, 3. Now you can see here on my heading 3, I'm using absolute value 36 pixels. Let's see in both examples, right side and left side you can see heading level 3 is fixed, so it is 36 pixels, but everything else is in relative unit, which is percentage. So they have different sizes in both the containers. Now you can see over here I'm using 400 percent, 350 percent, and so on, and so forth. For small, I'm using 90 percent. Okay. There is another use of this percentage which I will be discussing in the later lectures when we will look at responsive typography, so let's move on to the next lesson. 63. For Developers → vw Font Unit: Here is a bit of introduction to this VW awesome unit and I really love how it expands and contracts on responsive websites. Here are three headings and then we have a paragraph over here and you can see paragraph is very big. Let me explain why it is very big. Now if we move on to this container, sorry, style CSS. So, what is happening over here? First thing is HTML font size a 100 percent, also this container width is 80 percent and font size in this parent container is also 24. So you can see over here this VW unit, is relative to the size of this browser window. So it has no effect of this 100 percent or this font size 24 pixels. So what is happening is I have set for a paragraph font size to 4.5 vw. You can experiment with it. So you can see it is very big. This paragraph size also the headings are very big. Heading sizes are also in vw 15 viewport width and then we have line-height, other things, margins and setup everything. Also, heading two, heading three and small text is in RAM or you can see if I try to use this vw, then maybe we can use 2.5 vw over here, like this. Let's see how it is going to look like our small text. So, small text is like this. Now for headings, it is very good, but for paragraph text it is not really nice. So, let's shift to our responsive view. Now, you can see as I expand and contract my viewport size, you can see over here at the top 623 pixels, I press "Control+Shift +M" on my Firefox. If you are using Chrome, I think you can "Shift" and press "F12" and select this one Toggle device. It is also "Control", "Shift, M". So you can see it on different sizes like this, like this, and like this. So right now I'm using this Firefox browser. Now you can see our heading size is relative to our viewport width and it is really responsive as soon as we contract it. Let's move on to this 320 pixels width, which is iPhone five or four, I guess. Okay, so this is how our text is going to look. But you can see the small text is really suffering. It is very small and heading size is good on small devices, but it is very large, sorry, paragraph text is very large on large screens. So this is not a very good practice. So when you are using this VW try to use it just on the headings, like Heading 123, not the small headings because they are going to get very small. So very big headings can get good firm benefit. If you are using a paragraph, I think you should use RAM value or something closer to this, like 1.2 RAM over here. So it is going to look good also for the small text. We are going to use RAM over here. So I'm going to use one RAM over here for the small text. There's three Facets. So this is how we can use this VW unit and try to avoid the things I mentioned over here. Do not use it on paragraph text. Okay So let's move on to the next lesson. 64. For Developers → How Vertical Rhythm works in CSS: Now you are familiar with vertical spacing or vertical rhythm, but how these calculations are going to actually work in CSS. To control your vertical spacing in CSS of different typographic elements or even your other graphic elements, images or buttons or something like that, you need to use margins, padding, and line height. Now keep in mind all these things will be relative to our baseline height. If you have a baseline of like 27 pixels, your margins and paddings and line heights will be multiples of 27 pixels or maybe half of these baseline height. Now how this is calculated is we need a total height which must be a multiple of our baseline. Here you can see that margin top is 27 pixels as my baseline is 27 pixels. Margin bottom is also equal to baseline, and the line height is also equal to baseline. Total height will be 81 pixels. If it's a single line, our line of text it will be equal to 81 pixels height. This is how the height is going to be calculated in our browser. It can be multiple of this baseline height, or it should be multiple of baseline height or equal to baseline height that can also work. Here is another example. Sometime you can use half of your baseline height. If you are using half of your baseline height, I don't recommend using these 13.5 pixels or half pixels values. You can use instead 13 pixels and 14 pixels. The total height will again be 54 pixels. Fifty four is also a multiple of baseline, so we are not going to worry about it. It is going to fit in our vertical rhythm very nicely. Make sure you don't use these 0.5 or 0.5 half pixel values, you can use 14 pixels and 13 pixels. One more thing. Sometimes, if you are trying to achieve maybe some tagline or some headlines, something like that and you don't want to use the same font size you have already used in your scale factor, you want to deviate from here how you are going to vertical space that element. For example, I change the line height. I don't like the line height of my tag line. You can say very spacious. Maybe taking too much space. I am going to set it to 32 pixels. I have changed the line height and I actually need the total height which must be equal to the multiple of baseline. What I'm going to do is 54 minus 32, and I'm left with 22 pixels. I divided them into top margin and margin-bottom, which is 11 pixels, 11 pixels. Total is again 54 pixels. We achieved the word equal rhythm again. Here is an example of vertical spacing, how we are going to use this technique. If you can see my heading, I am using margin top and margin-bottom for the heading and the line height. Add all these three and the total block is where everything is gray. This is that space that is going to take. Then we have our paragraph text. You can see it is all red, so one line height is equal to 27 pixels. It is going to be 27 pixels for each line. The margin bottom, I'm only using margin bottom over here. Some experts they suggest that you should only use margin bottom for all your elements to achieve vertical spacing. In this situation, I am using only margin-bottom and I'm not using margin top because margin top is basically I'm getting from my heading. Heading already have a lot of padding or margin at the bottom, so I don't need more space over here. This is how we use different calculations. Let me show you an example. Here is Bootstrap Custom Typographic Scale. This is the last exercise we are going to do with Bootstrap. Although it is very, very difficult to achieve vertically them in Bootstrap because there are too many elements to chain the padding and everything. Bootstrap really sucks at typographic scales or typographic rhythm. Here I have this heading at the top. It is heading one. If I right-click and inspect element, you can see the spacing around it. Its height total is 135, which is also a multiple of 27 pixels. Right now my typographic scale baseline is 27 pixels. You can see I have padding top which is 27 pixels, and then I have padding bottom, which is also 27 pixels. This is how I have used padding top and bottom in this heading one. My line height is equal to 81 pixels. This is basically the height. If you see over here computed styles, you can see font size is 61 and line height is 81. You can see over here. Then we have no margin top and bottom. We have padding bottom and top margin, which is equal to 27 pixels, which is my baseline. Now, as you can see at the bottom all these elements, our paragraphs heading 3, this one is heading 2, they're all perfectly aligned with our vertical rhythm or baseline. You can see even the image I have used, the height of the image I have set to the baseline multiple 1,2,3,4,5,6,7,8,9, 27 multiplied by nine, I don't know what is it, but it's equal to this one. Now, this is how I have used my margins and everything else. Let me show you one other example which is offbeat example. T