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
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