Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
First, we’ll lay the groundwork as we setup our HTML and CSS files, select webfonts to implement, and get a good size for our body and headings.
-
0:00
[SOUND] Welcome to the final project of our web typography course.
-
0:07
Here we'll be putting everything we learned to the test as we
-
0:11
build out a one page site that heavily relies on typography.
-
0:14
As seen as an example in one of our stages,
-
0:17
CSS Zen Garden is a site that encourages web designers to explore the power of
-
0:21
CSS by showcasing different style sheets of the same HTML file.
-
0:26
I really like the site because it encourages participation in
-
0:29
the web design world.
-
0:30
You can enjoy all the different ways people took the design.
-
0:33
Also, it's a great learning tool to see how other well known
-
0:36
designers are handling different CSS and layout techniques.
-
0:40
We'll utilize the HTML provided from CSS Zen Garden, and
-
0:43
see how we can typographically create a unique version of the site through CSS.
-
0:49
Since the HTML is provided for us, I've built out our work space with it.
-
0:54
We won't be able to change any of the classes that have already been set up, but
-
0:57
that's okay, because it's been semantically written well.
-
1:00
And we can utilize child and
-
1:01
pseudo elements to access different parts of the page as needed.
-
1:06
We'll start with the basic style sheet that has all our classes and
-
1:09
elements within it.
-
1:10
A few margin and padding resets have been set up, but other than that I've left
-
1:14
the classes and elements empty that we've been styling out.
-
1:18
For reference for this project,
-
1:20
here's the barebones web pages that's currently displayed with our CSS and HTML.
-
1:24
This is where we're starting.
-
1:26
There's nothing too special here.
-
1:30
And here's the final version where we'll end up.
-
1:33
You can see we're using typographic hierarchy, different colors, and
-
1:36
change states to present the typography along with
-
1:39
different layout techniques with 1 column and 2 column and so forth.
-
1:43
I'm really excited to show you guys how to do this so, let's jump in.
-
1:47
As I read through the content I'll write down adjectives that I
-
1:50
feel like describe it, as this will inform us on choosing the colors and
-
1:54
typefaces to fit the mood of the content.
-
1:57
Some of the adjectives I wrote down were clear-minded, inspiring yet soothing.
-
2:02
I'll also want to do research on zen gardens in general.
-
2:05
This will inform design choices.
-
2:07
Some of the ideas that stuck out to me about them were minimalistic,
-
2:11
very neatly arranged, and full of white space.
-
2:15
With those thoughts in mind, I perused Google Fonts and
-
2:18
landed on Alegreya Sans as the body copy,
-
2:21
due to its wide range of weights, calligraphic nature, and humanist feel.
-
2:26
It also includes small caps which will be great due to the many
-
2:29
abbreviations utilized within the text.
-
2:31
Will pair it with the italic version of Alegria for
-
2:34
headings, since it complements the Sans version well.
-
2:37
And its heavier pen-like appearance feels like it fits a Zen garden.
-
2:41
It will also add some nice variety and helps distinguish hierarchy in the design.
-
2:45
For color, I landed on a palette inspired by real Zen gardens.
-
2:50
Our background will be a white with hints of gray and
-
2:53
yellow in reference to the sand in the garden.
-
2:55
Our main body font color will be a navyish gray symbolizing the rocks or
-
3:00
water in a garden.
-
3:01
And we'll also utilize a vibrant green for the moss, trees or bushes.
-
3:06
We also have some secondary colors that we'll be using here and
-
3:09
there that are based off of our primary ones.
-
3:12
I've left these as a comment in the top of our CSS file for reference.
-
3:16
If you want help in building out color palettes,
-
3:19
then I'd recommend checking out Adobe Kuler at Kuler.Adobe.com.
-
3:23
You can create your own palette with different color rules or,
-
3:27
you can explore other people's palettes for inspiration.
-
3:31
As we begin to get a good grasp on all this I wanna start sketching and
-
3:35
mapping out the structure of the site on a piece of paper.
-
3:38
We can sketch different iterations of what our site will look like for
-
3:41
mobile sizes to larger size screens.
-
3:44
I like doing this because, it's quick to get ideas down or change things around.
-
3:48
We're thinking at more of a macro level here, trying to typographically arrange
-
3:52
the content in a way that makes the most sense.
-
3:55
This helps us make choices about the layout without getting bogged down in
-
3:58
the details.
-
4:00
I also like the fact that this is not pixel perfect, so we'll be able to
-
4:03
make the right design choices as we build out the Fluid site and the browser.
-
4:08
Sometimes you may be given a predesigned layout which will be
-
4:11
translated on to the web.
-
4:13
In those cases, work closely with the designer and
-
4:15
make sure you're taking everything into account when it comes to the web,
-
4:18
which is not a static medium like a pixel perfect layout.
-
4:23
Since we have the HTML built out, let's begin by styling it through our CSS.
-
4:28
Before we just jump into styling each element, we wanna make sure we have our
-
4:32
body copy set up, as it will be our base size for everything else.
-
4:36
Notice that the color for our background is our sandy white and
-
4:39
our body font color is our navy grayish tone.
-
4:43
In Google fonts, I've already selected the different styles and
-
4:46
weights from the Alegreya super family that I'll need.
-
4:50
So since we can't change the HTML, we're gonna use the add import setting here.
-
4:55
So we can import it through our CSS.
-
4:57
I'll copy that, and add to our style sheet up here under the web fonts and hit save.
-
5:02
So notice all our web fonts are getting caught here on that one line.
-
5:07
Now we want to start implementing these fonts in our style sheet.
-
5:10
So first, I'll go down here and
-
5:12
grab Alegreya Sans, and set it as our body font.
-
5:15
And we'll set the fall back fonts to be Verdana, and
-
5:20
Tahoma, as those are similar humanist sans typefaces to Alegreya.
-
5:25
Next, I wanna set all our headings to be the serif version of Alegreya.
-
5:29
So we'll copy that code, and paste it into all our H1's to H6's.
-
5:34
Give it a fallback of Georgia, hit save, and
-
5:37
let's also give it a font weight of normal and a font style of Italian.
-
5:45
Let's save and check it out.
-
5:47
Great, so it looks like all our web fonts are getting called properly as we
-
5:51
see Alegreya in our headings and Alegreya sans as our body.
-
5:55
Currently, our font size is a little small.
-
5:58
And our line spacing down here is pretty tight.
-
6:01
So let's go adjust those for our body.
-
6:03
I'll head over here and we'll set our body font size to be 1.25m,
-
6:10
or 20 pixels, and our line height to be 1.6.
-
6:17
Let's check it out.
-
6:18
Great. That's much better.
-
6:20
It's much more legible and the line height feels comfortable here.
-
6:23
I'll also want to give my paragraph tags a margin of zero to keep consistent rhythm.
-
6:28
And we'll add a text indent for P plus P of 1.5 em, so
-
6:32
we can tell when the next paragraph starts.
-
6:38
Let's check it out.
-
6:40
Nice.
-
6:41
Although it looks a little crazy now because our font is spanning across
-
6:44
the whole browser, this will look much better when we get the measure in place.
-
6:49
Now, let's look at setting up a typographic scale, so
-
6:52
I'll head over to typescale.com.
-
6:54
And we'll give our font size here 20 pixels or 1.25 em, what we liked.
-
6:57
And I wanna use the perfect fourth for this.
-
7:01
We could set up Alegre Sans down here, but I'm just gonna grab these numbers for
-
7:05
our headings, so let's start doing that.
-
7:09
At 3.175 em, that'll be our h1s.
-
7:11
So we'll head over here and give our h1 a font size.
-
7:16
Of that.
-
7:17
Our h2 will be 2.369m.
-
7:24
And our h three will be 1.777m.
-
7:30
[SOUND] So this is our typographic scale which will help us keep it in place as
-
7:35
we change things responsively because they're set in ems, and
-
7:39
our HTML doesn't have any h4s, 5, or 6s, so
-
7:42
I won't set those up, but we'll wanna take note of these other numbers in
-
7:48
our scale as they could be helpful if we end up sizing elements at a smaller size.
-
7:53
So now, I wanna set our line heights for our H1's, H2's, H3's.
-
7:58
We'll head over here and
-
8:01
I'll give our H1 a line height of 1.1.
-
8:07
These are just guesstimates because I know my line height and
-
8:10
headings needs to be a little tighter, so we'll see where those end up.
-
8:14
I'll save and refresh.
-
8:18
So, let's drag our browser in to see when they break to the next line and
-
8:21
how our line height's looking.
-
8:23
It feels like it could be a little tighter, so I'll go in and
-
8:27
give our h2 a 1.15, and our h3 a 1.2, and save and check that out.
-
8:36
That's a little better, I like that.
-
8:38
Now I'll head over to basehold.it and grab the link to paste into my HTML file.
-
8:43
We won't be changing the html, as this is only for testing and
-
8:47
will be removed later.
-
8:48
I'll set the last number here to be 32 since our body line height of 1.6 is
-
8:53
multiplied by our body font size of 20 pixels to end up at
-
8:57
that number which will give us our vertical rhythm.
-
8:59
So we'll save that and check it out.
-
9:02
Great. So
-
9:03
our baseline grade is now showing up and
-
9:05
we see our paragraphs have pretty good rhythm down here.
-
9:08
But we're going to want to work on our headings.
-
9:10
So I'll start with our h2 and h3,
-
9:11
as our h1s are gonna be styled completely differently.
-
9:16
For our h2, we're going to set our margin of zero for the top, zero for the left and
-
9:22
right, and .54m for the bottom, and after testing our h3 some,
-
9:26
I found that I want to give it a margin of .9m for
-
9:30
the top 0 for the left and right and 0.62 em for the bottom.
-
9:35
So we'll refresh and we see that those margin changes have
-
9:38
now allowed our paragraphs to all line up on the baseline, so that's good.
-
9:43
Now we can comment out basehold.it as it's no longer needed at this point.
-
9:48
So, finally I want to set our abbreviations to be small caps.
-
9:53
So in order to do that we'll need to grab out small caps fonts family code,
-
9:56
and we'll want to head over to our CSS, and paste it into our abbreviation tag.
-
10:03
I'll also grab the fall back fonts for our body here.
-
10:08
And paste those as the fallback for this font family.
-
10:11
Now our abbreviations have been written in upper case in our HTML,
-
10:14
so we'll want to set out text transform to
-
10:17
lower case as our small caps are in the lower case version of that font family.
-
10:22
We'll hit save and check it out.
-
10:25
Great, so notice now we're using small caps for our abbreviations, and
-
10:28
it tends to flow a lot better with the text.
-
10:31
We've got a lot more work to go, but I'll stop here for
-
10:33
now, as our basic typography has been set.
-
10:36
This will be a foundation as we look at building out the different areas
-
10:40
of the site.
You need to sign up for Treehouse in order to download course files.
Sign up