Lessons

Lesson Info

Starting with Type

Andy, when he introduced the idea of a style tile and sort of that structure of that style tile, we were beginning to be introduced to as designers, this is idea of design as a system. We talked about, a little bit earlier with the idea of atomic atoms, molecules, organisms and we saw in style tile, now it's colors, typography, image sizes, grids. These abstract elements, along with more concrete elements, UI elements are what we're going to assemble and so again, we've got to get away from the idea of designing pages. And what we're actually doing is designing a set of variables. Does everybody understand what the idea of a variable is? So it's like, a specific color value, it might have a name, but then that name is assigned to a specific hex color, that's a variable. How these variables interplay with each other, how our atomic structures interplay with each other, the thinking behind that, that's where real design starts to happen. So, let's step back and let's take a look at a def...

inition of design system. So a design system is a visual design system is built out of the core components of typography, layout, shape, or form and color. These concepts, design decisions or rules, created around the core components are used consistently across your product to create a cohesive feel, whether it's form, whether it's from one element to another, page to page, or viewport width to viewport width. Is a great article by Laura Kalibag at 24 Ways. And she really taps into again, where we are currently in with response of design. We know that we can't design a page, because when it gets smaller things move around. We need these guildlines and a lot of that has to do with the fact that it's not just what our pictures look like, it's about our user's experience. So, a design system focused and centered around the core user issues and problems and goals is going to lead us in the right direction. So again, let's take a look at what stays the same, what changes. Above this section, what stays the same, we can say this is mobile. Underneath, what will change, we can say that's kind of everything else, right? So mobile first, my typeface, my base units, my color, my content, we'll get into definition of a base unit shortly. What will change, my grids, how many columns I have, my layout, whether or not I have a thing called a sidebar. I love the fact that sidebars more and more teams I work on, you can't even use that word anymore, because it doesn't sit off to the side on a great number of websites. We have to find new words to describe these things. Also changes is font size. This big header that I have, that looks so great on desktop, kind of gets crushed when I look at a smaller screen. Line length, how horizontally, how far along the screen I have to read before I reset my eye and read again. there's one rule for desktop there's another rule for mobile and then line hight, which is again, the gaps in between my lines of text. So again, leaning from Andy, thanks so much. Simple statements first, type is your voice. So as far as your brand is concerned, as many things that change, time stays the same. People read your copy, again, images fail, video fails, all your fancy JavaScript fails. Type, being small file size, can get through a lot of tough connections. And when they read, they hear character. Maybe, even as you've looked at these slides today, as the fonts have shifted on some fundamental level, the voice that's reading them to you, changes a little bit. This is your brand. Little decisions, like blocky type, may sound more formal and sort of more powerful, where as thinner whispier type has a more traditional sound to it. The decisions you make here, in the font selection process, are gonna carry-over through the whole of your project. Type is hierarchy. Again, question of content, visual hierarchy, just like this slide, that clear messaging on top, that secondary messaging underneath, some design decisions were made to clearly define primary and secondary messaging. This is gonna carry across the whole of your design. Type is scalable, again, performance wise. As displays change, we talked about the fact that we need to have retna images. The good thing is, more and more fonts, most fonts will scale and look crisper, they don't look worse. Them fonts actually got like a bump up, when displays bumped in resolution. Like yay us, right? So, and we didn't have to do anything different. The information was there all we had to do was made that right selection early on and pick the right font for our brand. But it wasn't always this way, right? We didn't always have all these choices. Back in the day we only had these few. Web-safe fonts, right? They did allows us to make some basic decision. Modern, san-serif, serif, fonts. Does everyone here understand the difference between serifs and basic serif font language? Okay cool. They allowed us to make some basic decisions, but it was still kind of limiting, right? And unfortunately, a lot of people, a lot of designers who worked in print, say web design as, it was just emails, right? They were just HTML emails that were kind of a pain and they weren't seen as a real form of design and something happened like browser makers, got it. Everybody got up to speed. And a simple rule called at font-face brought real type faces to the web. And so now you have the biggest font houses. Mono-type, Who-fleurco, these fonts are like the most respected font makers and they're readily accessible online and can't be sort of like, pushed out to your website and whatever form it... I personally, was kind of scared when fancy fonts came online, because I made a lot of really tachy raver flyers back in college and I know what free fonts looked like and I thought, oh god, the internet is going to be so tachy, but luckily, we have services that do a little bit of the curation for us. Services that say, you don't want to use that font with that font, right? These are legible fonts. These are good headline fonts, these are good body fonts. So we have hosted fonts. So again the CSS at fontface at-rule allows us the pull in this greater variety of fonts. Again, this brought real designers over to the web, they were like, hey wait a second, there's something here over here. I actually have choice, I can actually dial the details in. This is kinda nice. And so you either had this third party that's gonna help you with this service. Its gonna serve these fonts for you, the same way Youtube serves video and you don't have to serve video you kind of embed it. It's kind of the way hosted fonts work, it pipes that font over to you from another server that has speed and dedicated band width. Meanwhile, you could also buy the font and you could host it yourself. More and more projects that I work with, it becomes more predictable just to host the font ourselves. That way, and again, it goes from project to project and this is a conversation that you're gonna have with your developers. You should know that there are options and you should go to the conversation table, being aware of these options and talk out what makes sense for your product. Andy mentioned this earlier, it's the last thing I like to think about. End user license agreement, licenses. Just because I can have this super fancy font, doesn't mean I can do it legally. It's like legal text. But the idea is similar to photo licenses and royalties. Like this has always been the case. Font makers are software makers. They're our friends. They're makers of things, they're craftsmen. This stuff took a long time to make and it's hard. So we as designers, need to actually buddy-up with font makers. We need to respect this, we need to pay for our fonts. Like they're making us look really good. You know, they're making our lives really easy. So we need to champion for them as designers and make sure this at the top of the list of things to do when I comes to working out which font we're using. And a lot of these things are gonna have to do with how much traffic do you expect the site to really have. Again, smaller brochure sites, you can get away with using sort of a higher resolution fonts, but if you're dealing with these larger mammoth sites, that don't necessarily generate revenue, but hit a lot of people, you're gonna use up your views really fast and that could lead to sort of cost overage. So you want to do your homework and make sure what the limitations are. There are a couple different models out there. This is a new business model, font makers are still working this out. There's no one way to do this. We'll look at one method that Google uses, but again, it either comes down to hosting yourself, or subscribing to it, streaming it in, right? Buy and download, you buy the font once, you host it on your server and you're good to go. A subscription model, you pay to have that font piped in and you pay a monthly fee. Usually the subscription models have more aggressive view limitations on them and because you're dependent on another server, the pro is, you're not responsible for speed, which is good, but you also have no control over service outages, which is bad. So, depending on how responsible your developer are, they may want to take them on themselves, but then again, there's also services like Google, which we'll look at all free, all the time, everybody's happy. So where do we get them, we have lots of options. Again, we mention Google fonts, which is a growing collection, its growing all the time. Subscription models, webtype.com, typekit.com, mytype.com, and typography.com. I use both typekit and typography.com a lot. Buy and download, mytype, fontdeck, and fontshop. Again, these are great resources to check out, and I'm of the opinion that when you're in the design exploration phase, I don't really care what they cost. I'm the same way, I'm doing collage work with visuals, I want to be inspired and so usually there's a cost effective alternative to something that's like the Maserati. There's a cost effective alternative to that high-end thing, but I want to show my client the best, I want to show my client what inspires me, what sort of like gets me going. So, when I'm in the collage, like there's a piece of software called skyfonts which is for monotype, which allows you access to like everything, from everybody and you have it for like 30 days and then as long as you're not publishing it, you can do whatever you want with it and I find the whole process like fonts use to be like this inaccessible thing, but now font makers, again, are developing new business models to work with us, because we're their salesmen. As designers, we are selling their software and I think that that's a really good thing and I think that's a really strong relationship that we can develop. So, nuts and bolts of type itself. What's it made up of? Some basic principles, size, character size, line height, area above and below a line of type, line length, the number of characters that cross a window. We'll go into more detail around this, but just an overview we'll be discussing in this segment. And then we have EMs and grid, so how do we measure these things, right? We can't use pixels anymore, remember, we threw pixels away. Ah geez. And percentages, while some people use them, I find them good for layout, but they don't really jive with my thinking when it comes to typography. So there's a new measurement system called Ems that we'll talk about in a little bit. And some of those measurements that we generate from our type system, we're gonna be able to use in our layout system to bring our whole layouts some harmony because we're gonna see visual repetition. And the last piece, I guess again, like media quarries where the most abstract part of responsive design, there's this idea of modular scale. And modular scale in essence is the way I use to design a website, is I use to pick my H just visually by how big was too big and I picked it and then I picked another size and another. I did all of this by eyes and by gut because I again, was having an emotional reaction to the things I was making, but I would hand my comp to the developer and they would tell me, I'm sorry, you have 34 font sizes in four designs and we can't do that. So modular scale is really cool, because as long as we only have to come up with three numbers, not 34 numbers. You come up with three numbers, base font size, the area around the type, and then this ratio and that ratio is gonna output, I'm gonna show you a little app called gridlover that as long as we decide on these three little numbers, we'll get an entire family of font sizes and visually they'll all go together. So that's all really cool stuff. So text sizing, again, this whole concept we wanna like tell you what we're about to do and then sort of scale it back to the beginning. So it all comes down to text size. When we're first laying out a design, the first thing I do, is I establish variant text sizing and that begins by establishing a base font size. For each significant piece of text, I push that test up and down in the scale and I begin to create contrast and these are the seeds of my design system. The how we get here, is what we're gonna talk about in a minute, but this is the text size part of it. And again, these are just definitions. Line height, is the space around this type, right? You don't want things just stacking on top of each other and you can't apply necessarily the same line height to everything. That stuff varies. So the line height works together with the font size in order to begin to give us this visual linear repetition down the page. This is the concept called vertical rhythm, which again, we'll get into how we actually generate that in a second. Line lengths, so we're gonna bring up Robert Bringhurst a couple of times. He wrote the The Elements of Typography and he laid down the law and told us early on that the maximum comfortable line length that I can read again, across the page on my word processor document before it hits the wall and drops down, is 66 characters. This has sort of been updated. This was sort of an older rule and its been updated to 60 to 75 characters on desktop and that rule is gonna change in the responsive world, right? As screen get smaller we have to actually reduce that character count and do we have two parameters we can work with. This 60 to 75 for desktop and this 35 to 40 for mobile. But how do we control that line length, like practically how do we control it? We control it using the max width, which is the container that the type sits within. So we basically state, we want this page to grow, do you see how the logo and the navigation continue to grow? Like we want this full screen experience. We want these subversive experiences, but we can't sacrifice readability. So, it's our responsibility to tell the developers what the maximum width of those container can be before things start to break down. So again, we can still have full width experiences, but our text is a unique entity on the page that needs to be treated appropriately. So how do we measure all of this stuff? So we've looked at, and again, we're gonna look at how we generate all of that stuff, so we'll be back, we're gonna take a trip around the sun. That's a year, okay. Our friend the browser defaults to 16 pixels. We can put that in the bank. It's really good to have a starting place, it's really good to have a starting place that's global so we know that we can make predictable assumptions. What we're gonna do though, is take this browser default of 16 pixels, when we're measuring type, and say that 16 pixels equals one EM. So one EM is a unit of type and now instead of saying 32 pixels, I'm saying, two EMs, because those numbers grow really quickly, and really sporadically, as we begin to contain them, it sort of reduces it, because what we're talking about is we're talking about vertical page units. We're not talking about pixels anymore. We're talking about a unit, something more abstract. It's changing with pixel density. We talked about this resolution stuff that's happening. It's not about how many pixels, its about how many units of type are we talking about, right? And so the EM to pixels ratio can change from device to device, depending on what resolution it can have. So as long as we stay in EMs land, and we're previewing it in our browser so there at 16 pixels. We're gonna let the software makers do the rest of that math for us. The other cool thing about EMs, again, is their relative to their containers. So this states that, as long as my container element with my type is set to 16 pixels, I'll have a predictable measurement. There is one caveat to this, I know some of this stuff, there's a lot of numbers floating around, but it's all for the greater good. So the page has a 16 pixel rule. It says, everything on this page starts at 16. Now I can set localized rules for components, I can say this component I want the type period to be finer. So I still want to use my EMs rules, but I want this container, this certain module, to have a local rule of 12 pixels that way I take all of my EMs measurements and now refactor them with this new base unit. Does that make sense? Kinda, sorta, maybe? The overwrite to this is another measurement that we're gonna look at later, which is called REMs. This is great, EMs are great when I'm dealing with layout rules. I want my layout elements to be flexible. My type on the other hand, I want my type to be predictable. I want to be able to push my type around the layout and know exactly what I'm getting. That's why I use a REM measurement, which is a relative EM, which skips out of the container and always listens to the page elements. Even if I have a container that says, everything in this container needs to be smaller, right? I said so, I'm 12 pixels and you're an EM. My measurements, now I'm a REM, I don't have to listen to you. I listen to the page. So it super-sees that bossy container, 12 pixel guy who's just a jerk. So all of this is to say that we don't have to make up every font size. Once we establish our base font size and understand a ratio, we can get a family of type. But what is a ratio? Again, we've talked a little bit about ratio, but what is a ratio? So, the classic typography scale is a harmonious progression of font sizes like the notes of a musical scale. Robert Bringhurst invented the original type scale which has been used for years by most typographers. These proportions not only seen to please human beings in many different centuries and countries, they are also prominent in nature far beyond the human realm. So its not just an architecture, but we refined some of these proportions and these ratios in nature. But the original typographic scale, originally had a slide here, its basically like nine, 12, 16, 18, 21, I'm sure the chat room is gonna blow up because I totally got that wrong, but its this preset of numbers, its a scale that Bringhurst worked out in a specific ratio. What we don't want our designs necessarily look like every other design out there. We want our own scale. We want our own ratio. So Tim Brown invented an idea called modular scale, which says, as long as I know my type size and my line height, I can adjust that ratio and I can get different musical variations. I can change the tone of my type system. Again, you're a designer, so gets into not a quantitative, but qualitative reaction. This is the weird place where you begin to mix those things together. You as a designer are still an aesthetic creature. You're client needs you to respond accordingly. So how does that all happen? I love this drama, bam, gridlover, okay cool. So let's take a look. So we're going to assume some basic values. I'm gonna change them in the browser and you're gonna see sort of how this works. So this is gridlover. Open source project, I can adjust here the three values, my base font size. I can increase that, or decrease that. My line height, which is the space around my type, can increase that. You can see the grew segments, the gray bars grow and shrink. But again, 1.65 looks pretty good, 16 looks good. I'm gonna bring this down to 15, just to be different, just because again, I don't want my font style to be confused for others, I want to run experiments. That's my job as a designer, there are defiantly some safe defaults, but I encourage you, again, to have as much fun as you can designing a font system. Have fun here, like I really enjoy playing with these numbers and sort of seeing the results. The last thing you can do here, and this is the sort of magic number part of it, is these are the ratios, right? So again, these ratios are based on classical musical notation. And what they are, is they're a seed variable. They're a little piece of randomness, right? Structured that's then gonna be fed in to our modular scale equation and output the numbers of... So this is what happens when I shift from a golden section, which is a classic ratio to say a perfect fit, right? Bumps those sizes down, but again, you can see the line height stays. A minor six and again, let's just take a look at a double octave. Whoa. That's crazy. You can see magazine sites are graphic sites. You can see the drop off in switch between these font sizes becomes more extreme. Line height again, I'll dial this in. Let's go with the perfect fourth. And you can see it's the relationship between the sizes of the font that's changing. Once we've set the global variables, the line heights are staying the same. The core font size is actually staying the same. What's changing are our headers in relationship to that core font size. Now the cool part about this is it outputs this good looking stuff and this good looking stuff is usable, optimized, I'll tell ya, as a person who does this everyday, that is some good looking CSS. You have the option, again, to output this in a variety of formats depending on what your developers need and you can actually switch to EMs, if you trust the local container measurement, or you can switch to pixels if nobody's looking. But what I love about this tool is again, and you can actually take these numbers and you can put these numbers, if they're in pixels into Photoshop. Its just a calculator for a scale. And your Photoshop comps are gonna look better because you used the internet for what it does good. It does math. So I went ahead and took the same demo and we we're talking earlier about why this is not Dreamweaver, codepen is really cool because I just recreated gridlover in codepen. So I took over everything it output for me and reconstructed that here. And so now I have a responsive type system in codepen. I can edit these variables. Let's say once I get it over here like I change my mind. I want to sort of dial in some of these variables. Which you can't do in gridlover. I would not suggest changing your line height stuff, because that's your sort of visual rhythm. That's sort of a key value you sort of want to keep. But as far as font sizes, I would encourage you to sort of nudge this stuff around. Again, depending on maybe how many characters along a certain line length or how it looks in a certain view port. All of these variable are accessible to you. And I found that several times, that just because the math says so, like my job, a lot of times is actually to work between a high-end print designer, who's use to designing for print and then a development shop who's use to really kicking out product. And so I'm this conduit that respects the type system that they've generated and their type system doesn't actually match all of these programmatic type systems. Its starts there, but they've made instinctive decisions to shift that stuff and I have to respect that, you know? So the good news is I can make those edits here based on the feed back I'm getting from the designer, being this sort of front-end conduit that goes back and forth. So again, let's take a look at our type system and then just review what we output. So by inputting those three variables we output this. We got header sizes and here's the range of header sizes we got. We got this thing called measure, this 760 pixels measurement. That's using Bringhurst's equation and telling us that's the maximum width you can have before you hit this 60 character limit. So, they've helped us out and done that math for us, which is really cool. The other thing that it does, is it gives us the seeds of our vertical rhythm and basically vertical rhythm are these elements here. This margin above, this margin below and you'll notice that that measurement, is equal to line height. It uses the line height measurement globally everywhere. That is our vertical way of reading up and down the page. It does not change from element to element. That measurement is universal. Which is what I say here. So yeah. Vertical rhythm, line height, the same thing. Its our structural component in our layout. Its something that we're gonna repurpose later on. Another tool, that we don't really have time to dig into right now, is Typecast. Typecast is a great tool for experimenting with creating style tiles in the browser. But the idea to remember here is that the measurements that you're outputting out of your type system, are variables and numbers that we can use when we go to establish our layout, which we're gonna get into in the next presentation. So again, things to remember, type is the voice of your product. Your base type size, browser's default to 16. We're now in the world of EMs and we're moving away from the world of pixels because of responsive web design and pixel density changes across devices. You're type scale, is better without you setting it by eye, but starting with the system and letting the system output the scale that you then could edit if you see fit. These numbers that you've generated here, are numbers that you could use later on in further experiments in layout. So again, taking the math that we learned from the last segment with working with type, I created a couple of more codepens that again, show me just my header sizes extracted from that core content piece. I like to judge my content type scale around a representative piece of content. That's why I love the gridlover model of sort of mixture of headlines, subheads and body copy, but to do a conformation, I always do an input that again one more time just to sort of see my headers laid out. What we've done here is I've taken the sizes that we eventually came up with for the mystery of space website, I've imported those into codepen and I've added a break point which says that a certain size, this being the desktop, set of font sizes, I want those font sizes to contract again. So before, we had talked about media queries, we had set the variables, the unfortunate part of gridlovers is it only outputs one set. So we have to basically output two type scales and then weave those two type scales together. Some of the CS behind that is a little more advance so I don't want to over burden you right now, but I do want to let you know this is available as part of the bonus material and so these links are readily available if you guys do want to do some research, I encourage you to sort of, again, explore and play, but I did want to merge those tow ideas for you and let you know all of that work that we were doing with media queries and the work we're doing with modular scale, again, both fairly abstract complex ideas can be merged together and you have access to that material if you want to sort of dig into that, or just grab a front-end developer on Craigslist and have them translate it for you.