Lessons

Lesson Info

Design with Web Fonts

the next thing I want to talk about. And this is kind of moving into the last section here of this first part here, we're gonna start to talk a little bit about text. OK, we've got a lot to talk about a text because there's a lot to dio. This is going to cover Web fonts, icon fonts and talking a little bit about spg talking about dealing with faster ways to work, all that kind of good stuff. So what I'm going to do is I'm gonna take this this box here and converted to different colors to make it a little easier to see so we can have this, and I'm also gonna make it look a little better. I'm gonna change around a corner thing is too much, and they pull it back a bit. Okay, there we go. All right, s So what I'm gonna do is I'm gonna put a little text out here and talk about that when we work with text in a website. Text is king its content. Right? So it's something it's gonna be on the forefront of the information that we're gonna display mobile desktop, that type of thing The thing abou...

t text is that weaken these days format in so many different ways in the past. If we wanted put text out here, we have to, like, pick one of fonts, and this to me was amazing. But we can now pick any fun we want. And what we're gonna do is we're gonna talk about what's called hosted funds and icon fonts. These air a huge let me, first of all, get a little bit of text out here. Illustrator really doesn't have text generation. It doesn't have like a Laura Mattson generation. So I usually there's a plug and I've got that I could do that. I'm forgetting what it was, but I can find that the other thing is you can actually go. There are Lauren, have some websites where you can just copy paste a vatana content. I'm just gonna grab a little bit of content. And this is what I tend to do all the time. I was grab a little bit of content from somewhere else. Like, let's say over here. Maybe, baby, you can do it. Anyone like working with text in illustrator. Okay, so we got on pace that text in there. And of course you're gonna do that, aren't you? Okay, I work in a illustrator all the time. I don't know if you can believe that, but Alright, so I've got my text out there now. A couple things to deal with text that I think are awesome. Illustrator CCS and great features. If you want to, a lot of us work with text and you'll find that there's two ways to create text. There's area type on this point type if you ever I'm gonna my type two. If you ever click and type in, like, headline or something like that and then you go to resize the box, you'll see something like that, right? So that's actually called that technical point type. This is called area type. This works just like in design, if you will. So, area type is when we draw box and put the continent side. Also, it has a cool little toggle here, which allows you to double click to convert between the two, and I tend to do this quite often when we're dealing with things. So if I double click, it's going to say Let's go to point type And then I can size and scale and do my thing. I'm gonna get back where awas this When I also loves faras Web designs can really help a lot of us know that we're not going to use placeholder content to design with Try not to unless it's a wire frame or something like that, Right? But if I decide later, I'm gonna add text to this and actually real text down here at the bottom. There's another little widget. If I double click on that, it makes it so that as a type, it's just gonna grow the box, which is really cool. So that's also okay, so we've got some different things we could do. Here's forest type. Now, what I want to do is I'm gonna take this text. I'm just gonna bring it up. We're gonna start to put this under here. We're gonna make a headline and different features, and you pull this down with the text. I want to use a different fun. Obviously Now in illustrator, just like in a lot of other programs, we could choose the fop pretty simply. Just select the text and do it. If I look under here, You're going to see that we have all of our fonts listed now. Illustrator photo shop in design. As far as the creative cloud is concerned, they have the type kit integration it's called so we can use type fonts. Now, let me talk a little bit about hosted fonts for a second. This is really, really important. When we designed for the Web. Today we're not bound by three fonts or funds or something like that. We can use almost any fault we want, As a matter of fact, one of the big players in the market. There's a 1,000,000 out there. Adobe type kit is a font service, if you will. Okay, so what they do is they host your fun when we go to design, we can actually design with fonts That we're going to use on the site itself is my fact, we really need to so we can get things like line spacing and all that set, right? But the idea here is that when we designed we are in illustrator, for instance, or any program we're in, we're going to use a specific fun on our text. Okay, so I've got a font on there. If we're gonna use a let's say, like a type kit or other Foncier's like Google fonts, etcetera, there's a 1,000,000 out there. What we tend to dio is this. This is out on the Web, a World Wide Web, uh, who calls it the World Wide Web anymore. Anyway, I'm just a totally showing my hate here around on the Internet, and we have, like, let's say, the type kit website, and they have a server that has all of the fonts on it. Let's say that's a folder and there's all the funds. What we do is we either sign up for the service or like Google fonts. We get him for free. We can take that fun, and we can actually download it to our hard drive. We can then use it within illustrator and design with it. When we go to build our website. Here's are actually website over here. Let's say okay, and let's say that this is my Web tool I'm designing in and there's the same text. What we're gonna do is we're actually going to either just simply connect to that fonts folder up there and say we're gonna grab those fonts when somebody looks at it or we do the same kind of thing. Depending on the service, we will grab the fonts, bring them down to our hard drive, connect them to our page. And these fonts are gonna get put up on our web server. Okay, Onto our host. Essentially. So there's two main ways to do it. You can have to use your own fonts and put those up on, like go Daddy or whatever. Or you can use the service like a type kid or Google etcetera, and you let them host the fonts and they just simply the funds just get grabbed when we need him. So as we're designing here and we put them in there, somebody that goes out there and they're looking at it on their machine, they're like, there's your website great. When they first opened the page, it's either going to go out to the font service, grab the font, temporarily download it and cash it here. It's actually if we have our own fonts, it's gonna goto our font server. Let's say that this is actually our website right here. It's gonna go to our website. It's gonna grab that folder of fonts and bring it back over or that single fund. Bring it over and temporarily up them. Use it. Okay. This is essentially what a hosted fought does. And I hope you can kind of understand this tangled mess I just drew. But hosted funds are really important and something that we use all the time. The thing about hosted fonts is that we also now have what are called icon fonts. And we're gonna talk a little bit about those two icon funds. Work varies. They work the same way. Okay, but what kind of discussed those when we get over So type get is one example. Like I said, kind of elephant in the room. We also have Google fonts, that type of thing. So if I go to Google fonts and look at that, everybody knows about Google fonts, OK? Google finds are free to use on your certain your sites. And the idea here is that they give us the code. We put it in our site. We use it. We're done Pretty simple. The thing is, what if we want to design with a Google fund? How do we get the actual fun. That's one of the big keys, because they don't give it to us. Okay, well, if you're using type kid, if you have creative cloud, you have access to the type. Get fonts on your desktop. That's easy. It's done. But that doesn't include all the Google phones. What I tend to use is I tend to use something called Sky Fonts. OK, there's this little app called Sky Fun and let me take a look at about Sky found. There we go. You can find that it's actually part of monotype, and you can download. It's a free little app. There's a bunch of these types of APS, but what this does, is it basically just let you go to the Google Server? If you will grab whatever funds you want, download them to your desktop, your hard drive, use them in your designs and then later you can also use them within your website. Okay, and the way use them on your website is the way you normally would copy code and do that. But for this it's really pretty cool, because what I can do is I can go out and say all right, Let's do this. Let me go manage my services. You'll see that we can work with Google fonts. That's like the easy one. It's all there. You can also work with funds dot com, my fonds linotype, all these. Some of these have to have a subscription. That's fine. But if I go to Google, finds here and take a look. If we want to grab more Google Fonts is just going to say, Let's go find him. Can't do it through this I will say Let's go find a month fonts dot com and you'll see here it's gonna open up this. I love this because it's going to say Let's batch install the top 50 Google font families that people are using or 10 or 20. That's actually pretty cool. That's what I did, And it just does it downloads that you can use him just sky fonts, cost money. Is that free? France's free little application Just download and you can use it. Yeah, you know, obviously it's kind of part of the fonts dot com service, which you know, and they say you can use theirs. But I used for Google fonts, so it's pretty cool Yeah. So you do that, you get them. And then what we can do is once we actually have the Google fonts stalled and you'll see that I can see them all right here. When I go back over to my front list, I've got, like, Able and Lehto and all these different ones. If I got a little straighter there, there. So if I go into my hard driver Sorry, an illustrator here and I select if I go up to my font up here and I go to type in, let's say, like, Lato there, there. So just grab. And it's letting me design locally, which is great. And then I can kind of use those. No, I'm not gonna mention your show how to use them on the website. Hopefully, that's something that's a different story. But we can at least design with them. Okay, Now, one of the issues with designing with those types of fonts. Um, you know what? I'm not gonna go there. That's more of a developer thing. We're gonna skip that. Forget it. Designing were good. Okay, let's talk a little bit about what are called icon funds. Thes these air huge And this is something that we're gonna use quite often today if if we go to different websites on gonna probably bust on this, but you're going to see like let's say you go to this site, the type get site. If I look right up here, you're going to see we have, like, menu and we have the famous hamburger right there. We call that we have the whole signing guy and we have Adobe. Okay, now these right here in the past, What we used to do is we used to make these into, like, ping files or gifts or something like that. That could have transparency. And there were little images. Stick it on the website, done. We even used to create, and we still do this for certain things. But we used to create a big old file an illustrator and put like 50 million icons on it. And we just say that and use that and kind of put it all over the place. These days, what we do is instead of using an image, necessarily will use what's called an icon font. Sometimes some people will also use what's called SVG. So scalable vector graphic. So there's two things that come into play here that we can talk about. Now, let's let's do this. I'm gonna talk a little about a bit about what an icon font is, and then we're gonna talk a little bit about how we can use them with an illustrator. So as we're working with our tax and we want to able to do this type of thing, we want to build a work with these now there. This is an awesome sight. I love CSS tricks. He's done a great job. A lot of great content appear most of its free you can look at. He's got this thing here called Icon Foncier Awesome. And this is just something that he did a test. And you could see down here that these are actually little icon sitting out there and you look at I mean, at first I thought, Well, that's just a little picture of a plus, right? No, this is actually it's still text. Technically, it's a font that has the icon built into it. Now the great thing about these is that since it's a font, we use a character to put this specific thing out there like the plus, or that, you know, little bubble. But we can do things like use font size to change the size. We could go in and do things like change the colors really easily. We can even have, like, shadows and animations and all kinds of stuff. Okay, the idea is that it's a font that loads, and it's automatically gonna show when you put the content in there. Now, how do we use these? Okay, how do we get these in there? Cause illustrator, really? There are some a lot of us who used to use, like, web dings or stuff like that, you know, use those anymore. But here's what we do. If we want to use icon fonts, I'm just gonna point a couple different places to find him. There's a 1,000, out there, but one of them is called font. Awesome. Okay. And it's kind of awesome. The idea behind this is, you know, they actually give you the fun. They give it a whole fun, and they say Here, use it. It's free. Okay. And if you look out, you're gonna see Okay, let's download it. So if you come into download button right here. You just download it. It'll take a few seconds. It'll download it and what it does, let me just show you this downloads a little zip file and I'll slap this over here and I'll open it up and take a look inside. And this is kind of the interesting part. This is sort of like the man behind the mirror of the person behind the mirror. You're going to see that the idea behind this font is that it's not just giving you the fought to design with its giving you everything. It's giving you the font design with and to use on your site. Okay, so if I look in here, you're gonna see that actually has style sheets or styling for our website. We can just copy paste this into our style sheet, and we could just go use the fund on our website kind of cool. We also have the fonts right here. And these are the font files. What's really crazy about web funds? And this is kind of threw me when I first started working with them. Is it we don't just take like, a true type or an open type thought and slap it on a website. We're done. You can't do that because there's so many different operating systems browsers, things to think about some support, certain kind of find some don't. So we actually have to supply at least three kinds of funds. Three. Found formats to get a single fund on the Web toe work. Some people supply four for like Old Fire Fox and different things like that. But we have E O T svg True type and UAF. It's kind of crazy. So these are the ones we get, and what's awesome is they give it all for us. That's cool. Now, if you want to use it locally, you'll notice there's our friend. The open type fund. Weaken. Just double click to install that or the true type, whichever one you want. Double click to install, you'll see. There it is. Install font click go. You're done OK, pretty simple stuff. Once you install it, you can then use this particular fund within, and this is the crazy thing about using these. It's a little bit. I'm not going to be difficult, but it's actually a little bit of challenge to it. I go back over the illustrator. Let's suppose I want to do this. I want the operate current hunt corner on my site to set up some social media icons like Twitter, Facebook, etcetera. What I'm gonna do is I'm gonna create a text box. Little box? Yeah, I got be careful by drawing inside of something else, and I'm just gonna go in and use the phone and type it in right now. What I need to do is with the cursor in there, I'm gonna go up and select the actual fun. I'm just gonna type it and make it easy. So it's called font. Awesome. There it is, right there. So selected now that the key here is that we actually have to use glitz to get this to work. So if I go to type and go to lifts, got open the cliffs panel if you just start typing in text, it's probably coming in little boxes. Nothing's gonna happen if I go to Google, ifs. You're going to see a series of the characters that we can use here. And there's there's a whole bunch. Okay. And if you work with bliss before it's pretty simple, you're just going in and doing it. So, you know, I can go in and say, Let's find the Twitter. Now, the problem with this one is we can actually sort with this. Um I can't believe I'm actually gonna look for this. There's Facebook Twitter so I can double click and put it in there if I want to. There we go. I put a space no double click Facebook. I'll put a space. I can double click, like email or whatever we want. We could put all their stuff in there and you're gonna notice that it's putting the icons out there. These are not all the icons that we can use, though I'm pretty sure I'm pretty sure there's there's more than we can use. If you want to see all that the icon front has to offer. Here's what you can do. If I, for instance, fun, Awesome. If I go up here, you can see that we actually have the icons listed right here. I can just click on that and you're gonna see down here that check this out. There's I mean, this. This is how many icon funds they actually have in this single funneling us. So they're going got tons of these right now. The thing is, if we want to use thes actually on desktop, if you wanna put them a desktop, going to see right here need vectors to use on desktop. Check the Cici. So I'm gonna click on the teaching. A lot of these work this way, they'll say, Here's the desktop version that you can use and here we go. Here's the T cheat. We can use now what I tend to do, and this is probably for me. It's the easiest way. But if I go in here on, I search for let's say, what's another social we got Twitter. Facebook. Lengthen WordPress. See? Let me just do this for quick. Okay? Um okay. Back there's There's Lincoln. Okay, Lincoln Square. Here's what you do. Let me zoom in. You could try and put in this little character thing, but I would just do this. Just select this weird little thing here. Copy that. Copy the actual icon, go back over, illustrator, and then just paste and you got it. So it's pretty easy stuff you can also use. Like I said, we actually have styles. We can use with this. We got a lot of things we can work with. But this is one way we can get the icon funds and these a response so I can go in and change sizes. I can apply colors that can do exactly what I need to do with these to make him look the way I want. So I go with white. Maybe there we go. I would you like a write a line, that kind of thing, and I'll set him out there and we've got him. Okay. Now, if you want to adjust and use your design magic Teoh, change spacing, leading Kerney tracking all that kind of stuff based on shift. Go for it. That's what we're gonna tend to dio. Okay, Now, the interesting thing about these is if you look at him there looking kind of rough, right? You're like, Oh, wow, what's going on there? If I go and say, Okay, we're in pixel preview. That's great. But if I zoom into these and take a look, it's not gonna look that way in the web. Okay? It's rast arising to the screen right now, but it's actually using a font which is technically vector. Okay, so it's gonna look really pretty good so I can find so important something that we're going to use quite often really awesome. Other things that we're gonna work with as far as kind of setting things up and this is gonna help us in our workflow. That's something that we need to consider. As we start to design and work, we're gonna use styles a lot. Okay. As we start to set up content, we're gonna use a lot of styles. So what we tend to do is we tend to use a lot of paragraph in character styles, and I don't know how many of you have actually worked with these before. I'm not gonna go crazy with them. I just kind of want to show a little bit. But when we set up formatting to make it easier so that you can go across the different designs without having to reinvent the wheel or change styling a lot slowly I can come under window here and go to type in. Illustrator has character and paragraph styles just like in design. If you've used in design before and if I got a paragraph styles here, you'll see that what I tend to do is I tend to set up on My designers well tends to set up a bunch of designs or styles rather that match the content. So if it's a heading, we call it heading one or H one. If it's a subhead, it's like H two h three. We try and follow either what it's used for. Internally, we have this naming system or we tend to map Teoh html tax, that type of thing. The reason why Sometimes I have my designer math map it to an HTML tag, and I just mean, name it in HTML tag. It's all I mean is because if I'm going to develop the site, then I know that Oh, she's thinking this is gonna be the main head, the subhead etcetera. OK, so, for instance, if we want to put a style in here, I would just say Let's create a new style. I'm gonna double click to name this, you know, And this could be, you know, Peabody whatever on a lot of times will actually put sizing different reference markers, something to tell what it is and what it's used for okay, like this is 12 picks. You could do like 12 on letting you know, however you want to set it up. But this is going to allow us to work much more effectively. That's actually one of the best things about these. So we set up paragraph styles. I'm not going to go through a bunch of these, but we set up headings, paragraphs, links, all kinds of stuff. You can even set up styles if you want to. For your font icons up here. So it's gonna pick the right fund for you the right size, etcetera. And then we're just gonna go in and actually put in that cliff put in the icon itself. These air really gonna help when suppose that we have, you know, content across and we're going to, like, copy paste, but content across our different designs, it's gonna help us to make sure that we have consistency. That's the key. OK, now, sometimes you gonna find it like I know that a lot of people when they go mobile back in the day, we used to say that mobile was more micro. I mean, like, it was just everything if you looked at websites back in the day. But like I, I had to, like, strain the look at the content, the text. These days I've been looking a lot of sites, and people are using, like, 16 pixel for flat size. And you know things like that. They're using a bigger font size using a font size that kind of matches desktop and tablet Just because, you know, we have less square footage, but at same time you gotta be able to read it and have a good experience doing it. Um, I actually went Teoh huffing, huffing post Huffington post the other day on my mobile device and I was looking at article, and there were, I think, like eight sentences fit in my screen because they made the fonts a big, But I kept thinking, I can't you read this? I can just, like, quickly run through, So it's something to think about. We might make separate styles for certain devices like desktop headline versus a mobile headline and kind of separate them that way. Okay, All right, so with styles, fonts, different things like that, we've got a lot of things that we can work with the thing about fonts that I need to quickly mention is that it's not going to snap to grid, obviously, because it's using a fun. Unless, of course, you decide. Teoh convert the outlines with a big object for logo or something. Then we're gonna snap to grid, most likely unless it screws it all up. You gotta look at it.