Typography Demo

[00:00:00]
>> Sarah Drasner: What I'm going to do is take the code pen that we were just working on before, and we're gonna add some fonts in here. And I said, don't design in the browser and stuff. But that's okay, we're gonna do this just as a quick thing today. Normally, I would say, for some of your original designs that you're starting from scratch maybe lay them out and take more care with them, but we're doing this really quick together.

[00:00:33]
Okay, so we've got our nav and we've got some text here. I'm gonna add actually one more Lorem,
>> Sarah Drasner: Thing here,
>> Sarah Drasner: Save. Cool, okay, let's go over to the Googly. So we probably wanna pair a serif with a sans serif or something like that. So let's maybe find a nice serif that might look good for the design that we're working with.

[00:01:09]
I kind of like these, I've been pairing recently a lot of these either sub serifs or these kind of more fancy serifs to be used for giant text next to some of the san serif. You don't have to do it that way, you could totally reverse that also.

[00:01:26]
Let's maybe, I'm just gonna add this and maybe we find something better, but we'll just keep. This one's also nice and that's the nice thing, is I can kind of collect a few and be like nah. All right, I've got three in there, let's go look at them.

[00:01:48]
>> Sarah Drasner: I think the Vidaloka is kind of the most bold and I can see it the most clearly, so I'm gonna use that one.
>> Sarah Drasner: So I'm gonna remove a couple of these. Now let's go back to looking at just serifs or san-serifs.
>> Sarah Drasner: All right, so here's some san-serifs.

[00:02:10]
One nice thing is that they put the most popular fonts at the top. And the reason why this is important is some people try to use fonts that are not that popular because then your design looks a little bit more unique, that's totally great. The other counter, the kind of counter side of that is Ilya Grolovic, I can't say his last name.

[00:02:33]
There's a famous Google guy who talked about how because Google's link href that kind of request is usually cached in your browser for some of the more popular ones. That because Open Sans is so popular, you might not actually be including that as a download cost for your site.

[00:02:55]
So you might be getting that for free for a lot of people who are visiting your site, because so many people hit that URL up. So those are two things to think about when selecting fonts, maybe that matters, maybe that doesn't. It's also a hard thing to measure because you don't know.

[00:03:13]
[LAUGH] You don't necessarily know that they have Open Sans cached in their browser, but maybe they do. There's some kinda nice ones, I'm gonna add Raleway, maybe, newly, maybe,
>> Sarah Drasner: I don't know. Niramit, all right, let's check these out again.
>> Sarah Drasner: You can go look at some of these.

[00:03:44]
Since we know we're going to use Vidaloka, Vidaloka? Yeah, you can see, this is what it would look like with Open Sans, that's what it would look like with Roboto. It kinda looks nice with Raleway, actually. Lato,
>> Sarah Drasner: What do you guys think, Lato? Raleway?
>> Speaker 2: Raleway.
>> Sarah Drasner: Raleway, okay, let's do Raleway.

[00:04:10]
Did I already select Raleway? Yes, yes I did, okay. So now let's grab not everything. Grab these, and we're gonna add that to our pen here by adding it in the head, Save.
>> Sarah Drasner: And then for body, I'm going to grab Raleway.
>> Sarah Drasner: And then h1, h2, h3.

[00:04:53]
>> Sarah Drasner: I'm going to add,
>> Sarah Drasner: Vidaloka. Since it's a display already and it's usually bold, I'm gonna also say font weight, normal. Because for h1, h2, h3, they're going to try to change it to a bolder font. But I don't need a bolder version of that one, right?

[00:05:21]
So let's see, that is looking okay. Maybe I can remove some of the borders on some of these. So I'm gonna get rid of,
>> Sarah Drasner: Get rid of that, it's looking all right. I think I have on the h1, a margin, is it margin or? Yeah, margin, and maybe we'll make the h1 a little bit bigger.

[00:05:52]
Font size,
>> Sarah Drasner: That's a little too big, 60.
>> Sarah Drasner: See what it looks like in the, come back here. Cool, I'm also gonna add in, I'm gonna put in a little bit of padding on the side here. Or maybe I just increase the gutter width because it's kinda smushy, isn't it?

[00:06:29]
It's just kinda squished together. So for the gutter, let's see, we've got good gap is ten. I think it goes rows columns for grid gap too. So rows I'm kind of okay with 10 pixels, but columns maybe 50 px. That looks a little better, maybe 100.
>> Sarah Drasner: You probably have to compensate somewhere else.

[00:06:56]
But yeah, that's starting to look a little bit better. Now let's take that image that we had from before and upload it. Let's,
>> Sarah Drasner: This one,
>> Sarah Drasner: Go to File > Open,
>> Sarah Drasner: Okay?
>> Sarah Drasner: Now we're gonna have a whole other section on better ways to export for images.

[00:07:28]
I'm just doing this really quickly so that we can see. Let's do 1400 quality,
>> Sarah Drasner: Don't matter.
>> Sarah Drasner: Assets, you can actually go into photos and they have some that are just ready for you in there and it kind of allows you to pick what you want from these.

[00:08:05]
That's pretty nice. Okay, design assets.
>> Sarah Drasner: Use the smaller one? Yeah,
>> Sarah Drasner: Cool, they just added this, I think, not too long ago. Copy as background image, that's nice. All right, let's go into the content area.
>> Sarah Drasner: And we'll do,
>> Sarah Drasner: Some are right, because its background image, sorry.

[00:09:22]
>> Sarah Drasner: And let’s remove the text here.
>> Sarah Drasner: And the last thing we'll do is we'll add some Lorem content in the footer area.
>> Sarah Drasner: Okay, we're getting pretty far for just a few hours. Cool, we'll do more stuff with this in just a second. So we've got kind of our layout, we've got some typography.

[00:10:20]
If we wanted to, we could maybe even add a third font, I don't know, to be kind of accent for this area here. But you can kinda see how those typographical changes can make the layout be a little bit more strong. So before we just had some squares and stuff and now we have a little bit more space to work and things like that.