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 Typography for Designers!
You have completed Typography for Designers!
Preview
Thirsty for more grid systems? Let's go!
Resources
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
Earlier, you saw how to use a baseline
grid to create rhythm in a design.
0:00
Now, we'll cover some
other types of grids.
0:05
Now that you know text is easier
to read when it's in a column,
0:09
you may find yourself with
designs that have white space.
0:13
How can you lay out the text and
other content?
0:16
First up the multi-column grid.
0:19
Multi-column grids allow
you to create hierarchy and
0:22
integrate text with photos or graphs.
0:26
You can define certain zones for
0:28
photos, and you can allow content
to span multiple columns.
0:30
Aim for an average of 40
to 50 characters per line.
0:35
Back to our project,
0:39
here's an alternative way we could
layout the type in a multi-column grid.
0:40
To create this, click the plus
sign to add another layout grid.
0:45
You'll want to define the columns so
they match up with the baseline grid.
0:50
So it's important to
see both grids at once.
0:55
Select Columns and set it to 3 columns.
0:59
For the margin, make it 64 pixels so
it spans two 32-pixel squares.
1:02
For the gutter, make it 32 pixels.
1:09
This will work best in order to lay
out the type with good measure.
1:12
Then arrange the content to align the
columns while maintaining alignment with
1:17
the baseline grid.
1:22
For the headline,
you'll need to adjust the line height and
1:24
remove any paragraph spacing if that
happened to be set on the text box.
1:27
I added a photo of Mars to
spice up the white space.
1:31
As you work on it, it helps to hide the
grids to check out how the layout looks
1:35
without the red guidelines.
1:39
Second up is the hang line.
1:47
In the hang line grid,
1:50
you can divide the page horizontally
to designate a given area of the page.
1:51
This is called the hang line.
1:56
The area often contains images,
footnotes, asides, and so
1:58
on that complement the main text.
2:02
Lastly, the modular grid.
2:06
These were popular among Swiss
designers in the 1950s and 1960s.
2:09
In this style of grid, the art board
is divided into consistent divisions,
2:14
horizontally and vertically.
2:18
Content can span across
sections as you wish.
2:20
That's it for types of grids.
2:24
Keep in mind when you design for
the web you want to prepare for
2:26
a range of screen sizes.
2:29
For instance, a mockup for a responsive
website design could be in three parts.
2:31
A desktop design with a three column grid,
a tablet design with a two column grid,
2:36
and a mobile design
with a one column grid.
2:42
If you're interested in learning more,
check out designers Kirchner and
2:45
Muller-Brockmann for inspiration.
2:48
I put some links in the teacher's notes.
2:50
Stay tuned for
2:53
the next video where we'll look at
the super cool world of variable fonts.
2:54
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