1 00:00:01,000 --> 00:00:04,990 So now that we know a little bit more about how fonts work with CSS, let's take a 2 00:00:05,000 --> 00:00:06,990 look at how they're formatted. 3 00:00:07,000 --> 00:00:10,990 While CSS doesn't provide you with quite a level of control over typography that 4 00:00:11,000 --> 00:00:12,990 most desktop publishing programs do, 5 00:00:13,000 --> 00:00:17,990 you still have some very powerful typographic options when writing styles. 6 00:00:18,000 --> 00:00:20,990 As we begin exploring text formatting options, we will not only examine the 7 00:00:21,000 --> 00:00:24,990 properties themselves, but we are also going to see them in action as we preview 8 00:00:25,000 --> 00:00:28,990 how the styles we are discussing affect a sample HTML page. 9 00:00:29,000 --> 00:00:32,990 Keep in mind that in this course we are going to concentrate on more of the 10 00:00:33,000 --> 00:00:35,990 concept than the actual syntax itself. 11 00:00:36,000 --> 00:00:38,990 If you are looking for a deeper dive into the ins and outs of the syntax, I 12 00:00:39,000 --> 00:00:45,990 would recommend exploring some of the other CSS courses in the lynda.com Online Training Library. 13 00:00:46,000 --> 00:00:48,990 Let's start with something we've already discussed, choosing a font. 14 00:00:49,000 --> 00:00:52,990 To define fonts, you use the font-family property. 15 00:00:53,000 --> 00:00:56,990 You can define a single font, or you can provide a fallback list of fonts, 16 00:00:57,000 --> 00:01:00,990 separated by commas, that instructs the browser to use the next font in order if 17 00:01:01,000 --> 00:01:03,990 the previous font isn't found on the client's system. 18 00:01:04,000 --> 00:01:06,990 In this example, all the text on the page would be set to Georgia. 19 00:01:07,000 --> 00:01:10,990 Now if that's not available, it would be set to Times New Roman. 20 00:01:11,000 --> 00:01:14,990 If that wasn't available, it would be set to Times, and if Times wasn't 21 00:01:15,000 --> 00:01:19,990 available it would just say, okay, just go ahead and give me your default serif font. 22 00:01:20,000 --> 00:01:23,990 Now in terms of the syntax, note that Times New Roman is in quotation marks since 23 00:01:24,000 --> 00:01:25,990 there's more than one word in the font's name. 24 00:01:26,000 --> 00:01:29,990 Here is how our page would look with the new font applied. 25 00:01:30,000 --> 00:01:33,990 Now to control the size of the text, use the font-size property. 26 00:01:34,000 --> 00:01:38,990 CSS gives you a ton of options for defining size as you can use a diverse 27 00:01:39,000 --> 00:01:39,990 group of measurements. 28 00:01:40,000 --> 00:01:43,990 Now I know this syntax looks a little weird, but I'm just basically giving you 29 00:01:44,000 --> 00:01:46,990 the same syntax that they give you within the specification. 30 00:01:47,000 --> 00:01:49,990 Now in one of our earlier chapters we took a look at reading through the CSS 31 00:01:50,000 --> 00:01:54,990 specifications and what all these meant. Just so you'll know, we have some 32 00:01:55,000 --> 00:01:56,990 computed values of absolute-size and relative-size-- 33 00:01:57,000 --> 00:01:59,990 those are about the keywords that you could use-- 34 00:02:00,000 --> 00:02:03,990 computed length which is what we are going to focus on, or a percentage, or you 35 00:02:04,000 --> 00:02:07,990 could use the inherit value, which is the default value for text. 36 00:02:08,000 --> 00:02:11,990 Later on I am going to explore the units of measurement that we can use for 37 00:02:12,000 --> 00:02:15,990 things like this in more detail, but for the moment I want to focus on the 38 00:02:16,000 --> 00:02:18,990 difference between using units like pixels and units like em. 39 00:02:19,000 --> 00:02:21,990 So I am going to focus on the length value that you're seeing here. 40 00:02:22,000 --> 00:02:25,990 Length is basically saying, just give me a value and I will compute the length for you. 41 00:02:26,000 --> 00:02:29,990 So I want to talk about differences between using units like pixels and ems. 42 00:02:30,000 --> 00:02:35,990 Now pixels are fixed size or fixed units, meaning that if I set a font size to 43 00:02:36,000 --> 00:02:40,990 16 pixels, it's going to be 16 pixels, regardless of which user agent it's viewed on. 44 00:02:41,000 --> 00:02:45,990 Now if, on the other hand, I use a relative unit such as em, the font size is 45 00:02:46,000 --> 00:02:48,990 relative to the device's current default size. 46 00:02:49,000 --> 00:02:51,990 And if you want to visualize this, take mobile devices. 47 00:02:52,000 --> 00:02:56,990 16 pixels may look great on your desktop for body copy, but notice how huge it 48 00:02:57,000 --> 00:02:58,990 would be on a mobile device. 49 00:02:59,000 --> 00:03:02,990 Now if, for example, I said 1em, I'm essentially telling the device to set the 50 00:03:03,000 --> 00:03:08,990 font at 100% of its default font size, which is one size on desktop and another 51 00:03:09,000 --> 00:03:09,990 size on a mobile device. 52 00:03:10,000 --> 00:03:12,990 It's a way to bring a little bit more flexibility to your design. 53 00:03:13,000 --> 00:03:15,990 So let's go back to our example. 54 00:03:16,000 --> 00:03:18,990 Now, here you can see that we are setting the font size of the headings and the 55 00:03:19,000 --> 00:03:22,990 paragraphs to be relative to each other. 56 00:03:23,000 --> 00:03:28,990 The main heading will be 1.6ems, secondary headings will be 1.4, heading 3s will 57 00:03:29,000 --> 00:03:32,990 be 1.2ems, and then finally the paragraph themselves will be 1em, and this is 58 00:03:33,000 --> 00:03:35,990 going to establish a strong relationship between all of them. And when I go 59 00:03:36,000 --> 00:03:36,990 ahead and apply that, 60 00:03:37,000 --> 00:03:41,990 I can see how now the size of the text changes to reflect that new relationship. 61 00:03:42,000 --> 00:03:45,990 Now if you are looking to set text as either bold or italic, you are going to 62 00:03:46,000 --> 00:03:49,990 use the font-weight and font- style properties respectively. 63 00:03:50,000 --> 00:03:54,990 Now font-weight can be either expressed as bold, normal, told to inherit, or 64 00:03:55,000 --> 00:03:59,990 it can be specified as a numeric weight from 100 to 900, 100 being the lightest, 65 00:04:00,000 --> 00:04:01,990 900 being the boldest. 66 00:04:02,000 --> 00:04:07,990 Now font-style allows us to specify italic, normal, oblique, or inherit. 67 00:04:08,000 --> 00:04:10,990 Now if I go back to our example, you can see how easy it is to set all of 68 00:04:11,000 --> 00:04:12,990 our span text to bold, 69 00:04:13,000 --> 00:04:17,990 then write custom styles for our title class, to set it as italicized, and 70 00:04:18,000 --> 00:04:21,990 overwrite the bold, and then write a specific style for author as well. 71 00:04:22,000 --> 00:04:23,990 And we will go ahead and apply that and we see the changes. 72 00:04:24,000 --> 00:04:27,990 Now another font property that I want to discuss is font-variant. 73 00:04:28,000 --> 00:04:31,990 Font-variant allows you to set text as small caps. Within the title 74 00:04:32,000 --> 00:04:33,990 there, we can see how that looks. 75 00:04:34,000 --> 00:04:37,990 And this is a feature that you're not going to probably need that often, but 76 00:04:38,000 --> 00:04:39,990 it's nice to know that it's available. 77 00:04:40,000 --> 00:04:42,990 So essentially we are setting the author's name here, in this case inside of 78 00:04:43,000 --> 00:04:44,990 an h3 as small-caps. 79 00:04:45,000 --> 00:04:47,990 Now in a similar vein there are probably going to be times that you are going to 80 00:04:48,000 --> 00:04:49,990 want to control the capitalization of text. 81 00:04:50,000 --> 00:04:52,990 You will probably need to do that more frequently, to be honest with you, and for 82 00:04:53,000 --> 00:04:55,990 that you are going to use the text-transform property. 83 00:04:56,000 --> 00:05:00,990 That allows you to set text in all caps, uppercase, all lowercase, and then 84 00:05:01,000 --> 00:05:04,990 automatically capitalize text through the capitalize property. 85 00:05:05,000 --> 00:05:09,990 As you can see, if we set text-transform to uppercase, our h2 is transformed and 86 00:05:10,000 --> 00:05:12,990 the text is displayed in all caps. 87 00:05:13,000 --> 00:05:15,990 The text-align property allows us-- I'm sure you can guess--to control the 88 00:05:16,000 --> 00:05:17,990 alignment of our text. 89 00:05:18,000 --> 00:05:21,990 You can choose between left, which is the default, center, right, and justified. 90 00:05:22,000 --> 00:05:25,990 As you can see here in our example, all of our text is left aligned by default, 91 00:05:26,000 --> 00:05:29,990 but by modifying the styles, we can set our paragraphs to be justified and our 92 00:05:30,000 --> 00:05:32,990 quote to be center-aligned. 93 00:05:33,000 --> 00:05:36,990 The text-indent property allows you to set a value to indent the first line of a 94 00:05:37,000 --> 00:05:39,990 block-level element such as a paragraph. 95 00:05:40,000 --> 00:05:43,990 Now if the text only fits on one line, you'll still see the indent. 96 00:05:44,000 --> 00:05:47,990 Interestingly enough, you can set indents to negative values, which is sometimes 97 00:05:48,000 --> 00:05:50,990 used to hide text or just move it off the screen for a while. 98 00:05:51,000 --> 00:05:52,990 Now here you can see the results of our giving the paragraphs a 99 00:05:53,000 --> 00:05:55,990 text-indent value of 1em. 100 00:05:56,000 --> 00:05:59,990 If you're familiar with desktop publishing or desktop graphic design, I'm 101 00:06:00,000 --> 00:06:01,990 guessing that you've heard of the term kerning. 102 00:06:02,000 --> 00:06:02,990 If you're not, don't worry. 103 00:06:03,000 --> 00:06:05,990 It's just one of the most frequently used questions I get. 104 00:06:06,000 --> 00:06:08,990 How do you control kerning through CSS? 105 00:06:09,000 --> 00:06:11,990 Well, kerning is the process of changing the space between letters based on the 106 00:06:12,000 --> 00:06:13,990 letter pairs themselves. 107 00:06:14,000 --> 00:06:16,990 It's considered actually somewhat of an art form in typography, and it helps to 108 00:06:17,000 --> 00:06:18,990 make text more readable. 109 00:06:19,000 --> 00:06:24,990 CSS unfortunately doesn't have a true kerning value, at least not yet, but you 110 00:06:25,000 --> 00:06:28,990 can control overall letter spacing and word spacing with the letter space and 111 00:06:29,000 --> 00:06:30,990 word space property. 112 00:06:31,000 --> 00:06:34,990 You can use any value you would like, including negative values, and here we see 113 00:06:35,000 --> 00:06:36,990 the effect of letter spacing on our course title. 114 00:06:37,000 --> 00:06:40,990 Finally, I want to discuss another common typographic need, controlling the 115 00:06:41,000 --> 00:06:42,990 space between lines of text. 116 00:06:43,000 --> 00:06:46,990 The common typographic term for that is leading, but if you're looking for the 117 00:06:47,000 --> 00:06:50,990 leading property in the CSS specifications, you're going to be disappointed. 118 00:06:51,000 --> 00:06:53,990 To control the line spacing of text blocks, you are going to use the 119 00:06:54,000 --> 00:06:55,990 line-height property. 120 00:06:56,000 --> 00:06:59,990 Line-height can be set to an absolute value or set to be relative to the 121 00:07:00,000 --> 00:07:02,990 size of the text itself. 122 00:07:03,000 --> 00:07:06,990 Although you can use any value you would like, line-height is unique in that it's 123 00:07:07,000 --> 00:07:10,990 the only property that allows you to use a multiple. 124 00:07:11,000 --> 00:07:12,990 Now multiple uses no unit indicator, 125 00:07:13,000 --> 00:07:13,990 so it's just a number. 126 00:07:14,000 --> 00:07:18,990 So if we were to set our line-height to 1.4, for example, it would be 1.4 times 127 00:07:19,000 --> 00:07:20,990 the size of an element's font. 128 00:07:21,000 --> 00:07:22,990 Now in our example here, we are going to go ahead and set the paragraph's 129 00:07:23,000 --> 00:07:28,990 line-height to 1.6. We are using a 1.6 multiple, and as you can see, it increases 130 00:07:29,000 --> 00:07:30,990 the amount of space between the lines of text. 131 00:07:31,000 --> 00:07:35,990 Now we didn't cover every single formatting option for text in CSS, but we've 132 00:07:36,000 --> 00:07:39,990 covered them enough to give you a good idea of the type of typographic control 133 00:07:40,000 --> 00:07:41,990 you are going to find when writing your styles. 134 00:07:42,000 --> 00:07:46,990 Now, I'm also pleased to announce that the W3C is adding OpenType support to the 135 00:07:47,000 --> 00:07:48,990 Fonts Level 3 Module. 136 00:07:49,000 --> 00:07:51,990 When these features are widely implemented, we will be able to do things like 137 00:07:52,000 --> 00:07:56,990 controlling ligatures, font-based kerning, old style numerals, and more. 138 00:07:57,000 --> 00:08:07,000 In terms of CSS and typographic controls, the best is yet to come.