Terminology6:04 with Mattox Shuler
We’ll need to be on the same page when talking about web typography. The terms covered here will help us define what we’re talking about down the road.
Now that we understand what typography is, 0:00 let's talk about some of the terms used to describe its different elements. 0:02 This will include typefaces, parts of letter forms layouts, and more. 0:06 Instead of ambiguously trying to describe something like that low swoopy part of 0:11 the lowercase y, these terms will make it much easier to 0:15 know what we're talking about as we dive into web typography. 0:18 As mentioned in the previous video, typography revolves around working with 0:22 premade letter systems like typefaces to layout and arrange content. 0:26 So first, let's look at what a typeface is and the elements that define and shape it. 0:31 The terms typeface and font are sometimes used interchangeably today, but 0:36 they are in fact, distinctly different. 0:40 A typeface is the design of a collection of characters. 0:43 So the term should be used when talking about the look of those letters, 0:46 numbers and symbols. 0:50 For example, I dig Futura. 0:52 It's such a good looking typeface. 0:54 This is called a font family in CSS because a typeface comprises 0:56 multiple fonts. 0:59 A font is a single instance or embodiment of a specific weight, width or 1:01 style of a typeface. 1:06 For example, the computer file for 1:08 Helvetica Bold Italic would be a font, whereas Helvetica would be the typeface. 1:10 Historically, this term carried another level which dealt with its 1:15 point size because fonts were cast metal pieces at a certain size, so 1:19 Helvetica Bold ten point would be an example of a font. 1:23 Today, we have the ability to change sizes without changing fonts on a computer. 1:27 Now that we've got a grasp on that, 1:33 let's look at the numerous elements that shape a typeface. 1:35 First, we have the cap height. 1:38 This is simply the height of the capital letters. 1:40 Next is the baseline which is pertinent to both uppercase and 1:43 lowercase letters, as it's the guideline for which the majority of characters rest. 1:46 The height of the lowercase letter set is determined by the lowercase x, so 1:52 this is labeled as the x-height. 1:56 The x-height varies across typefaces and can greatly affect legibility. 1:58 Let's look at that. 2:02 A high x-height means the lowercase is larger in relation to the uppercase, 2:03 whereas a low x-height means the opposite, it's smaller. 2:08 When smaller font sizes come into play, a typeface with a high x-height can help 2:11 retain legibility, because the lowercase is larger in relation to the uppercase. 2:16 Let's say you have two different typefaces, and 2:21 both are set at 12 point size. 2:24 One could be easier to read than the other due to a higher x-height. 2:26 You'll also notice there are certain areas where some lowercase letters descend below 2:31 the baseline and others ascend above the x-height. 2:35 These are called descenders and ascenders, respectively. 2:40 The p here has a descender, and the b has an ascender. 2:44 You might be wondering, 2:48 how low can descenders go or how high can ascenders climb? 2:49 Well that also varies across typefaces. 2:54 In some typefaces, ascenders climb above the cap height, in others they sit below. 2:57 And in some cases cap height and ascenders are aligned. 3:02 This last case though, can affect readability and letter recognition. 3:05 For instance, let's say you're using Helvetica where the cap height and 3:09 ascender height are similar. 3:13 You're writing out a headline which includes the word, ill. 3:15 The uppercase I and those two ls are hard to tell apart. 3:18 Some might read it as ill, but 3:22 others might read it as the Roman numeral for three. 3:24 This would be even harder to decipher if the letters appeared mixed up in 3:27 a coupon code where uppercase, lowercase and numbers are present. 3:31 I'm not saying don't use Helvetica or typefaces with a similar cap height and 3:35 ascender height. 3:39 I'm saying pay close attention to your ascenders and 3:40 descenders, and know what's at stake. 3:42 Let's move on to the next term. 3:44 The typeface we are looking at has Serifs on it. 3:46 Serifs are projections that finish off the main strokes of a letter. 3:49 They can some times aid legibility and letter recognition. 3:53 For example, the problem we just encountered with the I, l, l would 3:56 not happen here because the serifs are distinctly different on those two letters. 4:00 Other typefaces forego serifs on their letter forms. 4:04 These are called Sans Serif typefaces, sans meaning without. 4:08 Next, let's talk about contrast. 4:12 Contrast can relate to a few different things in typography. 4:14 The first deals with the actual letter forms in a typeface. 4:18 A typeface with high contrast would have thick vertical strokes and 4:21 thin horizontal strokes. 4:25 A typeface with low contrast would appear as if the horizontals and 4:27 verticals are the same stroke size. 4:31 Contrast can also refer to the actual text, and how it relates to the page. 4:34 Pure black text on a pure white page creates high contrast, 4:38 whereas a light grey on a medium grey creates low contrast. 4:42 We'll later look at when creating high or low contrast is appropriate. 4:47 Lastly, let's discuss color. 4:51 Like contrast, color can mean a few different things in typography. 4:54 The first is the simplest, and probably what comes to your mind. 4:57 It's the actual color of words or elements like red, blue, yellow et cetera. 5:02 We can create page contrast with changes in color. 5:06 The second meaning refers to the overall density of ink or text on a page. 5:10 If we want, we can utilize different weights of typefaces at different sizes to 5:15 create even color on a page. 5:19 We can have lighter weights at larger sizes and 5:22 regular weights at smaller sizes. 5:24 Or we can create uneven color by setting our headings to 5:27 be bolder weights while keeping the paragraphs the same. 5:30 These heavy areas of color can add emphasis as needed. 5:34 When we use this term, we'll distinguish its context to avoid confusion. 5:38 There are many other terms used to describe different parts of 5:42 letter forms and typography. 5:45 We'll get into them more in future sessions as we arrive at that stage. 5:47 If you're hungry for more now, you can also check out the teacher's note 5:52 section which includes links to a couple glossaries. 5:55 With what we know now from this video, 5:58 we'll be able to better understand the different types of type in our next video. 6:00
You need to sign up for Treehouse in order to download course files.Sign up