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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Let's go beyond plain paragraphs and explore different layout treatments.
This video doesn't have any notes.
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
Let's go beyond paragraphs.
0:00
Anytime there's a list,
0:02
you can opt to make it more engaging by
styling it as a bulleted or numbered list.
0:04
And pull quotes help break up
the monotony of long columns of
0:09
text ir bringing emphasis to a message.
0:13
Hanging punctuation requires characters
to be positioned outside the margin edge.
0:17
This is commonly used for pull quotes and
0:21
bulleted list to create
an event visual edge.
0:24
For example, hanging quotes keep
the left alignment balance so
0:27
it increases readability in the text.
0:32
A quotation mark that is flush with a text
like we see here can interrupt the left
0:34
margin and disrupt the rhythm for the
reader compared to the one that is not.
0:39
To keep quotation marks
clear of the edges,
0:43
we can give the text
a negative text indent.
0:46
We also have the option to hang
the list markers and lists,
0:49
which can help the flow of text because
the margin edge is well defined and
0:53
continuous, compared to
one that is indented.
0:58
Either one is acceptable, so it's really
up to us to go with what feels right.
1:01
Text and list items should
also be consistently aligned.
1:06
If a list item runs more than one
line of text and isn't aligned well,
1:10
then reading flow can be interrupted
because our eyes look for straight lines.
1:15
Make sure the list markers are away from
the edges of text, which will make for
1:20
a much cleaner reading experience.
1:25
Another layout trick is using horizontal
rules to create clear sections of content.
1:27
A horizontal rule is a divider
that can spread across a column.
1:33
It can spread the full width or
only cover a portion.
1:37
It can be a simple line or
something more innate.
1:41
Check out this example by Jules Forrest.
1:45
The horizontal rule above and
1:48
below the pull quote give the piece visual
interest and emphasize the quoted text.
1:50
When combining text with an image,
1:55
play around with how the text
wraps around the image.
1:57
In addition to forming rectangular
paragraphs around an image,
2:01
you can make the text glide along
the edge of the object in the image.
2:05
Check out this design by Jen Simmons.
2:09
The text forms a rounded edge
which wraps around the tomato.
2:11
Finally, the last example I
want to show you is tables.
2:16
Tables are an excellent way to show
tabular data and columns and rows.
2:21
It helps readers compare content as it
easily organizes data on the screen.
2:26
The trick with tables is
to use borders sparingly.
2:32
Check out the pricing table for a slack.
2:35
The columns are subtle and
2:39
the rows are more defined to
help you compare the features.
2: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