Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Adding Type6:49 with Ashley Burke
Begin adding typography to your Wireframe, and make some choices about font and sizing. Once you have made your selections, use paragraph styles.
If you have not saved yet, go ahead and save, always remember to save. 0:01 And we are gonna be adding in our type. 0:06 Because we're done with the layout for now, I'm going to hide my guides, just so 0:10 they're less distracting, just like that. 0:14 So move up into my Layers panel, I turn the eye off. 0:18 I actually didn't need to turn this lock off. 0:22 When designing for web, you wanna use fonts that are web safe. 0:25 Meaning that they are loaded into a user's browser and will be seen appropriately. 0:29 There are a few website fonts that will always work on all browsers. 0:35 And the teachers notes, I put a link to these. 0:42 This is this w3schools and you can look it up other places as well, 0:46 but we have Serif Fonts, Sans-Serif and it's just a few choices. 0:51 For the most part, these are always gonna be safe font choices to use. 1:00 And you'll know that if you use this, 1:05 this is what it will look like on the user's end. 1:07 If you want more variety, 1:11 you can also embed open-source fonts which is more commonly done now. 1:13 This works on some but not all browsers. 1:17 You can take a look at a good selection of these on google.com/fonts. 1:20 And if you're new to Google fonts, up here on the top right, click on this. 1:26 And it'll explain to you how things work, etc. 1:31 So those are two great resources to use. 1:35 I'm gonna hop back into Illustrator here. 1:39 Now to add type, I'm gonna be using Lato. 1:45 So I type that in. 1:49 L-A-T-O. 1:50 I wanted to have a medium weight typeface over each photo in the events 1:53 feed as a call out. 1:58 And that's where I would like to start. 2:00 For the bigger call outs, these are going to be called headings. 2:03 Headings has to do with hierarchy. 2:08 H1 would be the biggest size for the main content and 2:10 as the numbers go up H2, H3, H4. 2:15 The font size of the heading will get smaller. 2:18 And this relates to how it's coded on the page when they're making the site. 2:23 So using the same terminology can help. 2:27 So here I'm going to write Heading 2, not my largest heading. 2:30 That'll be my second largest heading. 2:37 And right now, it is very tiny. 2:40 So instead of having my type be 12 points, 2:43 I'm going to go up here, select this and I'll make it 50. 2:48 There we go. 2:55 Now I can read what's going on there. 2:57 You can see that my type is black, 3:02 so I'm going to select my Type Tool and this is T. 3:05 It's the shortcut key for this. 3:10 Put my cursor in here, I'll hit Command+A to select all, 3:15 I could also click and drag. 3:19 And I wanna change this color to a lighter gray. 3:24 So I've double-clicked on my Fill Color, this Color Picker came up. 3:30 I have checked off this web colors which limits the spectrum here. 3:36 And I'm gonna choose this gray and click off gray. 3:44 Now I wanna do the same thing for these other two, 3:53 cuz I wanna have a heading on each one. 3:57 So I'm gonna do Option drag down. 4:01 And now for these, I want to center my heading vertically and 4:06 horizontally onto the event image. 4:11 So I'm gonna click the type, click the image and hold down Shift and 4:15 click the image. 4:19 And then without holding down Shift, 4:21 I'll click one more time to make that backimage the target. 4:23 And then I will Horizontal Align Center. 4:29 And Vertical Align Center, and then click off. 4:34 Now I'm gonna do the same thing for these. 4:38 Then click off. 4:49 Great, okay. 4:51 Oh, but it says Heading 3. 4:53 So let's just, these should be Heading 2. 4:54 And I also want it to be bold, rather than regular. 5:00 So I'm gonna go up here and make this bold. 5:04 That's better. 5:10 Heading 2. 5:13 Bold. 5:19 And change this up to 2. 5:23 So if our Heading 2 is at 50 points a size, 5:29 I want to create another heading that's gonna go over my hero image. 5:35 And I may or may not use this later, but I'm gonna go ahead and create it for now. 5:43 So I'll click this Heading 1. 5:48 I'm gonna Option, click and drag this over. 5:51 Center this up using my distribute functions like earlier. 5:58 Okay, and for this one I'm gonna select it and I'm also gonna select the text. 6:05 So I'm gonna go to my Type Tool, 6:11 use my cursor, Command+A to select all. 6:15 I'm gonna make this really big. 6:21 And so what's happening now is the type is going outside of the text bounding box, so 6:25 I just need to scale up the bounding box size. 6:30 Here we go, there it is. 6:36 And back to my Type Tool, I'm gonna make this Heading 1. 6:39 So this will be our largest heading. 6:44
You need to sign up for Treehouse in order to download course files.Sign up