1 00:00:00,400 --> 00:00:02,700 Now that we understand what typography is, 2 00:00:02,700 --> 00:00:06,530 let's talk about some of the terms used to describe its different elements. 3 00:00:06,530 --> 00:00:11,160 This will include typefaces, parts of letter forms layouts, and more. 4 00:00:11,160 --> 00:00:15,520 Instead of ambiguously trying to describe something like that low swoopy part of 5 00:00:15,520 --> 00:00:18,630 the lowercase y, these terms will make it much easier to 6 00:00:18,630 --> 00:00:21,590 know what we're talking about as we dive into web typography. 7 00:00:22,990 --> 00:00:26,590 As mentioned in the previous video, typography revolves around working with 8 00:00:26,590 --> 00:00:31,370 premade letter systems like typefaces to layout and arrange content. 9 00:00:31,370 --> 00:00:36,570 So first, let's look at what a typeface is and the elements that define and shape it. 10 00:00:36,570 --> 00:00:40,740 The terms typeface and font are sometimes used interchangeably today, but 11 00:00:40,740 --> 00:00:42,589 they are in fact, distinctly different. 12 00:00:43,590 --> 00:00:46,870 A typeface is the design of a collection of characters. 13 00:00:46,870 --> 00:00:50,330 So the term should be used when talking about the look of those letters, 14 00:00:50,330 --> 00:00:52,010 numbers and symbols. 15 00:00:52,010 --> 00:00:54,450 For example, I dig Futura. 16 00:00:54,450 --> 00:00:56,310 It's such a good looking typeface. 17 00:00:56,310 --> 00:00:59,820 This is called a font family in CSS because a typeface comprises 18 00:00:59,820 --> 00:01:00,690 multiple fonts. 19 00:01:01,860 --> 00:01:06,350 A font is a single instance or embodiment of a specific weight, width or 20 00:01:06,350 --> 00:01:08,060 style of a typeface. 21 00:01:08,060 --> 00:01:10,030 For example, the computer file for 22 00:01:10,030 --> 00:01:14,730 Helvetica Bold Italic would be a font, whereas Helvetica would be the typeface. 23 00:01:15,840 --> 00:01:19,100 Historically, this term carried another level which dealt with its 24 00:01:19,100 --> 00:01:23,290 point size because fonts were cast metal pieces at a certain size, so 25 00:01:23,290 --> 00:01:27,380 Helvetica Bold ten point would be an example of a font. 26 00:01:27,380 --> 00:01:31,610 Today, we have the ability to change sizes without changing fonts on a computer. 27 00:01:33,570 --> 00:01:35,260 Now that we've got a grasp on that, 28 00:01:35,260 --> 00:01:37,800 let's look at the numerous elements that shape a typeface. 29 00:01:38,800 --> 00:01:40,490 First, we have the cap height. 30 00:01:40,490 --> 00:01:43,390 This is simply the height of the capital letters. 31 00:01:43,390 --> 00:01:46,890 Next is the baseline which is pertinent to both uppercase and 32 00:01:46,890 --> 00:01:52,230 lowercase letters, as it's the guideline for which the majority of characters rest. 33 00:01:52,230 --> 00:01:56,240 The height of the lowercase letter set is determined by the lowercase x, so 34 00:01:56,240 --> 00:01:58,712 this is labeled as the x-height. 35 00:01:58,712 --> 00:02:02,790 The x-height varies across typefaces and can greatly affect legibility. 36 00:02:02,790 --> 00:02:03,318 Let's look at that. 37 00:02:03,318 --> 00:02:08,250 A high x-height means the lowercase is larger in relation to the uppercase, 38 00:02:08,250 --> 00:02:11,990 whereas a low x-height means the opposite, it's smaller. 39 00:02:11,990 --> 00:02:16,420 When smaller font sizes come into play, a typeface with a high x-height can help 40 00:02:16,420 --> 00:02:21,800 retain legibility, because the lowercase is larger in relation to the uppercase. 41 00:02:21,800 --> 00:02:24,090 Let's say you have two different typefaces, and 42 00:02:24,090 --> 00:02:26,430 both are set at 12 point size. 43 00:02:26,430 --> 00:02:31,240 One could be easier to read than the other due to a higher x-height. 44 00:02:31,240 --> 00:02:35,860 You'll also notice there are certain areas where some lowercase letters descend below 45 00:02:35,860 --> 00:02:38,939 the baseline and others ascend above the x-height. 46 00:02:40,340 --> 00:02:44,040 These are called descenders and ascenders, respectively. 47 00:02:44,040 --> 00:02:48,120 The p here has a descender, and the b has an ascender. 48 00:02:48,120 --> 00:02:49,410 You might be wondering, 49 00:02:49,410 --> 00:02:54,150 how low can descenders go or how high can ascenders climb? 50 00:02:54,150 --> 00:02:57,290 Well that also varies across typefaces. 51 00:02:57,290 --> 00:03:02,060 In some typefaces, ascenders climb above the cap height, in others they sit below. 52 00:03:02,060 --> 00:03:05,880 And in some cases cap height and ascenders are aligned. 53 00:03:05,880 --> 00:03:09,928 This last case though, can affect readability and letter recognition. 54 00:03:09,928 --> 00:03:13,314 For instance, let's say you're using Helvetica where the cap height and 55 00:03:13,314 --> 00:03:15,310 ascender height are similar. 56 00:03:15,310 --> 00:03:18,860 You're writing out a headline which includes the word, ill. 57 00:03:18,860 --> 00:03:22,580 The uppercase I and those two ls are hard to tell apart. 58 00:03:22,580 --> 00:03:24,640 Some might read it as ill, but 59 00:03:24,640 --> 00:03:27,770 others might read it as the Roman numeral for three. 60 00:03:27,770 --> 00:03:31,620 This would be even harder to decipher if the letters appeared mixed up in 61 00:03:31,620 --> 00:03:35,550 a coupon code where uppercase, lowercase and numbers are present. 62 00:03:35,550 --> 00:03:39,160 I'm not saying don't use Helvetica or typefaces with a similar cap height and 63 00:03:39,160 --> 00:03:40,200 ascender height. 64 00:03:40,200 --> 00:03:42,200 I'm saying pay close attention to your ascenders and 65 00:03:42,200 --> 00:03:44,350 descenders, and know what's at stake. 66 00:03:44,350 --> 00:03:46,320 Let's move on to the next term. 67 00:03:46,320 --> 00:03:49,330 The typeface we are looking at has Serifs on it. 68 00:03:49,330 --> 00:03:53,390 Serifs are projections that finish off the main strokes of a letter. 69 00:03:53,390 --> 00:03:56,770 They can some times aid legibility and letter recognition. 70 00:03:56,770 --> 00:04:00,180 For example, the problem we just encountered with the I, l, l would 71 00:04:00,180 --> 00:04:04,530 not happen here because the serifs are distinctly different on those two letters. 72 00:04:04,530 --> 00:04:08,010 Other typefaces forego serifs on their letter forms. 73 00:04:08,010 --> 00:04:11,280 These are called Sans Serif typefaces, sans meaning without. 74 00:04:12,380 --> 00:04:14,960 Next, let's talk about contrast. 75 00:04:14,960 --> 00:04:18,540 Contrast can relate to a few different things in typography. 76 00:04:18,540 --> 00:04:21,272 The first deals with the actual letter forms in a typeface. 77 00:04:21,272 --> 00:04:25,650 A typeface with high contrast would have thick vertical strokes and 78 00:04:25,650 --> 00:04:27,802 thin horizontal strokes. 79 00:04:27,802 --> 00:04:31,220 A typeface with low contrast would appear as if the horizontals and 80 00:04:31,220 --> 00:04:34,010 verticals are the same stroke size. 81 00:04:34,010 --> 00:04:38,400 Contrast can also refer to the actual text, and how it relates to the page. 82 00:04:38,400 --> 00:04:42,120 Pure black text on a pure white page creates high contrast, 83 00:04:42,120 --> 00:04:47,110 whereas a light grey on a medium grey creates low contrast. 84 00:04:47,110 --> 00:04:50,690 We'll later look at when creating high or low contrast is appropriate. 85 00:04:51,860 --> 00:04:54,440 Lastly, let's discuss color. 86 00:04:54,440 --> 00:04:57,630 Like contrast, color can mean a few different things in typography. 87 00:04:57,630 --> 00:05:02,290 The first is the simplest, and probably what comes to your mind. 88 00:05:02,290 --> 00:05:06,881 It's the actual color of words or elements like red, blue, yellow et cetera. 89 00:05:06,881 --> 00:05:10,370 We can create page contrast with changes in color. 90 00:05:10,370 --> 00:05:15,210 The second meaning refers to the overall density of ink or text on a page. 91 00:05:15,210 --> 00:05:19,580 If we want, we can utilize different weights of typefaces at different sizes to 92 00:05:19,580 --> 00:05:22,050 create even color on a page. 93 00:05:22,050 --> 00:05:24,830 We can have lighter weights at larger sizes and 94 00:05:24,830 --> 00:05:27,310 regular weights at smaller sizes. 95 00:05:27,310 --> 00:05:30,730 Or we can create uneven color by setting our headings to 96 00:05:30,730 --> 00:05:33,480 be bolder weights while keeping the paragraphs the same. 97 00:05:34,670 --> 00:05:38,780 These heavy areas of color can add emphasis as needed. 98 00:05:38,780 --> 00:05:42,860 When we use this term, we'll distinguish its context to avoid confusion. 99 00:05:42,860 --> 00:05:45,760 There are many other terms used to describe different parts of 100 00:05:45,760 --> 00:05:47,940 letter forms and typography. 101 00:05:47,940 --> 00:05:52,120 We'll get into them more in future sessions as we arrive at that stage. 102 00:05:52,120 --> 00:05:55,070 If you're hungry for more now, you can also check out the teacher's note 103 00:05:55,070 --> 00:05:58,370 section which includes links to a couple glossaries. 104 00:05:58,370 --> 00:06:00,680 With what we know now from this video, 105 00:06:00,680 --> 00:06:04,030 we'll be able to better understand the different types of type in our next video.