"React Basics (2018)" was retired on March 31, 2024. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Adobe Illustrator for Web Design!
You have completed Adobe Illustrator for Web Design!
Preview
Begin adding typography to your Wireframe, and make some choices about font and sizing. Once you have made your selections, use paragraph styles.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up