Print vs. The Web4:19 with Mattox Shuler
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 0:00 print, the process yields a tangible document, piece of paper, poster, etc., 0:02 which has the text as ink on a page. 0:07 The final medium is quite different than a lighted screen displaying a certain amount 0:10 of pixels to render type on a website. 0:14 Now, let's look at two main ways web typography differs from print, and 0:17 how we can smartly design with that in mind. 0:22 First, let's talk about desktop [SOUND] fonts versus webfonts. 0:25 [SOUND] Desktop fonts [SOUND] are used for print layouts and design. 0:29 They are fonts you install on your computer which give you 0:33 the [SOUND] ability to use them in word processing programs or design programs. 0:36 The final mediums they can end up on are pages of paper, 0:40 [SOUND] posters, billboards, JPEGs, PNGs, the list goes on. 0:44 Desktop fonts were created with those mediums in mind. 0:48 Webfonts are a fairly recent phenomenon. 0:52 These are font files that are not intended to be used in 0:55 the way desktop fonts are used. 0:58 Webfonts are created for the purpose of serving up a font on a website that 1:00 might not be installed on a person's computer. 1:04 Before recent years, you could only call display fonts that were 1:07 already native to a person's computer also known as system fonts. 1:10 This drastically limited your choices because you had to 1:14 find ones that were native to multiple operating systems like Windows or Mac OSX. 1:17 Now, webfonts have showed up and recently became popular, 1:24 because you have more control and customization over what your users see. 1:27 Many type foundries, and designers have quickly jumped on 1:31 board with converting their desktop fonts in to web fonts. 1:34 Some, simply plug their desktop fonts in to a web font 1:37 converter without making any adjustments, and license them for the web as is. 1:40 This might work well for fonts intended for large sizes. 1:46 But great web fonts have been re-engineered to work for the web. 1:49 That means that desktop licence file, and web licence file are designed in 1:53 different ways to fit the medium they are intended for. 1:58 To add another variable into the mix different browsers like Safari, 2:01 Internet Explorer, Chrome, and Firefox handle and render web fonts differently. 2:06 They sometimes require different web font files and 2:11 sometimes type may appear bolder in one browser than the other. 2:14 This means, it'll be a good idea to test how your type is rendering 2:18 across different browsers. 2:21 Some type designers meticulously apply font hinting to their typefaces. 2:22 This is where they're setting up manual mathematical hints at different sizes to 2:27 make sure the type is rendering how they like it at each size on the screen. 2:32 Some browsers ignore this and some browsers take this into account. 2:37 Some popular type faces have desktop licenses, but may not yet 2:41 be available as web fonts. 2:45 In this case, you should reach out the the type designer or foundry to see if you can 2:47 purchase a web font license, or find out when one will be released. 2:51 Do not try to use a desktop licensed font and convert it to webfonts, or 2:56 serve up desktop font files on your site. 3:00 Not only is this not smart, but it's also breaking that license agreement for 3:03 most typefaces. 3:08 Lastly, let's discuss the second main difference, 3:09 which is fixed layouts versus fluid layouts. 3:12 In print or graphic design, you're designing for 3:15 a fixed layout, meaning the type and 3:18 elements are arranged in a specific way that's locked into the medium. 3:20 For example, if I was laying out type for a magazine article, the type is 3:25 set in a specific place with an exact width and length to the block of text. 3:28 Once that magazine is finalized and printed, the type and 3:34 layout remain that way so you know exactly how the reader is going to see it. 3:36 With the web, it's much different. 3:40 Users might be viewing your site on a phone, tablet, or 3:43 desktop, which all have different screen sizes. 3:46 Typography that might work great when viewing the site on a desktop computer 3:49 can take a turn for the worst on a mobile phone. 3:53 With responsive design, we can create fluid layouts, so that our type and 3:56 layouts can respond to a user's screen size. 4:00 This gives us a ton of control such as changing fonts sizes, layout, widths and 4:03 more at certain breakpoints. 4:08 We'll get into this more later. 4:10 That's it for now and good work finishing this stage. 4:12 I'll see you in the next stage. 4:14 We'll look at how to choose and use type faces for the web. 4:16
You need to sign up for Treehouse in order to download course files.Sign up