Lessons

Lesson Info

Adobe Typekits

all right. When we left out, we were browsing through the wonderful, wonderful realm of type kit. And again, you access that by going to your creative cloud at clicking funds and choosing browse fonts on type kit, and it opens up in a Web browser. So you do need a live Internet connection for this to work the fields on the right hand side or buttons rather or the filtering criteria that you can use to drill down to just the font that you're trying to find because their doodles and copies of them. So you may not have time to go trolling through each and every one, though it is a lot of fun, I will tell you that. So as we turn on the buttons over here on the right hand side, then we begin to see fewer and fewer choices over here on the left, and I think the cover just about all the options. You got a couple more options down here at the bottom, right? Do you want standard copy or caps on Lee? Most likely, you'll be going for standard copy. Indie want upper or lower case numbers, so the n...

umbers over here on the right, which are a little bit uneven, are like old style numbers. They're more visually pleasing when you've got a whole block of text. You know, when you put in numbers inside of there with a whole bunch text, most people just use the regular numbers. But if you want to make an impression when you're setting, ah, text on the business car, these kinds of numbers really look professional. So they're they're very nice. So keep that in mind. And again, if you turn on so many buttons over here on the right hand side that you're not seeing any results on the left hand side, then just start turning off some of the buttons they turned on. So I'll turn off the with and the properties. Now Adobe has put together some pretty amazing lists of fonts to help you discover fonts that you might really get a lot of use out of. But this is also a nice place to go when you have no idea what you're wanting to find. You just maybe want to see what's out there so you can click browse lists and the list that we're gonna see have themes So we've all used Helvetica. What millions of times. So Adobe has put together a list of alternatives that also work well in place of Helvetica Just to spice up some of your your designs here. Here's alternatives to Georgia, which is a really popular serif fine in here, some favorite finds by the folks that adobe that put this together. So there's 25 course, my favorite one, Uh, and they're several pages of this, so you just scroll down to the bottom. We've got rounded fonts and nice, happy friendly, and at some point there is going to be one called Scifi Fonds, which, of course, will be my favorite. Look at these formal occasion fonds. And think about the postcard that we made yesterday in the magazine ad that we made yesterday. Here's the SciFi font. So of course I am going to click on that one, and when we do, we're going to see all 16 of those funds on a page. You can also type in your own text to see what the thought is gonna look like in the text that you need Teoh set, which could be helpful. Look at that. There's all kinds of fun to be had with that despair in mind if you, you know you should not set a bunch of text and something that's gonna be difficult to read, so don't get too carried away with all of this. Do you want to keep your text readable? So let's say that you are searching for a specific farm. Oh, I don't know. Anybody want to search for anything in particular? I can't imagine what we would type in starts with. Oh, look, look here. I just type in M y. And immediately, the most fantastic font known demand pops up to the top of the list, So give it a click and then you go to that particular fonts page and you can see what it looks like at several at all the different styles that are included with that funds. We've got light, light, italic, regular italics and bold etcetera, etcetera, etcetera. Some of these sentences are hysterical. We've cut bad nips and van foxes and boxing wizards, and the icons over here tell you which format of fun that it's available and you can see that some of these air not all available something styles are not available on the desktop version, but several of them are. So this is a fantastic way toe to spice up your designs and download more fonts. And if you need them in other languages, then you can see what language is that fund supports right here. Pretty nifty. If we click on specimens, then we can, uh, see more about what it looks like. A. All the different styles that it's available to really see if that's the fun that we want, we can click on type tester and weaken type anything we want here. So I'm I'm a font geek, so you might have specific text. If you're looking for a fun for your logo, then you would probably type in, You know, Nelson photography or whatever your company name is to really see what that phone is gonna look like, should you choose to to download it. So that's kind of a neat thing, and you can use this slider right here to control the size that you're looking at And if you wanna If you're interested in a Web font and you want to see what it might look like in today's popular Web browsers, then you can click this browser sample tab and depending upon which operating system you have active up here a the top than the this area. So if I'm concerned about most my visitors being on Windows Vista and I think that they're going to be using, uh oh Firefox toe view it if you were watching carefully, you saw the font change just a hair. But this is how you can see what it's gonna look like in the different browsers. So really a lot of useful functionality and type kid. And again, this comes with a full creative cloud membership. So let's say that we want to use this one. I'm not going down with this because I already have it. You'll know I use it to death, but let's go back to browse Fonds and let's take a look. Let's to say that I want to use this approximate nova. I like it Well, if you're going along and you see several funds that might work for the particular project, you've got in mind if you collect a little heart icon at the top, right, it's just so incredibly cute. Then that adds that font to your favorites in the way you access your favorites is to scroll up to the top and you just click my favorites right there. So you can see here that in my trolling I'm I'm digging a petal, a pro Adrian text and Brady I really like Bree. So that's how you would, like, say, fonts that you might want to go back and consider downloading later. But there's no limit that I know of. You know of how maney that you can download and install. So it's not gonna hurt you to just go ahead and download a whole slew of them. If you want to you once you're ready to actually put one into play, you're gonna point your mouse at it and you're gonna click use funds when you do. Then this pop up menu comes up. And if the phone is available in both desktop and Web formats, and you can set the specifics in each of these tabs right now, I've got all of the font styles turned on for that particular fun. And you you want to do that. I mean, I don't I can't think of a reason why you'd want to not download all of the styles at that particular phone has, so you can just say select all. But I believe by default they're all of the styles or checked. But if for whatever reason you didn't want all of them, you could turn those off and then it's real hard. Watch carefully sink selected fonts. That's it. So this was proximate Nova. So now we should be able to go over to photo shop. Were apparently we're still building Franks Header and let's pop open a new document. Allen's Grab the text tool and will type on a font geek, perhaps in a color that we can see on screen and that we should be able to find that farm. So let's click are Fought menu, which is gonna be in the options bar any time. Uh, that is active. What's the name of that phone again? What? That's so funny. This proves that I'm human. There we go. There it is right there. We had to do nothing but click that big old fat green button that we couldn't miss, even if we're half blind. I love that we saw that kind of interface and be hands and we see it over here and type kit thinking this right makes you feel like you can do it. There we go. And now if we cruise over to illustrator, there's our type. Tool in Illustrator works exactly the same way as it does in photo shop. If we come appear to the Font Mini, which is by default, position a little bit toward the right in the options bar, Give that a click. There it is. So there's our fun. Same thing in in design font menus at the top left. See, this is how adobe keeps us on our toes, keeps our eyes healthy from them, having to dart around and find where the menus are so we can scroll down here and there's are fun Now. The need thing is that you can also get to that same type kit website from within in design and illustrator, too, so you don't have to start from the creative cloud at you could start from within illustrator or in design. We don't have that in photo shop yet. We don't have ah quick path to type kit from within from the shot, but we do with illustrator and in design. So let's go back to type kit, click close. That's really others to it. In that nice feels like everybody can do it right now. Let's take a look at how to perhaps install a Web fun. So let's say we want to use Petzel a pro overall. Be hands, for example. So we can click use fonts. And now we're going to click on the Web tab. And to use fonts online like this, you have to jump through a couple of other hoops. You have to create what's called a kit for each website that you want to use the fonts for. We're actually one kit can work on several websites, but you can kind of think of it as a packaging up everything. You need specific code to call that specific font from the websites that you enter that's called creating a kit type kit four B hands. We also need to create a type kit, but it's a built in kit in the program, so you could just send the font over to it without having toe copy and paste in the code that you then have to bury into your Behan's parasite. Dreamweaver works in a little bit different way. You do have to copy paste some code that type kit will give you and then bury it in the pages of your site for it to work. But, muse, you don't have to do that. We can send a, uh, we can access type kit from within. Muse, and the fonts just immediately show up for us to use. So muse is so much more user friendly, then Dreamweaver is so here we are at the pedal approach the Web font part. And if we click this little poppet menu right here, I see that there are already some existing kits. This one I made myself All I did was type in my domain and ah, Jay's domain of his website and I got code. Teoh, use the fun. But we've got if you soon as you set up a B hands pro site because all of this is linked with your adobe, I d. You're going to see a B Hance link down here so you could just click it and that funds gonna show up any time you access a font menu and be hands. And we looked at that earlier. So that's how you would do that. I want to send it over to my be hand side. I'm just going to click, be hands and I click publish in the resulting and every type kid editor. So I just click published. And now the next time I go over there to my be hands pro site, I will be able to find that font in the font list. So really, really easy, Teoh. Take advantage of that. And if for whatever reason you want toe deleted kit, let's say that well, this is go ahead and create a new kid, so I'll close that. So let's create new kit. Here we are that Crip, that kit creator, and we're gonna name the site. This naming is just for your own for you to know which side you sent that to. So let's play like we're going to send one over to creative lives. Why would call this one creativelive and then tab down to the domain and you're gonna enter the domain name? So for creative live, it would be creativelive dot com. No need to put in the http color slash slash Any nine or nine or 249 or any of that stuff. If you, um, our web master and you need to send the font to activate on a specific host, then you could type in the, uh, a lot more information than just the domain. If you need toe, let's say, have this font be active Onley in a subset of, ah, huge website. So then you would enter more information than distant May before where we're gonna be doing. We're just gonna enter the domain and you can enter several. So if I wanted to send one Teoh creativelive and I wanted to send one toe photo lisa dot com Uh, I could keep adding websites and type kids gonna create a kit that gives me the code that I can access on all of those websites so that it will call that font with somebody visits it. Okay, an enable calif on badge. That's just gonna put that little green tea at the bottom of the website to let folks know that you've got type kid fonts going on there. So let's go ahead and I'll delete my site from there and listens. Click continue. And here's that block of code. So depending upon how your website is set up. If it's on a content management system, there will be a place when you sign into your dashboard, where you manage that site where you can put this information. If it's a static side, Ah, you might need to. If it's dreamweaver, you'll need to copy and paste this into the head tag of your pages to call that font on your on your own site. But for Muse, we don't have to do that because we can tunnel into type, get straight from use, which is really nice. Yes, ring way. Have to do this. Or is it because it's both part of Adobe? It's automatically built in because it's hooked up tack. It can descend the font right over to be hands. So let me get out of that. So over here, when you click the Web tab and you click, add to an existing kit. If you have set up a pro site, it's gonna appear here so you can just pass it right over easy peasy. You're like, so that's really all there is Teoh using type kit. I would really, really invite you if you have the least interest in funds. Treat yourself to just a couple of hours of play with intact kit. You're paying for it. It's got so much functionality. If you're not a fun geek already, you will likely become one. And you know, oftentimes if we're designing, designing, designing with the same set of fonts you know I use Mary pro all the time. Why? Because it works. But sometimes I get bored with it. So if you want Teoh update some of your promotional materials which will fund for you, then this is a great way to do that. The fat Speaking of magic Fonds myriad pro is is a magic font because it just works. You know, you can always go to that. I have. Ah, a couple of tips for you there. If you want a pair, myriad with another font. It pairs really well with Minion. So if you know that myriad and Minion is like a fabulous fun, a combination that always works. So you'd use one for your headline in the other one for your body copy. And you could reverse which ones you're using. So you'll know what Mary Pro looks like. Seven. Putting it in your face for three days now. But let's look at Minion Minions Air Really nice, Serra font. So myriad is a san serif, so pairing myriad with Minion is beautiful. Absolutely beautiful. Another magic font combination that always works is gay, airman and future. So it's type and DeArmond. They've got their adobe Gurman pro right there. Beautiful. What's safe? We've got future. There it is. So that's another magic font combination that works in all of this. There's a lot of this kind of stuff in that graphic design for everyone class, but those were a couple of of font combos that always work. And again you'd use one for the headline, the other for the body copy, and you can flip flop, which one you're using for which, but they're quite nice pairings. So if you're creating any kind of long documents and you know you want a headline font and a body copy fund, then those air myriad and minion Guillermina future really great ones to go for