1 00:00:01,260 --> 00:00:04,230 Now that you understand what typography is, 2 00:00:04,230 --> 00:00:08,800 let's talk about some of the terms used to describe its different elements. 3 00:00:08,800 --> 00:00:14,150 This will include typefaces, parts of letters, layouts, and more. 4 00:00:14,150 --> 00:00:17,560 Instead of ambiguously trying to describe something like that 5 00:00:17,560 --> 00:00:21,480 low swoopy part of the lowercase y, these terms will make it 6 00:00:21,480 --> 00:00:26,590 much easier to know what you're talking about as we dive into typography. 7 00:00:26,590 --> 00:00:30,290 Let's look at the numerous elements that shape a typeface. 8 00:00:30,290 --> 00:00:32,300 First, we have the cap height. 9 00:00:32,300 --> 00:00:35,560 This is simply the height of the capital letters. 10 00:00:35,560 --> 00:00:39,464 Next is the baseline, which is pertinent to both the uppercase and 11 00:00:39,464 --> 00:00:44,503 lowercase letters as it's the guideline for which the majority of characters rest. 12 00:00:44,503 --> 00:00:49,520 The height of the lowercase letter set is determined by the lowercase x. 13 00:00:49,520 --> 00:00:51,879 So this is labeled as the x-height. 14 00:00:51,879 --> 00:00:57,440 The x-height varies across typefaces and can greatly affect legibility. 15 00:00:57,440 --> 00:00:58,280 Let's look at that. 16 00:00:59,370 --> 00:01:04,200 A high x height means the lowercase is larger in relation to the uppercase. 17 00:01:04,200 --> 00:01:08,850 Whereas a low x height means the opposite, it's smaller. 18 00:01:08,850 --> 00:01:13,750 When smaller font sizes come into play, a typeface with a high x height can help 19 00:01:13,750 --> 00:01:19,400 retain legibility because the lowercase is larger in relation to the upper case. 20 00:01:19,400 --> 00:01:21,940 Let's say you have two different typefaces, and 21 00:01:21,940 --> 00:01:24,850 both are set at 12 point size. 22 00:01:24,850 --> 00:01:29,730 One could be easier to read than the other due to the higher x-height. 23 00:01:29,730 --> 00:01:33,960 You'll also notice there are certain areas where some lowercase letters 24 00:01:33,960 --> 00:01:39,220 descend below the baseline, and others ascend above the x-height. 25 00:01:39,220 --> 00:01:42,930 These are called descenders and ascendes respectively. 26 00:01:42,930 --> 00:01:47,710 The p here has descender, and the d has an ascender. 27 00:01:47,710 --> 00:01:51,769 You might be wondering how low can descenders go or 28 00:01:51,769 --> 00:01:54,286 how high can ascenders climb? 29 00:01:54,286 --> 00:01:57,950 Well, that also varies across typefaces. 30 00:01:57,950 --> 00:02:01,684 In some typefaces, ascenders climb up above the cap height. 31 00:02:01,684 --> 00:02:04,200 In others, they sit below. 32 00:02:04,200 --> 00:02:08,390 And in some cases, the cap height and ascenders are aligned. 33 00:02:08,390 --> 00:02:12,780 This last case, though, can affect readability and letter recognition. 34 00:02:13,970 --> 00:02:17,104 For instance, let's say you're using Helvetica, 35 00:02:17,104 --> 00:02:20,524 where the cap height and the ascender height are similar. 36 00:02:20,524 --> 00:02:25,142 You're writing out a headline which includes the word ILL. 37 00:02:25,142 --> 00:02:31,780 The uppercase I, and these two lowercase L's are hard to tell apart. 38 00:02:31,780 --> 00:02:37,590 Some might read that as ILL, but others might read it as the Roman numeral three. 39 00:02:37,590 --> 00:02:42,820 This would be even harder to decipher if the letters appeared mixed up in a coupon 40 00:02:42,820 --> 00:02:47,720 code, where uppercase, lowercase, and numbers are present. 41 00:02:47,720 --> 00:02:52,630 I'm not saying don't use Helvetica or typefaces with a similar cap and 42 00:02:52,630 --> 00:02:54,160 ascender height. 43 00:02:54,160 --> 00:02:58,070 I'm saying pay close attention to your ascenders and descenders, and 44 00:02:58,070 --> 00:02:59,100 know what's at stake. 45 00:03:00,520 --> 00:03:03,170 Let's move on to the next term. 46 00:03:03,170 --> 00:03:07,290 The typeface we are currently looking at has serifs on it. 47 00:03:07,290 --> 00:03:11,960 Serifs are projections that finish off the main strokes of a letter. 48 00:03:11,960 --> 00:03:15,190 They can sometimes aid legibility and letter recognition. 49 00:03:16,400 --> 00:03:20,740 For example, the problem we just encountered with the ILL would 50 00:03:20,740 --> 00:03:26,310 not happen here because the serifs are distinctly different on those two letters. 51 00:03:26,310 --> 00:03:30,095 Distinctive character shapes help differentiate letters, and 52 00:03:30,095 --> 00:03:32,470 serifs help letters flow. 53 00:03:32,470 --> 00:03:36,470 The shape of letters particularly helps those with dyslexia and 54 00:03:36,470 --> 00:03:37,640 reading disabilities. 55 00:03:39,070 --> 00:03:42,850 Other typefaces forego serifs on their letter forms. 56 00:03:42,850 --> 00:03:46,330 These are called sans-serifs, sans meaning without. 57 00:03:48,010 --> 00:03:51,020 Next, let's talk about contrast. 58 00:03:51,020 --> 00:03:54,920 Contrast can relate to a few different things in typography. 59 00:03:54,920 --> 00:03:58,100 The first deals with the actual letter forms in a typeface. 60 00:03:59,380 --> 00:04:03,374 A typeface with high contrast would have thick vertical strokes and 61 00:04:03,374 --> 00:04:04,994 thin horizontal strokes. 62 00:04:06,615 --> 00:04:09,767 A typeface with low contrast would have little to no 63 00:04:09,767 --> 00:04:11,903 difference in stroke thickness. 64 00:04:13,768 --> 00:04:19,450 Contrast can also refer to the actual text and how it relates to the background. 65 00:04:20,830 --> 00:04:25,980 Pure black text on a pure white background creates high contrast. 66 00:04:25,980 --> 00:04:29,990 Whereas a light gray on a medium gray creates low contrast. 67 00:04:31,110 --> 00:04:35,390 Later, we'll look at when creating high or low contrast is appropriate. 68 00:04:36,830 --> 00:04:41,861 According to the WCAG contrast guidelines, body text color should 69 00:04:41,861 --> 00:04:48,140 have a contrast ratio of at least 4.5:1 when compared to its background color. 70 00:04:49,170 --> 00:04:51,570 Large text that is 18 points and 71 00:04:51,570 --> 00:04:55,607 larger should have a contrast ratio of at least 3:1. 72 00:04:56,787 --> 00:05:00,115 Lastly, let's discuss color. 73 00:05:00,115 --> 00:05:04,620 Like contrast, color can mean a few different things in typography. 74 00:05:04,620 --> 00:05:08,611 The first is the simplest and is probably what comes to your mind. 75 00:05:08,611 --> 00:05:14,440 It's the actual color of text such as red, blue, yellow, etc. 76 00:05:15,760 --> 00:05:18,770 We can create page contrast with changes in color. 77 00:05:20,240 --> 00:05:26,690 Common color blindness conditions include red/green and blue/yellow. 78 00:05:26,690 --> 00:05:29,370 People with color blindness have difficulty 79 00:05:29,370 --> 00:05:31,600 discerning the differences between the two. 80 00:05:32,640 --> 00:05:38,090 Therefore, avoid pairing color text and backgrounds in those colors. 81 00:05:38,090 --> 00:05:42,668 There are browser plugins and other tools which allow you to test how those with 82 00:05:42,668 --> 00:05:44,826 color blindnesses see your design. 83 00:05:44,826 --> 00:05:46,920 Check out the teachers notes for links. 84 00:05:48,040 --> 00:05:52,700 The second meaning refers to the overall density of ink or text on a page. 85 00:05:53,870 --> 00:05:58,720 If we want, we can utilize different weights of the typeface at different sizes 86 00:05:58,720 --> 00:06:00,820 to create even color on a page. 87 00:06:01,910 --> 00:06:07,950 We have lighter weights at larger sizes and regular weights of smaller sizes. 88 00:06:07,950 --> 00:06:12,510 Or we can create uneven color by setting our headings to be bolder weights 89 00:06:12,510 --> 00:06:14,370 while keeping the paragraphs the same. 90 00:06:15,740 --> 00:06:19,430 These heavy areas of color can create emphasis if needed. 91 00:06:21,030 --> 00:06:25,870 When we use this term, we'll distinguish its context to avoid confusion. 92 00:06:25,870 --> 00:06:29,180 There are many other terms used to describe different parts of 93 00:06:29,180 --> 00:06:31,650 letter forms and typography. 94 00:06:31,650 --> 00:06:35,829 If you're hungry for more, you can also check out the teachers notes 95 00:06:35,829 --> 00:06:38,795 which includes links to a couple of glossaries. 96 00:06:38,795 --> 00:06:41,291 With what we know now from this video, 97 00:06:41,291 --> 00:06:46,675 we'll be able to better understand the different types of type in our next video.