[SOUND] Welcome to the final project of our web typography course.

Here we'll be putting everything we learned to the test as we

build out a one page site that heavily relies on typography.

As seen as an example in one of our stages,

CSS Zen Garden is a site that encourages web designers to explore the power of

CSS by showcasing different style sheets of the same HTML file.

I really like the site because it encourages participation in

the web design world.

You can enjoy all the different ways people took the design.

Also, it's a great learning tool to see how other well known

designers are handling different CSS and layout techniques.

We'll utilize the HTML provided from CSS Zen Garden, and

see how we can typographically create a unique version of the site through CSS.

Since the HTML is provided for us, I've built out our work space with it.

We won't be able to change any of the classes that have already been set up, but

that's okay, because it's been semantically written well.

And we can utilize child and

pseudo elements to access different parts of the page as needed.

We'll start with the basic style sheet that has all our classes and

elements within it.

A few margin and padding resets have been set up, but other than that I've left

the classes and elements empty that we've been styling out.

For reference for this project,

here's the barebones web pages that's currently displayed with our CSS and HTML.

This is where we're starting.

There's nothing too special here.

And here's the final version where we'll end up.

You can see we're using typographic hierarchy, different colors, and

change states to present the typography along with

different layout techniques with 1 column and 2 column and so forth.

I'm really excited to show you guys how to do this so, let's jump in.

As I read through the content I'll write down adjectives that I

feel like describe it, as this will inform us on choosing the colors and

typefaces to fit the mood of the content.

Some of the adjectives I wrote down were clear-minded, inspiring yet soothing.

I'll also want to do research on zen gardens in general.

This will inform design choices.

Some of the ideas that stuck out to me about them were minimalistic,

very neatly arranged, and full of white space.

With those thoughts in mind, I perused Google Fonts and

landed on Alegreya Sans as the body copy,

due to its wide range of weights, calligraphic nature, and humanist feel.

It also includes small caps which will be great due to the many

abbreviations utilized within the text.

Will pair it with the italic version of Alegria for

headings, since it complements the Sans version well.

And its heavier pen-like appearance feels like it fits a Zen garden.

It will also add some nice variety and helps distinguish hierarchy in the design.

For color, I landed on a palette inspired by real Zen gardens.

Our background will be a white with hints of gray and

yellow in reference to the sand in the garden.

Our main body font color will be a navyish gray symbolizing the rocks or

water in a garden.

And we'll also utilize a vibrant green for the moss, trees or bushes.

We also have some secondary colors that we'll be using here and

there that are based off of our primary ones.

I've left these as a comment in the top of our CSS file for reference.

If you want help in building out color palettes,

then I'd recommend checking out Adobe Kuler at Kuler.Adobe.com.

You can create your own palette with different color rules or,

you can explore other people's palettes for inspiration.

As we begin to get a good grasp on all this I wanna start sketching and

mapping out the structure of the site on a piece of paper.

We can sketch different iterations of what our site will look like for

mobile sizes to larger size screens.

I like doing this because, it's quick to get ideas down or change things around.

We're thinking at more of a macro level here, trying to typographically arrange

the content in a way that makes the most sense.

This helps us make choices about the layout without getting bogged down in

the details.

I also like the fact that this is not pixel perfect, so we'll be able to

make the right design choices as we build out the Fluid site and the browser.

Sometimes you may be given a predesigned layout which will be

translated on to the web.

In those cases, work closely with the designer and

make sure you're taking everything into account when it comes to the web,

which is not a static medium like a pixel perfect layout.

Since we have the HTML built out, let's begin by styling it through our CSS.

Before we just jump into styling each element, we wanna make sure we have our

body copy set up, as it will be our base size for everything else.

Notice that the color for our background is our sandy white and

our body font color is our navy grayish tone.

In Google fonts, I've already selected the different styles and

weights from the Alegreya super family that I'll need.

So since we can't change the HTML, we're gonna use the add import setting here.

So we can import it through our CSS.

I'll copy that, and add to our style sheet up here under the web fonts and hit save.

So notice all our web fonts are getting caught here on that one line.

