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