Loading ...
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.
1 2 3 4 5
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.
1 2 3 4 5
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.
1 2 3 4 5
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.
1 2 3 4 5
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.
1 2 3 4 5 6 7
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.
1 2 3 4 5
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:
1 2 3 4 5
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:
1 2 3 4 5
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:
1 2 3 4 5 6 7
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
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;
}
I like posts that go through basic typography methodically. There are a couple of points I’d add, though:
font-size: 1.3em;doesn’t mean much if you don’t know the document’s base font size. For example, on my blog the bodyfont-sizehas been set to 100%, which means thatfont-size: 1.3em;would work out at 20.8 pixels (i.e. very big indeed!)You’ve missed out margins (perhaps group this with tracking, word-spacing and leading under ‘white space’.). I tend to set
margin-bottomto the same as the paragraph’sline-height, so you get a line break between paragraphs.I personally wouldn’t mess with letter and word spacing in paragraphs (although I’ve seen it done quite successfully recently). They’re a matter of such convention that a change can really jar.
What about measure?
I used to justify the text on my blog: browsers justify really badly, so I definitely wouldn’t recommend it: you get big, wide rivers running through your text.
Oh, and big font sizes are great for everybody!
Thanks for an interesting read,
Leon
Oh, and you need to change the link colour in the comments section!
—Leon
@Leon – What a great comment, thank you.
You are actually very right, I’ve completely forgotten about the white-space part! I already thought I was missing a point – I will add that to the article right away.
I didn’t know justify wasn’t properly supported!
I have changed the white-space and the links in the comment section!
Justified text is also harder to read. A ragged right edge to your text makes it much easier to follow from line to line. Not to mention the point Leon made about the butchering it does to word spacing. Even in print I’d avoid full left and right justification, unless you’re willing to spend hours manually setting every bit of text to eliminate those rivers.
[...] Go to the author’s original blog: The Paragraph & Typography Guide [...]
I would like to add my humble opinion on using font-family. I like to make my first family declaration the one I would use in a “perfect world”. For instance, I love using Minion Web Pro with Scala Sans, but I know a minority of users actually possess these fonts. So I write my font-family declarations to degrade down in order from most desirable to generic:
body {
font-family: “Minion Web Pro”, Georgia, “Times New Roman”, serif;
}
h1 {
font-family: “Scala Sans”, Verdana, Helvetica, sans-serif;
}
Often, I’ll choose a font that is included with the Adobe suite for the first declaration. At least then a bit more people can see the site in a more “optimal” setting. Having said that, I notice all too often people abusing this technique and using fonts that have no business being displayed on the screen (notice I use Minion Web Pro and not just Minion Pro). It’s always a good idea to know what medium the font you are using was originally designed for.
@Nathan – Thanks for your insight. The point you made about the part that normal text-align is easier to follow because not every line has the same length.
About the other point you guys made, I didn’t have that problem just yet. I will take a closer look soon!
@Bob – You can do it the way you prefer. I usually don’t experiment with web-fonts, because too many people (in my opinion) will benefit from it.
Thanks for adding your thoughts!
[...] brief look at the basic CSS rules that govern paragraphs – line-height, font-size, font-family, color, text-align, word-spacing, text-indent and [...]
[...] Vervoort> en divitodesign, nos da una serie de consejos básicos a la hora de construir y diseñar los párrafos. Son muy [...]
As you explain in a good article, designing is one of the most important things for who want to be successful in Internet Marketing.
And of course paragraph is one of them.
Thanks.
Nice article I agree with you that when it comes to styling text, we do sometimes get caught up in the headings and forget about the paragraph itself.
Good explanation and examples of what the difference CSS properties are relating to paragraphs as well.
Your tips just helped me edit a theme that has been a bear for me to work with. I’m not even proficient in html or css, but your few tips here helped me overcome the small typestyle included on a theme I was trying to edit. Thank you, thank you, thank you.
Text-indent for :
why not p + p {text-indent:whatever_you_like em;}
This way we’ll always filter for subsequent paragraphs and do not need to define two rules.
Or am I wrong?
I’ve done this for years – upps, since it is partially supported by browsers
Thanks for commenting!
@PublicRecordsGuy – Thanks for your comment, great this article helped you!
@Dau – What a smart idea, it didn’t cross my mind to do it this way! Your way works fine, so does my way, it’s up to the readers to decide. Yours is smarter though.
good points, tested a lot with it and therefore: thank you!
[...] thanks to Stefan Vervoort and his article on paragraphs, which gave me the idea for this [...]
[...] an article I have written some time back I have shown you how you can use CSS to improve your paragraph’s typography without much [...]
[...] The important part of your paragraph is that they shouldn’t bore your visitors. If people don’t like how the letters and words “flows” or “feels” they might skip that paragraph, or in the worst case move on and click the exit button. I suggest you read some tips for styling the paragraph. [...]
[...] The Paragraph & Typography Guide [...]
Cool article, typography is so overlooked by web designers, but its so important. CSS lets you do so many cool things with it, especially with the :pseudo elements, for example :first-letter
[...] The Paragraph and Typography Guide [...]
[...] The Paragraph & Typography Guide [...]