Now we want to start implementing these fonts in our style sheet.

So first, I'll go down here and

grab Alegreya Sans, and set it as our body font.

And we'll set the fall back fonts to be Verdana, and

Tahoma, as those are similar humanist sans typefaces to Alegreya.

Next, I wanna set all our headings to be the serif version of Alegreya.

So we'll copy that code, and paste it into all our H1's to H6's.

Give it a fallback of Georgia, hit save, and

let's also give it a font weight of normal and a font style of Italian.

Let's save and check it out.

Great, so it looks like all our web fonts are getting called properly as we

see Alegreya in our headings and Alegreya sans as our body.

Currently, our font size is a little small.

And our line spacing down here is pretty tight.

So let's go adjust those for our body.

I'll head over here and we'll set our body font size to be 1.25m,

or 20 pixels, and our line height to be 1.6.

Let's check it out.

Great. That's much better.

It's much more legible and the line height feels comfortable here.

I'll also want to give my paragraph tags a margin of zero to keep consistent rhythm.

And we'll add a text indent for P plus P of 1.5 em, so

we can tell when the next paragraph starts.

Let's check it out.

Nice.

Although it looks a little crazy now because our font is spanning across

the whole browser, this will look much better when we get the measure in place.

Now, let's look at setting up a typographic scale, so

I'll head over to typescale.com.

And we'll give our font size here 20 pixels or 1.25 em, what we liked.

And I wanna use the perfect fourth for this.

We could set up Alegre Sans down here, but I'm just gonna grab these numbers for

our headings, so let's start doing that.

At 3.175 em, that'll be our h1s.

So we'll head over here and give our h1 a font size.

Of that.

Our h2 will be 2.369m.

And our h three will be 1.777m.

[SOUND] So this is our typographic scale which will help us keep it in place as

we change things responsively because they're set in ems, and

our HTML doesn't have any h4s, 5, or 6s, so

I won't set those up, but we'll wanna take note of these other numbers in

our scale as they could be helpful if we end up sizing elements at a smaller size.

So now, I wanna set our line heights for our H1's, H2's, H3's.

We'll head over here and

I'll give our H1 a line height of 1.1.

These are just guesstimates because I know my line height and

headings needs to be a little tighter, so we'll see where those end up.

I'll save and refresh.

So, let's drag our browser in to see when they break to the next line and

how our line height's looking.

It feels like it could be a little tighter, so I'll go in and

give our h2 a 1.15, and our h3 a 1.2, and save and check that out.

That's a little better, I like that.

Now I'll head over to basehold.it and grab the link to paste into my HTML file.

We won't be changing the html, as this is only for testing and

will be removed later.

I'll set the last number here to be 32 since our body line height of 1.6 is

multiplied by our body font size of 20 pixels to end up at

that number which will give us our vertical rhythm.

So we'll save that and check it out.

Great. So

our baseline grade is now showing up and

we see our paragraphs have pretty good rhythm down here.

But we're going to want to work on our headings.

So I'll start with our h2 and h3,

as our h1s are gonna be styled completely differently.

For our h2, we're going to set our margin of zero for the top, zero for the left and

right, and .54m for the bottom, and after testing our h3 some,

I found that I want to give it a margin of .9m for

the top 0 for the left and right and 0.62 em for the bottom.

So we'll refresh and we see that those margin changes have

now allowed our paragraphs to all line up on the baseline, so that's good.

Now we can comment out basehold.it as it's no longer needed at this point.

So, finally I want to set our abbreviations to be small caps.

So in order to do that we'll need to grab out small caps fonts family code,

and we'll want to head over to our CSS, and paste it into our abbreviation tag.

I'll also grab the fall back fonts for our body here.

And paste those as the fallback for this font family.

Now our abbreviations have been written in upper case in our HTML,

so we'll want to set out text transform to

lower case as our small caps are in the lower case version of that font family.

We'll hit save and check it out.

Great, so notice now we're using small caps for our abbreviations, and

it tends to flow a lot better with the text.

We've got a lot more work to go, but I'll stop here for

now, as our basic typography has been set.

This will be a foundation as we look at building out the different areas

of the site.