 I'm Tori, I'm a designer and developer and obviously this talk is going to be about importance of typography. So I'd like to start off with thank you for letting me talk to you about why everyone needs to better understand typography a bit more. Oftentimes I feel people don't consider it a vehicle of content as much as it is a decoration. This isn't true and it is doing designs a disservice. For me personally I'm a self-certified type addict. I had a really bad and expensive problem a few years back but I'm getting better. For me I've loved types since college and learned from the masters of the distil and the Bauhaus movements and they use an approach that is common in Swiss design which is heavy reliance on type and the idea of letting the content shine through and being and shine through without being overly dressed up. This talk isn't going to try and convince you to become a minimalist though I hope to have you think about type in a new light. The whole talk will boil down to one main point. Come on, of course. Typography is one of the most important parts of any website or app. Typography, go for it, you can't people in the back hear me. If you can't hear me say something earlier. Thank you, it's fine. Just don't curse at me, I'm fine. So the typography affects how people will be able to interact with your content. Reading, navigating or entering data, these all depend on typographic factors that make the consumption of information possible and easy. While design wise it's important to have a certain amount of a while factor to reel people in, this shouldn't be the final destination. Style without substance isn't a good tactic for a growth based experience. So this leads me into a question probably some of you are thinking. Is typography that important? But honestly, typography is really important. It's not something that designers say to justify being paid or just to look good. Realizing that typography is the key to how people consume your content, with the assumption your content isn't just videos or images. There are a lot of factors that lead to its importance. Understanding these factors and spending a bit more time thinking about more appropriate and impactful type choices will directly affect the success of your projects and the satisfaction of your users. So these factors can be broken down into four parts. Usability, design, cost and loading times and performance. Usability is the most important factor of what makes typography so important, without understanding what information the user needs and in what form the content is pointless and the site or app is useless. On a general note, usability and accessibility go hand in hand. Keeping things accessible is just a baseline human thing to do. It's literally the minimum all projects should strive to achieve. It's hard enough for people who may have hurdles of using a computer to make it onto your site. So for them to make it there and then be unable to take advantage of the content is disrespectful at the best and harmful at the worst. This requires an extra level of understanding your audience and the accessibility standards you're going with. So legibility and readability are important. Some see these factors as subjective in regards to design. In my opinion, they are objective because they can be measured and defined. A usable website is dictated by the extent to which it can be used by select users to achieve specified goals with efficiency, effectiveness and satisfaction. Therefore, it makes sense that legibility and readability play an essential role within usability. If users literally can't read or read enough to comprehend the content, then what's the point of the site? Another point worth mentioning is that legibility and readability are not the same thing. These two terms are different in meaning and in application. Yet they are still considered as being the most confused terminologies within the web development realm. Legibility is what gives proper visual perception and scanning of any text. Where readability means understanding the content and is more specifically related to typography. So a little more about legibility. It's a function of typeface design. It's an informal measure of how easy it is to distinguish one letter from another in a particular typeface. Usually it's primarily the concern of the typeface designer who should ensure that each individual character or glyph is unambiguous and distinguishable from others in the font. Legibility is also about choosing the right typeface at the right size. So what makes a typeface legible? A longstanding typographic saying is that most legible typefaces are transparent to the reader. This means that they don't call undue attention to themselves. Additionally, the most legible typefaces contain big features and have restrained design characteristics. They are not excessively light or bold. Weight changes within character strokes are subtle. And serifs, if the face has any, do not call attention to themselves. Readability can be defined not on a letter by letter basis, but by how the combinations of letters are read within a larger body of text. It's dependent upon how the typeface is used and is about typography. It is a gauge of how easy words and blocks of copy can be read. There are many factors that play into the readability of text. Some of the more common typographic terms and explanation of how each term affects readability. So we have hierarchy, which defines how to read through content. Shows users where to start reading and where to read through. It differentiates headers from body text. Although colors of text boxes can be used to contrast headers and body text, hierarchy refers to the difference in size between these elements. And it plays a huge part in how scannable a layout is. Contrast is the core factor in whether or not text is easy to read. Good contrast will make text easy on the eyes and easy to scan. And overall, more readable. But on the other hand, poor contrast will force a user to squint and make reading body text almost painful, not to mention a lot slower. Line height is the common term meaning the space between the individual lines of text. It is another factor in readability because of body text and headers. Sufficient line height is especially important in web design because it makes the text ultimately more scannable. But line height that is too short will cause a user to squint while reading. But if it's too large, the text will seem like separate bodies instead of grouped together as one. Letter spacing is the spacing between the letters, and it affects readability. In print layout, you use negative letter spacing as a comic technique to add more fun feel to the layout, but it really shouldn't be used in body text. And line length is an often overlooked option, but it shouldn't be. Line length is the number of words per line. A good line length is one that allows the reader's eyes to flow from one end of the line to the beginning of the next very easily and naturally. And we'll go into more extensive examples and discussion of that later. So design is an area where people might not put a strong emphasis on the look and feel of their copy text. In the design, some practical things line line length, too many fonts, and strange placement can cause a lot of problems. Perhaps people looking for more wow factor than consumption of content. If the content is secondary, though I'm not sure why it would be, then the type can be outlandish and a visual playground. But the expectation is to be admired and not to pass on information if this is the case. So now that we have the terms cleared up, let's look at some practical applications. This is a slogan that we've all seen countless times. The typography in it is amazing in its simplicity. It's using Futura Condensed Extra Bold to make a bold statement with very few words. There is a time and a place for this type, and it's probably not on your website. So let's look at two examples to show the impact of a specific font size and how it directly affects readability and usability. So here's that type, Futura Condensed Extra Black, and it's set at a larger size, it's about 32 pixels. So this would be about a perfect size for a header or maybe text over a main image when you first come to a page. It looks really good. At this size, it's very scannable and very easy to read. It takes all the boxes for a usable and readable piece of type. But here's that same Futura Condensed Extra Black sat at a smaller size, say about 18 pixels. It loses all readability pretty quickly and from your sounds it was not a pleasant experience. If a user was greeted by this wall of bold to text, I think they would leave your site pretty fast. So both examples use this exact same type, but the size is what is ultimately the difference. The line between readable and readable and not is thin. And it's really difficult if you've never used this type before. So a great rule of thumb is to use the play areas. This is on myfont.com. You could test out the sizes of the fonts. Use these play areas to get a feel for what your font would look at at specific sizes and see if it's something that you want for either a header text or maybe more of a body text. So when people think about line length, which I'm not really sure how much people are actually thinking about it, it may seem as simple as this diagram. Just arbitrarily choose 40 to 75 characters and then it's all good. But this isn't a set in stone rule, it's a general guideline. Some lines may be longer than others and that's okay. It's a visual marker to help create a balanced product that's easy to read. Shorter paragraphs are very awkward and longer paragraphs make it easy to lose your place and unable to find the next line. So something to keep in mind which is that each font will have a different actual width. So the example that's shown using a different font may actually be wider than what's shown on the screen. So when you're laying out ideas for your layout, doing a side by side to get an idea of the width is more than just a good idea, it becomes necessary to visualize the different decisions and to lay out that actual foundation for your site. So the goal is for your site to become the target of websites in regards to reading content. So I've worked at Target for a long time and I believe a lot of people agree with this. So you know how you go to Target, you have one goal in mind. But before you know it, you end up buying pretty much everything in the store, an hour's gone by and you have a cart full of stuff you don't even need. So I want the reading experience to be like that, to be easily enjoyable. In my opinion, one of the best sites to see this in action is Medium. So I don't know how many people read Medium for articles, I love it. It's one of my favorite sites to just read anything on. But one of the big reasons I like scrolling through it is how comfortable it is to just open my browser and go through a very long article. I can go through a few before I've realized I've gone down an article rabbit hole. And I may not stop if I'm not cognizant of that fact. But a major factor in this feeling of enjoyability is the adherence to the line-length suggestion. So I use something called a bookmarklet. A bookmarklet is a bookmark which stores JavaScript commands that adds new features to your browser. And this one is a clever idea by a woman named Clarissa Peterson. And she had an idea to put a span from 45 to 75 characters. And that span is a different color. So that you could visually see what the barrier is for that 45 to 75 character line length. When turned on, as you can see here, you can see how close medium comes to that line. It's probably within like four characters. Obviously the lines aren't exact, but that's okay. Because it has a good flow that has been created. The text is a large size and because of the max width of the body copy, it keeps it close to that line length. And it has a healthy dose of negative space on the sides, which makes reading a dream on this site. So here's an example of how simple changes can make a big difference. This is a site I came upon and I thought that visually it was really great. It had interesting colors, really cool typography. But this section did catch my eye. When viewing on my MacBook, I thought that the font was a bit too small. And the line length looked a bit too long. So using the bookmarklet, you can kind of see that one speck of red. And you can see that the line length is a bit too long. It's probably about like 20-ish characters too long. So out of curiosity, I wanted to see what making the font bigger and giving the content more breathing room would look like. So the result, I think, is a bit more scannable. And it's a bit easier to read. With a few simple changes, just making text a bit larger and giving the text a little more room, it makes a big difference. The point in this exercise was to show how little changes make a big difference and nuance is very important to design. The design you choose shouldn't be obvious to your users. The best design is invisible. And making invisible design does involve a lot of planning and testing. Medium didn't just randomly choose the width for its content. It worked at it and it tested it. So this is an example of a design where it has type on the sides, which might be hard for you to read. And that's kind of the point of why it's here. You can kind of make out what it is. It actually is social media links on the right and I think the title of the article on the left. The rest of the site is visually stunning. The header text and all the main body text look great. But these random pieces of text on the side that you can't read affects usability because I don't know what I'm supposed to be doing with it. So it's just things like these that you should take into count because is that decoration or am I supposed to interact with it? And this is a good example of using a clean and consistent type choice to make navigation and comprehension easier. It's not the most interesting type choices, it's all the same type. But with the hierarchy that's there with the bolds and the larger sizes and the different colors. But keeping it in contrast, it's easy to navigate. And choosing typefaces is very hard and doing it with drastically different typefaces is even more hard. But it can be done. As always, this is completely dependent on the look and feel you're looking for. The amount of well-made typography in the world is near infinite. The only real problem would be payment. Some rules are to choose the same family with different styles, say a sans serif and a serif. They will match and will complement each other. Otherwise, using sans serifs or serifs as a body text is a tough call. Usually you pick one for headers and titles and limit the other for body copy. But this isn't a rule that is set in stone either and that will depend on the font and how your layout is designed. This is the last design example and this is an interesting design. It uses a mix of type and changes up the background. The big header is the more exciting choice of the serif while the body copy is just the simple sans serifs. The main point here is that the text contrast might be problematic because white on black very often is hard to read, especially at smaller sizes. So now we've gone through usability, we've gone through design. Now it's the fun part, it's cost. So cost is a big factor that keeps people from being more adventurous with good type. When anyone looks at type and starts to fall in love with some of the very unique sets out there, sticker shock will bring you back to earth. When you start to talk to anyone, let alone clients, about the price of fonts, it doesn't usually go well. So there is no way to sugarcoat it, fonts are expensive. There are less expensive versions and of course you can use the free ones. But sometimes paying for a font is a good thing. If you're trying to maintain brand recognition and want to have consistency, then it's worth the money. Some people may think differently, but I classify the location to obtain type into three separate categories. Each category has its own characteristics and reasons for being used. Whatever choice you make in obtaining the type, finding beautiful fonts won't be a terribly difficult task. There's a style being developed by someone that will fit whatever you're trying to design. So these different types are foundries, distributors and vendors, and open source. Type foundries create, publish and distribute typefaces, usually their own creations. Type foundries may also provide custom type design services. These foundries are only the scratching the surface of the vast amount of independent foundries out there. Sometimes the amount of foundries feels pretty endless and you can easily get sucked into looking through dizzying amounts of type. Each one can create different look and feel of type. So distributors and vendors are another place to buy fonts and I would categorize them as places that sell all kinds of fonts from different foundries. Some of the bigger ones, probably are ones that you've heard, like monotype, live fonts, font squirrel, you work for them and fonts.com. These distributors and vendors can have exclusive deals with certain types of fonts, so if you want to use them, you may only have one option. If you're unsure what kind of fonts are made by certain foundries, these sites are a good place to go and find a wide range of typography. Open source sites are a great and cheap resource for obtaining fonts. Most people are familiar with the most popular one, which is Google Fonts. So it may surprise you to know about other open source sites. There are a few other ones, but one of my favorite and the first one is the League of Moveable Type. And they are foundry that creates their own fonts as well as an educating platform about typography. There are other great resources out there. They may not have the depth of Google Fonts, but that doesn't make them a bad option. So you also think that the toughest part would be picking that perfect font. Beyond the simple idea of paying for a font is the confusing and dangerous world of licensing, the fonts. So licensing is, you think you figured out that it would just be simple. You just purchased a font and you could do whatever you want with it. Well, not so fast. With web fonts specifically, you can only use certain types legally on servers and online. So converting regular type files like to TTFs and OTFs is not only is illegal most times. So some licensing agreements that you, the thing that you sign when you purchase fonts have a limit based on page view, storage and other factors. And some even use tracking software and are, some are just based on the face system. A font license grants the owner the right to use a typeface in a specific manner, as outlined in the license. So every typeface comes with a license of some sort. And even those free online typefaces. The big caveat about font licenses is that every type foundry or designer has the right to create a license of any type. So it is imperative that as a designer, you read the user and user license agreement well. You can find the rules usually because they send them to you attached after you download or buy a font. So the difference types of licensing would be desktop and print, which is just a basic license that applies to most of the typefaces that come on your computers. And this allows you to use the font on your computer to make static images. Web fonts is what you use online. What makes it different is that these are formatted so you can use them online. It comes in the different formats of the W-O-F-F, W-O-F-F-2, or E-O-T's. And you need these so that different browsers can use the web font on each different browser. And then finally, open source fonts are among the top choice for digital designers. They're free to obtain, use, and share. Often open source fonts come with the ever increasingly standard open font license by SIL International. This license allows for many things that others do not. It can be distributed and modified. The primary rules for use are that you do not sell the typeface and that you put proper credit. So for example, in Google font licenses, it says that all the fonts are open source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use. Or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially, in print, on your computer, or on your websites. But what this also brings us into is the idea that all the other licenses weren't commercially available. We were talking about primarily personal use. So commercial use for typeface is a completely separate matter. And it should be handled with care. Even a typeface that's labeled as a free download may not always be free if used commercially. When working on projects for clients, the most common practice is for the designer to use and work with fonts that is licensed by the company. And this includes typefaces used for companies' logos. The thing designers have to be careful with is use. These fonts cannot be used for other clients unless they own a license too. So if you, the designer, are using a license from your own collection for a client, you need to purchase multiple licenses. One for personal use and one for the client. So just make sure to read the end user license agreement carefully. It's your obligation to inform the clients and then you've done your part. I know it might seem hard of determining how many page views your page could get or what the amount of traffic currently looks like. But a good note is if where you're buying your type doesn't have any of these issues spelled out, then it's probably a bad idea to buy something from them. All right, so now we're at the final factor which is loading times, which has everything to do with the technical side of the website. So it's gonna be a little technical, so I'm sorry if some people don't understand. If you've been responsible for a design and never took the ramifications of your design choices in regards to how the site would be built, launched, or maintained, this section is for you. I've been a developer who's had to take the font heavy design and develop the site. And when a site has four to five different fonts or has different type or type variants, it becomes hard to maintain from a performance standpoint. There are many factors to take into account, which could be file size, external calls, or battling poor performance due to the prior to. Before people get up in arms, I'm not speaking about understanding the technical nature of your choices. If you're not responsible for hosting the web fonts or calling them from Typekit, you're not gonna have to learn. What you should be able to do is know that using Typekit is an added burden to the site, and you shouldn't use too many fonts. It'll cause loading issues and potential text display issues from a failure to load quick enough. But if you're thinking of using three different fonts with three variants, you're asking to use nine different fonts. And you need to use nine different fonts, and that's a pretty big drain on your website. So are all these fonts 100% necessary? Can the design be done with less fonts or maybe different variants of the same font? And then you just proceed to make these appropriate changes before you even make the site. When using fonts, the solutions in regards to loading times and site performance aren't the easiest. These decisions should also be made in conjunction with the designing part. So you know when you've purchased your font, that you'll take it into account the service used for utilizing the web fonts. So this is one of the easiest solutions of is using system fonts. So there's nothing wrong with using system fonts on your website. Many websites use it specifically for the speed factor. One of those websites actually is also medium. It's any real issue of loading and performance. Cuz somewhere in this font stack is a font that will be natively available to a device that someone is using. Blink Mac's system font is Apple San Francisco, which is available on iOS, Mac OS, TV OS, and WatchOS. Segui UI is Microsoft's font used on Windows operating systems. Roboto is the system font used by Android operating system. If none of these system fonts are found, it will try to load Helvetica or Arial. And as a last ditch effort, it will just load whatever the sans-serif is available on that device. Sadly, if using a system font isn't a part of your design or you are required to use a specific font, the remaining options are a bit complicated but worth considering. This is the more technical part, so I do apologize. So font sub-setting. A way to make files load faster is to decrease the file size. The biggest way to reduce font file size is to cut out characters and glyphs that are unused. Font sub-setting allows you to remove characters and open type features from a font file that you don't need. There is an almost one-to-one relationship between the numbers of characters in a file and its file size. If you cut the numbers of characters in half, you will also cut the font size in half. Thank you. This is a great way to optimize a font and make it load faster. Though a word of caution, be careful and try not to subset too much. Because if you do, it will have a fallback character be the next character. So this is highly undesirable because you'll have a page full of the file that you want and then one random character who looks nothing like the rest. It's a really jarring experience that I don't think you want. Another option is a new CSS property called font display. So font display has five options. You can either use auto, swap, block, fallback, and optional. Auto is the default behavior and upon loading a web font, it will cause a flash of invisible text and then eventually load the font. Swap will render the first available fallback font and then swap it for a custom font when downloaded. Block will block the font rendering until the font is downloaded, which is very similar to auto. You won't be able to see anything until it loads. With fallback, the browser waits for about 100 milliseconds for the custom font to load. If not, it renders the first fallback. And optional is very similar to fallback, but the browser decides that after a short while if the font should be loaded at all. The support for this property seems pretty strong and it's available in Chrome, Firefox, and Safari, but it has no support in IE or Internet Explorer. And preloading is just telling the browser to preload the critical fonts and forces them to download before you even get to the page. Which usually saves you amount of time up to about a second of rendering time. So the last thing is when using web fonts is about hosting. There are two main options to host, which is self-hosting or using a service. Self-hosting, it's pretty easy actually. All you have to do is include the font file on your web server, after you've bought it of course. And it will be served on your site when a user arrives. Self-hosting gives you all the control of your fonts and your user experience. But this could be a good or bad thing. You can get as technical as you want and streamline the perfect experience, which includes breaking up files, so they load quicker or choosing to just subset some fonts. The advantages to using self-hosting is no JavaScript dependency, a faster font rendering, and no subscription services. Web font services can be anything as complex as Typekit, or as simple as using Google Fonts or anywhere in between. Both of these require your site or app to talk to something that is not inside your domain, which means it needs to make an external call, which slows everything down. As said throughout this presentation, sometimes using a certain font cannot be helped. But this means that you need to work within your limitations and understand the results for the end user. This is an option that is great if you're handing a site off to someone. The technical knowledge level is more shallow and changes can be made pretty quickly. Some other advantages are a wider range of fonts and it's easier to change the type face choice throughout the process. So keeping this in mind versus any extra download time may cause loading issues. Cuz everything has a trade off and it's just a question of what you're willing to accept. So now we're at the end. So some of the look back is the main factor in what makes typography so important is always the user. The type is there for them and to be used by them. It drives their experience and your product. Quick takeaways, usability is the most important factor of good typography. The ability for a user to use something or not is an important factor in your design. The difference between readability and legibility is vastly different but equally important. Without both the content is incomprehensible and wasted. More about legibility and readability. I'm not gonna bore you cuz you can read. Type can be expensive and licensing is very, very important. Again, for you yourself so that you're covered when you use fonts and that if you use them for your clients so that they don't get sued. And finally, I think, yeah. The technical impact of using design choices isn't always easy. Between self hosting or using a service. But there are many options and you can always just keep in mind the idea of performance and loading times. Thank you.