The Paragraph & Typography Guide

Paragraphs are often overlooked when we talk about design or typography, we give our titles a lot more attention. While paragraphs are used to actually bring over the message. Why not give your message the look and feel your readers deserve? Let’s take a look at the paragraph in typography today.

Designing your Paragraph

When we markup our paragraph we have to choose from 8 options in CSS. If used properly, all of these can drastically improve the experience the reader has with your paragraph. It is the combination of all of these that can make the difference between easy to read and hard to read.

• font-family
• font-size
• color
• line-height
• letter-spacing & word-spacing
• text-align
• text-indent
• Whitespace
  

We will discuss all of these next.

Font-family

The font-family property is the most important part of your paragraph. It is really important to choose a font that flows with your layout but most important it works in your layout. For example: Georgia should work on a personal blog, while Arial could be used when you go for a professional look.

In general, we have to choose between these regular options in the font-family attribute:

• Arial, Helvetica, sans-serif
• “Times New Roman”, Times, serif
• “Courier New”, Courier, monospace
• Georgia, “Times New Roman”, Times, serif
• Verdana, Arial, Helvetica, sans-serif

We can’t simply add the fonts you like because they aren’t web-safe. Here is a list of Web-safe fonts you can use on your website. Make sure you choose one of these.

p{
font-family:Arial, Helvetica, sans-serif;
}

Font-size

You should always find the balance between both lovely and accessible, that means you should choose a font-size that is too small (because older people have more problems to read it!) or too large, because that might irritate your reader.

If you have set your body base font-size at 100%, your paragraph should have a font-size that could range between 0.75em and 1em but you could experiment with this to see what fits best on your site.

p{
font-size:1.3em;
}

Color

Colors are important to create a nice flowing layout, but not only the colors have a part in that, contrast is important too. For example, you could just use plain black for your normal text, but you can also use a dark-gray. This makes the text a bit easier to read and you make your italic, strong or heading tags stand out a bit more.

Just a quick reminder; don’t tone down your contrast too much. That will make it harder for older people to read your content.

Read more about the contrast in design in an excellent article from the Usabilitypost.

p{
color:#444;
}

Line-height

The line-height is the distance between the lines of text and changing this value can help people navigate better and read easier and relaxed. You should experiment with your line-height as you like, just don’t choose it too small!

Here’s an example to show you what a larger line-height can do to your paragraph.

p{
line-height:1.5em;
}

Word-Spacing & Letter-spacing

CSS has the possibility to change the margin between words and letters. Usually I only use these elements on headings, but adding just a little bit more or less spacing between words or letters can just make a little difference in user experience. Just experiment a bit and see what works for your paragraph. Remember to not overdo it.

p{
word-spacing:.1em;
letter-spacing:.01em;
}

Text-align

You can change the align of your paragraph too and by default, everything is aligned to the left. Choosing a text-align of center or right is not your best choice. But there is one more option: justify. Your paragraph will be justified on both left and right.

Justify makes your paragraph looks much better and more professional. If you aren’t sure what I mean, I’ve set up an example that can help you.

p{
text-align:justify;
}

Text-indent

In traditional writing a paragraph that is separated from the rest (e.g. not as a follow up on h1, h2, h3, lists or blocks), should have a indent on the first sentence. You can do this on the web too:

p{
text-indent:1em;
}

However, these codes does show an indent right after the h1, h2, h3 items, which is not what we want. I learned there is a possibility to do that:

h1 + p, h2 + p, h3 + p {
text-indent: 0;
} 

Here’s an example that shows you what you can do.

Whitespace

You should keep in mind that you have only styled a single paragraph with the options above. To make the reader recognize the paragraphs as paragraphs you need to add space to separate them. We will do that with the margin element in CSS.

When you add the same value we gave line-height to margin-bottom, we get a simple line-break between the two paragraphs, just like how we see that in original print industry.

This will do the job:

p {
line-height:1em;
margin-bottom:1em;
} 

Final Example

To give you an complete example to see what is possible, I have set the default paragraphs against a more complete paragraph. I have used all the properties I have described in this article, so you can see what they can do.

Take a look at the example and I think it is clear which one looks best and is best readable too. If you want to customize this paragraph to your needs you can find the CSS codes below:

CSS

p{
line-height:1.6em;
font-family: Arial, Helvetica, sans-serif;
font-size:80%;
color:#444;
text-align:justify;
word-spacing:0.1em;
text-indent:1em;
margin-bottom:1.6em;
}
p strong, p em{
color:#000;
}
h1 + p, h2 + p, h3 + p {
text-indent: 0;
}