How To Showcase Your Writing So It Shines: 3 CSS Styling Tricks

showcase your writing - man with tablet

Your writing is the centerpiece of your blog.

Content is king right?

It’s what draws people in and keeps them reading your blog.

But what’s also just as important is how you actually showcase your writing. Visually, that is.

Your content may be great, but if it’s difficult for someone to read, you may be losing more readers than you think.

Look, I’m not a trained writer, but I am a web designer and I know what looks good. And what usually looks good is not so much about decoration and taste, but more about what works and what makes things easy to read and understand.

I’ve studied for years the various ways to display content in digital form so I’d like to show you some quick and easy ways you can make sure your content displays nicely in your blog posts from a web designer’s point of view.

There are a few ways that you can make quick styling tweaks to your blog using a little CSS (Cascading Style Sheets) so that you, the writer, can showcase your content and make it as easy as possible for your readers to enjoy it.

I’ll give you a few CSS swipe codes that you can add to your custom style sheet and edit to your liking. Follow the instructions on how to edit the CSS in your blog if you’re not sure how to access your blog’s custom style sheet..

Three Tricks to Style Your Content to Showcase Your Writing

  1. Pretty Up Your Paragraphs

To make sure your paragraphs are easy to read here are a few tips to keep in mind. We’ll be styling the p (paragraph) tag here together.

  • Select a font that’s easy on the eyes. Aim for a serif or sans serif font, not a handwritten one.

Choose a weight that’s not too thin. Some very thin fonts don’t look very good in certain browsers and operating systems (i.e. mac or PC) so ask people to check it for you and give you a thumbs up.

At the same time, choose a font that’s not too thick. You want it to have enough contrast with any bolded text.

When choosing a font, make sure you are either using a system font, a font you’ve uploaded to your blog files or a Google font. I suggest using a Google font because they are free, have the most variety, and are the easiest to use. For more details, check out how to use cool fonts on your blog.

When you’ve selected your font, you’ll go to your custom style sheet and add this code:

<pre>
p {
font-family: INSERT FONT NAME;
}
</pre>

  • Use a font size that’s easy to read on any size screen. Check your blog on a phone and make sure the text is not too tiny for tired or elderly eyes.

A good size for paragraphs is usually 14 to 16px. Not all fonts display the same at the same sizes, so play with them to see what looks best.

<pre>
p {
font-family: INSERT FONT NAME;
font-size: 16px;
}
</pre>

  • Use proper line heights (leading). Proper line heights also help with readability because they give breathing room to your paragraphs. A good line height is 1.5, in other words 1.5 times the size of the text (a line height of 2 would be double spaced).

<pre>
p {
font-family: INSERT FONT NAME;
font-size: 16px;
line-height: 1.5;
}
</pre>

  • Avoid pure black text on white. It’s hard on the eyes. Instead opt for a dark gray (I like #333333) for your copy to decrease the contrast a little.

<pre>
p {
font-family: INSERT FONT NAME;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
</pre>

  • Avoid center aligning paragraphs. Centering your body copy looks amateur and makes it more difficult to read. Why? Each time your eye moves to a new line, it has to struggle to find the start of the next one because it’s never in the same spot.Reserve center alignment for poems, captions, or short pieces of attention-getting text and opt for left aligning or justifying your regular paragraphs. Justified text is spaced so that both the left and right sides of the paragraph have a straight edge.

<pre>
p {
font-family: INSERT FONT NAME;
font-size: 16px;
line-height: 1.5;
color: #333333;
text-align: justify;
}
</pre>

<pre>text-align: left; </pre> is default behavior and does not need to be specified unless you need to override a previous style.

  • Lastly, add white space. You’ll want sufficient white space between your paragraphs for optimum readability. A good rule of thumb is to add a margin below each paragraph equal to about double your font size.

<pre>
p {
font-family: INSERT FONT NAME;
font-size: 16px;
line-height: 1.5;
color: #333333;
text-align: justify;
margin-bottom: 32px;
}
</pre>

  1. Use Hierarchy

You use hierarchy when you outline your posts by using headings and subheadings.

To create visual hierarchy in your posts, style your headings and subheadings so that it’s easy to differentiate between them. Here are a few tips:

  • Use the same font for all your headings in varying sizes.
  • Use a font that’s easy to read, like a serif or sans serif font. You may opt to use the same typeface as your body copy in a thicker weight or you may choose a different typeface that contrasts nicely with your body copy.
  • Set the headings and subheadings to bold or heavier weight.
  • Use Typecast to play with varying fonts, sizes, and weights for your headings and compare them to your paragraph text.

Here’s an example of what you may come up with for sizing if your paragraphs are set to 16px in font size. You would then go up from there:

  • h6 headings = 16px (usually the same size as paragraph text, but bold and on their own line)
  • h5 headings = 18px
  • h4 headings = 22px
  • h3 headings = 26px
  • h2 headings = 30px
  • h1 headings (your blog post titles) = 36px

Again, play with Typecast to see what looks best to your eyes. Once you’ve decided on the fonts and sizes you want to use for your headings, you’ll want to go to your custom style sheet and add this CSS for all your headings:

<pre>
h1, h2, h3, h4, h5, h6 {
font-family: INSERT FONT NAME;
font-size: 36px;
font-weight: bold;
}
</pre>

Next you’ll add some CSS overrides just to change the sizes for each level of heading:

<pre>
h2 {
font-size: 30px;
}

h3 {
font-size: 26px;
}

h4 {
font-size: 22px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}
</pre>

  1. Use Links

Don’t make your readers think! Your links should look like links, meaning they should be completely obvious that they are something to be clicked on. Here are a few ways to do this:

  • Choose a color for your links that contrasts from your regular text.
  • Reserve one color just for your links. Do not use this same color for headings, subheadings, sidebar widget titles or any other text.
  • You can, however, use this color for buttons if you’d like because they are also clickable elements.
  • Do not underline text that is not a link, it’s confusing because people usually assume underlined text is a link.

<pre>
a {
color: pink;
text-decoration: underline;
}
</pre>

Style the various link states to further help your readers distinguish them as links. Having them change appearance when a user hovers over them gives extra indication that it is an active link.

<pre>
a:hover {
color: blue;
text-decoration: none;
}
</pre>

You may also choose to style your visited links differently to indicate to users that they’ve already visited a certain link.

<pre>
a:visited {
color: blue;
}
</pre>

To Showcase Your Writing So It Shines Takes Just a Few Simple Edits

These are just a few tricks to showcase your writing to make them easy to read and therefore help your content stand out!

What other ways do you layout your blog posts to make them easily readable for your users?

Would you like to learn more about how you can leverage CSS to make your blog more appealing to your readers and really showcase your writing? Awesome! Then I would love for you to join me for a free video training on CSS. It starts soon so sign up now.

 

Image courtesy of Pixabay

About the author

Marianne Manthey

Marianne Manthey is an award-winning blogger, web designer, wife and mom, based in Costa Rica. She helps creative bloggers and solopreneurs beautify their blogs, DIY-style via helpful guides and step-by-step tutorials at DesignYourOwnBlog.com. Marianne is the author of Blog Beautiful: 50 Tips + Tricks to Make Your Blog Glow and the creator of Crush CSS, a course teaching bloggers how easy it is to learn HTML and CSS, as well as how to use it to tweak their blog designs.

4 comments

Leave a comment: