Advanced Web Typography

All right. We're in the home stretch. 0:00 In the final video of this stage, we'll get a few things that can give your 0:02 typography extra polish, along with some features to expect for the future. 0:06 Knowing how to properly use these techniques can set apart your designs, and 0:11 create lasting impressions on the reader. 0:15 First, we'll look at letterspacing and kerning. 0:18 Then, we'll jump into ligatures. 0:21 After that, we'll go through an array of best practices. 0:23 And finally, we'll look ahead for what's in store. 0:26 Although commonly confused, letterspacing and 0:29 kerning are two different techniques when it comes to typography. 0:31 They both deal with the space around letter forms but in different ways. 0:35 We'll examine each one along with general rules of thumb for both. 0:39 Letterspacing, also known as tracking, pertains to 0:45 the amount of space between every character in a particular block of text. 0:48 You could increase or 0:52 decrease the amount of letterspacing which will affect the text as a whole. 0:53 For example, in CSS, we could set the letterspacing of our 0:59 main title to be greater or less than the font's normal spacing. 1:02 So for greater, we'd add a value like 0.03m. 1:07 We'll save and check it out. 1:09 Notice how every space between each character is effected and is loosened up. 1:13 Now let's change that value to be a -0.03m. 1:19 Let's save and check that out. 1:21 All right. 1:25 Notice now how the spacing between every letter has been tightened up. 1:26 And I actually prefer this entire letterspacing for 1:30 our title as compared to the normal letterspacing. 1:33 Notice how tighter letterspacing will result in a heavier feel. 1:36 Whereas looser letterspacing gives a lighter, airyer look. 1:40 General rules of thumb are, 1:45 one, headings can usually use a little tighter letterspacing. 1:46 Two, do not letterspace body copy unless it's absolutely necessary to 1:51 aid legibility. 1:56 And three, don't letterspace your type out too much, as words and 1:58 spaces will get muddled. 2:02 Now, let's look at kerning. 2:04 Kerning deals with the amount of space between a specific character combination, 2:06 rather than the spacing of a whole body of text. 2:10 In a typeface, a type designer sets a space for the left side of a letter and 2:14 the right side of a letter, so 2:18 that it works best with all the other letters and their spacing. 2:19 Certain character combinations can come up that are either too far apart or 2:23 too close together. 2:27 These include AV, WA or TA. 2:29 With kerning, character pairs are adjusted to 2:33 be evenly spaced with the rest of the typeface. 2:36 Most typefaces now have kerning built in. 2:40 But kerning support for web fonts and browsers is still getting refined. 2:42 The latest versions of Safari and Firefox automatically enable kerning. 2:47 Whereas other browsers need some help from CSS to enable it. 2:52 Let's look at how. 2:55 Here, we have Elliot Jay Stocks' article on Advanced web typography: Kerning. 2:57 You can read it and get more of a feel on where the web is at for kerning today. 3:02 But what we want right here is the code to paste into our CSS to enable kerning. 3:06 And all these prefixes are necessary for more browser support. 3:12 So what we want to copy here is this code. 3:15 And I'm not going to be grabbing the text rendering optimized legibility up there, 3:17 because it's known to have some issues. 3:22 And I'm going to go back to our style sheet and 3:24 paste it in the body tag of our CSS. 3:26 We'll save that and check it out. 3:30 So what I want you to notice here is this WA. 3:33 That letter combination is prone to have a lot of space in between it. 3:36 This is going to be a minor adjustment, so pay close attention as I refresh it. 3:39 That was a very slight change in this typeface. 3:44 But in other typefaces, the lack of kerning can be more noticeable. 3:46 If you want more control over kerning, then check out letteringjs.com. 3:50 It gives you control over each character so you 3:54 can kern type manually with letter spacing or just give it any effect that you want. 3:58 This is great for getting big display type exactly how you want it. 4:02 But it wouldn't make sense to use with Body Copy. 4:06 So, letterspacing affects the spacing of the text as a whole. 4:08 Whereas kerning deals with the space between specific pairs of letters. 4:14 Now, let's move into talking about ligatures. 4:18 Ligatures improve the appearance of text for letters that are too close together. 4:22 They create a smooth transition between letters by 4:28 connecting certain character combinations. 4:30 They can also give the text a nice touch. 4:33 Ligatures are mostly found in serif and 4:36 script typefaces because they aren't as necessary in sans serif. 4:38 So just because a typeface does not have ligatures, 4:42 does not mean it's a bad typeface. 4:45 In order to utilize ligatures, you'll need a typeface or web font that supports them. 4:49 Typeface specimen images will often showcase them. 4:53 Or you can look through the character map or 4:56 info on a typeface to see if they're available. 4:58 [SOUND] If you've chosen a web font that has ligatures, then you can turn them 5:01 on in your CSS through the font feature settings property by typing liga, here. 5:07 You would also want to do that with the proper code for 5:14 each of these vendor prefixes. 5:17 But I'm not gonna do it since the typefaces we've chosen actually don't have 5:18 ligatures, so this is not necessary. 5:22 But I wanted to give you a feel for 5:24 how to use them if your web fonts do have them as they can really enhance a design. 5:26 If the browser doesn't support font feature settings, 5:31 then the font falls back to its regular character combination, 5:34 which is great as a back up for serifs or sans. 5:37 In Scripts, this can be a little less ideal because they 5:41 often rely heavily on ligatures to connect characters. 5:44 So you might end up with a few disconnecting characters. 5:48 As web standards move forward, support for ligatures will be a no brainer. 5:51 For this next section of the lesson, we'll look at an array of best practices. 5:55 One, pay attention to orphans, widows, rags and rivers. 6:00 We looked at orphans earlier, but their counterpart, widows, 6:05 can also interrupt reader flow and impair readability. 6:08 Widows are a single line of text that flows over to another column. 6:11 Hopefully we'll have more control through CSS in the near future to handle these. 6:16 We're also able to justify type through CSS. 6:20 But this can create large, unsightly gaps throughout a paragraph. 6:23 These are referred to as rivers because the end 6:28 result might look like several rivers of white space flowing throughout the text. 6:31 Controlling rivers is pretty difficult with the current tools we have now. 6:36 So a simple left align often seems the best way to go. 6:40 Left align text can sometimes create rags on the right side, 6:43 which are uneven gaps often caused by long words. 6:48 Minor gaps are expected, but gaping holes should be taken into account. 6:51 There's really no easy way to prevent them, but 6:55 we can sometimes avoid them by adjusting font sizes and line length. 6:58 Just don't let the markup get out of hand by adding a bunch of BR tags everywhere. 7:03 [SOUND] Two, use smart quotes and other proper entities. 7:07 HTML cannot render smart quotation marks, en or 7:11 em dashes and other special characters. 7:15 On top of that, most wizzy wig web editors default to straight quotations. 7:18 Instead, we'll need to insert these character codes 7:23 using HTML character enmities. 7:26 A smart quotation mark is a curly quote, not the set of straight quotes, 7:29 which is the default in HTML. 7:33 Notice how open and close quotes are different. 7:35 The proper way to handle this, is to open the left side with 7:38 “ and close the quote on the right with ”. 7:41 [SOUND] If you need to interrupt text, do not use a hyphen. 7:49 Instead, use the correct HTML entities for en or em dashes. 7:54 [SOUND] For example, en dashes are a bit longer than hyphens and 7:59 are used to indicate a range of time or numbers, like one through ten. 8:03 Em dashes are even longer-and indicate a break in thought. 8:08 Also, instead of using three periods, 8:12 place proper ellipsis in the text with the correct entity. 8:15 And the same goes from ampersands. 8:18 For a list of other common entities, like ampersands or 8:21 ellipses, take a look at entitycode.com. 8:24 Three, create even alignment for quotations and lists. 8:29 Now we're going to talk about hanging punctuation, 8:33 like quotation marks and lists. 8:35 Hanging punctuation requires characters to be positioned outside the margin edge. 8:38 This is commonly used for 8:42 pool quotes and bulleted lists to create an even visual edge. 8:43 For example, hanging quotes keep the left alignment balanced, so 8:48 it increases readability in a text. 8:52 A quotation mark that is flush with the text, 8:54 like we see here, can interrupt the left margin and 8:57 disrupt the rhythm of the reader compared to the one that is not. 9:00 To keep quotation marks clear at the edges of surrounding text, 9:05 we can give the text a negative text indent value in the style sheet. 9:08 Support for a hanging punctuation property in CSS should be coming soon. 9:12 For now though, we can use negative text indent values or 9:17 negative margins to achieve the desired effect. 9:19 We also have the option to hang the list markers in list. 9:23 This can help the flow of text, because the margin edge is well defined and 9:27 continuous compared to one that is indented. 9:31 Either one is acceptable. 9:34 So, it's really up to us to go with what feels right. 9:35 Text and list items should be consistently aligned. 9:38 If a list item runs more than one line of text and isn't aligned well, 9:42 then reading flow can be interrupted because our eyes look for straight lines. 9:46 With CSS, make sure the list markers are away from the edges of the text. 9:50 This will make for a much cleaner reading experience. 9:55 Four, utilize icon fonts. 9:58 Icon fonts or icons or pictograms that would normally implemented as an image or 10:01 a vector file but are converted into a font instead. 10:07 Icon fonts can speed up our design process and 10:10 can significantly improve site performance. 10:13 They can load as much as 14% faster than images and 10:16 can be up to 90% smaller than SVG files. 10:20 They allow us to size them at any scale without losing quality, 10:23 making them crisp at any resolution. 10:27 Some popular sites that offer icon fonts are symbolset.com, pictos.cc, 10:30 and icomoon.io. 10:35 You can call these in a similar way to web fonts through the @font-face rule in CSS. 10:38 And these sites will give you code and instructions on how to utilize them. 10:43 So finally, what's in store for the future? 10:47 Well, open type features are still making their way to the web. 10:50 Many extra font features, like swashes, stylistic alternates for 10:54 letters, different styled numbers and more can all be part of one font file. 10:59 Some of these can be accessed through the font features settings property in CSS. 11:05 But again, browser support for 11:09 that property is a little lacking at the time of this recording. 11:11 Keep an eye out for greater support for 11:14 those features, as they give you a lot more control over your type and designs. 11:16 Viewport Width or VW and Viewport Height or 11:21 VH are units of measure in CSS that are growing in browser support. 11:24 They're extremely powerful for responsive design as they 11:29 automatically resize type based on how high or wide the screen size is. 11:33 For example, in our workspace, we could set our H1 font size to be 10VW. 11:39 I'll save and refresh it. 11:43 Notice that our type has changed a little. 11:46 But watch as we resize the browser. 11:48 The type is shrinking as the browser width changes. 11:50 This is incredibly powerful, and it works in a similar way to 11:52 the fit text JS plugin we looked at in the responsive typography stage. 11:57 I believe Viewport width and Viewport height will be game changers on how we 12:02 handle responsive typography, especially for headlines. 12:06 For more on what we can expect down the road, check out the articles and 12:09 the teachers notes under the Future of Web Typography. 12:13 All right. You've made it. 12:17 Great work. 12:18 You've completed this stage, 12:19 which concludes the learning section of our web typography course. 12:20 In the final stage, we'll get how to apply all this in a project where we 12:24 create a one page typographic site. 12:28 I'll see you then. 12:30 [BLANK_AUDIO] 12:31