Print vs. Digital5:49 with Hope Armstrong
Type has progressed a long way since the days of the printing press. We’ll look at what’s changed when it comes to web typography.
When laying out or setting type for print, the process yields a tangible document, 0:01 such as a piece of paper which has the text as ink on a page. 0:06 This final medium is quite different than a lighted screen displaying a certain 0:10 amount of pixels to render type on a website. 0:15 Now let's look at two main ways web typography differs from print, 0:18 and how we can smartly design with that in mind. 0:23 [SOUND] First, let's talk about desktop fonts versus webfonts. 0:26 Desktop fonts are used for print layouts and design. 0:32 They're fonts you install on your computer, which gives you 0:35 the ability to use them in word processing programs or design programs. 0:38 The final mediums they can end up on are pages of paper, 0:43 posters, billboards, JPEGs, PNGs, the list goes on. 0:48 Desktop fonts were made those mediums in mind. 0:53 Webfonts are font files that are not intended to be used in 0:57 the same way that desktop fonts are. 1:01 Webfonts are created for the purpose of serving up a font on a website or 1:04 app that might not be installed on a person's computer. 1:07 This is crucial when designing for the web. 1:11 We'll get into where to find webfonts in a bit. 1:14 But for now, just know there are several websites that let you download webfonts 1:17 for free or for purchase. 1:22 In the distant past, when creating a website you could only use fonts that were 1:25 already native to the person's computer, also known as system fonts. 1:30 The upside of using system fonts is there's no loading time, 1:35 the fonts are designed for legibility on the devices, and 1:39 users have a familiarity with the font. 1:43 However, it limits your choices because you have to 1:46 use fonts that are native to multiple operating systems on Windows and Mac. 1:49 Now that webfonts are common and well-supported, 1:55 you have more control and customization over what your users see. 1:58 When designing for a mobile app, the easiest option is to use a system font. 2:03 But if you prefer a custom font, look for fonts with an app license. 2:08 This makes it easy to use the font across iOS, Android, 2:13 and other digital publishing platforms. 2:17 When shopping for a webfont, be sure to inform the client about the ongoing cost. 2:21 Some webfont licenses are charged based on the number of monthly active users. 2:27 Sometimes you'll have a larger budget for webfonts, 2:33 which provides you with some flexibility and options to choose from. 2:36 Other times there might not be room in the budget for webfont licenses or 2:41 subscription models. 2:45 If that's the case, try to help the client understand the benefits of good 2:47 typography and why there is a cost associated with webfonts. 2:51 For example, I might tell a client free typefaces are fine to use and 2:57 I will happily go down that route if needed. 3:02 But be aware there's a relatively small number of 3:05 really good versatile free fonts, which limits our options. 3:08 Because of that, the good ones are often used on many sites, 3:12 which won't do us any favors in distinguishing your site. 3:17 To set your site and brand apart, 3:21 I would recommend going with a subscription webfont model. 3:23 Although there is some cost, I think your brand and users will get much more mileage 3:28 out of paid webfonts than if we went with free fonts. 3:32 After that sometimes a client makes room in the budget and sometimes they don't. 3:37 In the latter case, we'll want to have all these principles we discussed in 3:42 the back of our minds as we browse free webfont sites to find good ones. 3:46 Another thing to note about webfonts is this. 3:52 Some popular typefaces have desktop licenses but may not yet 3:55 be available as webfonts. 4:00 In this case, you should reach out to the type designer or foundry to see 4:02 if you can purchase a webfont license or find out when one will be released. 4:06 Do not try to use a desktop licensed font and convert it to a webfont, or 4:11 serve up desktop font files on your site. 4:16 Not only is this not smart, but 4:19 it's also breaking the license agreement for most typefaces. 4:21 Lastly, let's discuss another difference, 4:27 which is fixed layouts versus fluid layouts. 4:30 In print or graphic design, you're designing for a fixed layout. 4:33 Meaning the type and 4:38 elements are ranged in a specific way that's locked into the medium. 4:39 For example, if I was laying out a magazine article, the type is set in 4:44 a specific place with an exact width, and linked to the block of text. 4:49 Once that magazine is finalized and printed, the type and 4:54 layout remain that way, so you know exactly how the reader is going to see it. 4:58 With the web, it's much different. 5:04 Users might be viewing your site on a phone, tablet, or 5:06 desktop, which all have different screen sizes. 5:10 Typography that might work great when viewing the site 5:14 on a desktop computer could take a turn for the worse on a mobile phone. 5:17 With responsive design, we can create fluid layouts so that our type and 5:22 layouts can respond to a user's screen size. 5:26 This gives us a ton of control, such as changing font sizes, 5:30 layouts, widths, and more at certain breakpoints. 5:34 We'll discuss this more later. 5:39 That's it for now, and good work finishing this stage. 5:41 I'll see you in the next stage, where we'll look at how to chose and 5:44 use typefaces. 5:47
You need to sign up for Treehouse in order to download course files.Sign up