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 Web Typography!
You have completed Web Typography!
Preview
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.
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
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up