Simple CSS: Creating More Readable Text
Typography is an important part of Web design. Just like in the print world, your content needs to be readable to your viewers for it to be of any use. As a general rule, you want to make sure your Web site provides as little resistance as possible to the user, and the easier your site is to read, the better. CSS provides three very useful properties to enhance the readability of your site:
Let's begin with a small sample Webpage. You can view it here. This page uses a small, pretty standard design with some low-key colors to help emphasize the content. This is a good use of design and color if your site fits in the "content is king" category (and most sites do), especially if your content consists of articles or other long blocks of text, like a blog.
The thing to notice here is that the text does its job: it communicates a message and the user can walk away having consumed your content. But the text is the same across the whole page, with the exception of a color change in the small subheading below the header text and the positioning of it. Here's the CSS that's being used in the sample page.
To improve readability, we'll want to choose a font that looks good with the colors you've chosen and at the size you plan on making your text. Typically, a non-serif font is advisable for the main content, while headers benefit from the added noticeability of serif fonts. If you come from a print background, this may sound backward. Usually, in the print world, serifs are preferred for blocks of text because the serifs help the eye distinguish each line. However, modern operating systems have options to smooth the edges of screen fonts automatically, so non-serif fonts come out looking better as main content and serif fonts look good in small doses.
With this in mind, I'm going to use one of my favorite lines when it comes to CSS and fonts:
These fonts are some of the safest you can use in your design, and if cross-browser compatibility is a concern, memorize them. They're good to use on their own, or you can use them as a starting point for your non-serif text. In this case, for simplicity's sake, I'm going to stick with just these three for the content. The body section of the CSS now looks like this:
And with that small change, the overall readability of the page has changed slightly for the better: see for yourself.
The slight change is good, but all of the font is still the same family and this creates a bad sort of uniformity. We want some distinction going on here, so let's set our headings and subheading apart from the rest of the content. We'll ignore the h1 at the very top for a bit, since we'll want to do something a little different with that in a second.
For the subheading and the heading in the content, I'll be using a serif font. Just like above, this next line is probably one of my favorites:
Again, these are some of the safest fonts you can use in Web Design, even if it's just for a starting point and you plan to expand your typography a bit later. Reserve this line for headers and other places where it would look good in small doses; the eye has a tougher time reading serif fonts on a screen than non-serif fonts so whole blocks of serif text can be jarring.
So now, our subheading class looks like this:
And we need to create a new rule for h2 tags in the content section. We do so like this:
Alright, now the header information is more separated from the content, which is good. Take a look here.
Now, what about that h1 header we have at the top of the page? We're going to make it larger and give it less contrast to its background. This is so that users will know what site they're on, but won't be distracted by the header.
We'll do this with this code:
And the full header h1 rule now reads:
You can view the modified header here.
Now we turn our attention toward the sidebar and footer. The text in the these places is the same as the body text in main content area. The sidebar and footer typically play secondary roles, so we'll give them smaller text and a different font family with a single
Now, our sidebar and footer divs have the following CSS:
Right now, the content text feels a bit overwhelming. We'll reduce its size with this:
And we'll put it in the content rule, so now it reads:
And now we have our fifth iteration of the CMRT page. We've taken some good steps in making sure the different sections of our site each have their own look and feel while still feeling unified. Now, we can take it a step further with the
Your visitors are there to see whatever content you have up on your site. They've come to see you and they're your guests! Treat them well. You don't want to strain their eyes when they view your page. Use
We'll give the content div a line height of 160%, which basically gives it 60% more line height than it normally has, based on font size. This is a decent amount of line height and gives the text some room to breathe. For the sidebar, since the text is smaller, we'll only give it a line height of 140%. So, now our content and sidebar CSS are as follows:
And with this, the text takes on a much more pleasant look. See here. The eyes don't have to work as hard to read the text now, so it's easier for your visitors to consume your content.
There are only a couple of places where letter spacing comes into play with this page, but it too can play a part in increasing your site's readability and help make each element on the page more distinct. Headers and headings are usually good candidates for letter spacing. From a design point of view, you can use letter spacing on your header text to add some improved visuals to your page, like we're going to do in the header div with this:
This increases the space between the letters of your text by 20px. 20px is a big number for ordinary text, but for the header at the top of the page, which is just 4 letters, it helps it stretch to be just about as wide as the subheading beneath it, giving it more of a header feel.
For the headings (the h2 tags) in the content of the page, we're going to increase the letter spacing by just 2px. This will lend the headings a more prominent feel and separate them further from the text, and the adjustment is minor enough that it will not distract from reading:
So our header's h1 CSS and our content's h2 CSS now look like this:
You can see what it all looks like when done right here.
There are a lot of different ways you can apply these properties, too. For the design of the page I purposely used a simple, rather unintuitive design so I could focus on the text as it changed during the above steps, but applying this kind of CSS to a much more vibrant and elegant design can drastically improve its effect on your visitors. I don't intend to "pretty up" the CMRT sample page, and if I do, it will be for a totally separate article, but if you'd like to take a crack at making it look prettier while preserving the font and text adjustments, hit me up and we'll talk about it.
Typography is an important part of Web design. Just like in the print world, your content needs to be readable to your viewers for it to be of any use. As a general rule, you want to make sure your Web site provides as little resistance as possible to the user, and the easier your site is to read, the better. CSS provides three very useful properties to enhance the readability of your site:
font, line-height, and letter-spacing.A sample page
Let's begin with a small sample Webpage. You can view it here. This page uses a small, pretty standard design with some low-key colors to help emphasize the content. This is a good use of design and color if your site fits in the "content is king" category (and most sites do), especially if your content consists of articles or other long blocks of text, like a blog.
The thing to notice here is that the text does its job: it communicates a message and the user can walk away having consumed your content. But the text is the same across the whole page, with the exception of a color change in the small subheading below the header text and the positioning of it. Here's the CSS that's being used in the sample page.
body {
text-align: center;
margin: 0;
padding: 0;
background-color: #363942;
color: #382513;
}
#container {
margin: 15px auto;
text-align: left;
background-color: #D8CAA8;
border: 1px solid #4B1E18;
padding: 0px;
width: 850px;
}
#header {
height: 80px;
border-bottom: 1px solid #284907;
margin-bottom: 15px;
padding: 15px;
}
#header h1 {
position: relative;
vertical-align: center;
color: #382513;
margin-bottom: -10px;
}
.subheading {
color: #284907;
}
#sidebar {
border-left: 1px solid #8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
}
#content {
padding: 0 15px;
}
#footer {
clear: both;
border-top: 1px solid #284907;
padding: 15px;
margin-top: 15px;
}
Choosing your fonts
To improve readability, we'll want to choose a font that looks good with the colors you've chosen and at the size you plan on making your text. Typically, a non-serif font is advisable for the main content, while headers benefit from the added noticeability of serif fonts. If you come from a print background, this may sound backward. Usually, in the print world, serifs are preferred for blocks of text because the serifs help the eye distinguish each line. However, modern operating systems have options to smooth the edges of screen fonts automatically, so non-serif fonts come out looking better as main content and serif fonts look good in small doses.
With this in mind, I'm going to use one of my favorite lines when it comes to CSS and fonts:
font-family: Arial, Helvetica, sans-serif;
These fonts are some of the safest you can use in your design, and if cross-browser compatibility is a concern, memorize them. They're good to use on their own, or you can use them as a starting point for your non-serif text. In this case, for simplicity's sake, I'm going to stick with just these three for the content. The body section of the CSS now looks like this:
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #363942;
color: #382513;
}
And with that small change, the overall readability of the page has changed slightly for the better: see for yourself.
The slight change is good, but all of the font is still the same family and this creates a bad sort of uniformity. We want some distinction going on here, so let's set our headings and subheading apart from the rest of the content. We'll ignore the h1 at the very top for a bit, since we'll want to do something a little different with that in a second.
For the subheading and the heading in the content, I'll be using a serif font. Just like above, this next line is probably one of my favorites:
font-family: Georgia, "Times New Roman", Times, serif;
Again, these are some of the safest fonts you can use in Web Design, even if it's just for a starting point and you plan to expand your typography a bit later. Reserve this line for headers and other places where it would look good in small doses; the eye has a tougher time reading serif fonts on a screen than non-serif fonts so whole blocks of serif text can be jarring.
So now, our subheading class looks like this:
.subheading {
color: #284907;
font-family: Georgia, "Times New Roman", Times, serif;
}
And we need to create a new rule for h2 tags in the content section. We do so like this:
#content h2 {
font-family: Georgia, "Times New Roman", Times, serif;
}
Alright, now the header information is more separated from the content, which is good. Take a look here.
Now, what about that h1 header we have at the top of the page? We're going to make it larger and give it less contrast to its background. This is so that users will know what site they're on, but won't be distracted by the header.
We'll do this with this code:
color: #6B5846; font-size: 48px;
And the full header h1 rule now reads:
#header h1 {
position: relative;
vertical-align: center;
color: #6B5846;
margin-bottom: -10px;
font-size: 48px;
}
You can view the modified header here.
Now we turn our attention toward the sidebar and footer. The text in the these places is the same as the body text in main content area. The sidebar and footer typically play secondary roles, so we'll give them smaller text and a different font family with a single
font rule:font: 12px Verdana;
Now, our sidebar and footer divs have the following CSS:
#footer {
clear: both;
border-top: 1px solid #284907;
padding: 15px;
font: 12px Verdana;
margin-top: 15px;
}
#sidebar {
border-left: 1px solid #8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
color: #5A4735;
}
Right now, the content text feels a bit overwhelming. We'll reduce its size with this:
font-size: 15px;
And we'll put it in the content rule, so now it reads:
#content {
padding: 0 15px;
font-size: 15px;
}
And now we have our fifth iteration of the CMRT page. We've taken some good steps in making sure the different sections of our site each have their own look and feel while still feeling unified. Now, we can take it a step further with the
line-height property.line-height — Be good to your visitors!
Your visitors are there to see whatever content you have up on your site. They've come to see you and they're your guests! Treat them well. You don't want to strain their eyes when they view your page. Use
line-height to make your text more readable. Adding more line height to your text increases the amount of space between each line, and it helps the eye make that jump as it moves down your content.We'll give the content div a line height of 160%, which basically gives it 60% more line height than it normally has, based on font size. This is a decent amount of line height and gives the text some room to breathe. For the sidebar, since the text is smaller, we'll only give it a line height of 140%. So, now our content and sidebar CSS are as follows:
#content {
padding: 0 15px;
font-size: 15px;
line-height: 160%;
}
#sidebar {
border-left: 1px solid #8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
line-height: 140%;
color: #5A4735;
}
And with this, the text takes on a much more pleasant look. See here. The eyes don't have to work as hard to read the text now, so it's easier for your visitors to consume your content.
Adjusting letter spacing
There are only a couple of places where letter spacing comes into play with this page, but it too can play a part in increasing your site's readability and help make each element on the page more distinct. Headers and headings are usually good candidates for letter spacing. From a design point of view, you can use letter spacing on your header text to add some improved visuals to your page, like we're going to do in the header div with this:
letter-spacing: 20px;
This increases the space between the letters of your text by 20px. 20px is a big number for ordinary text, but for the header at the top of the page, which is just 4 letters, it helps it stretch to be just about as wide as the subheading beneath it, giving it more of a header feel.
For the headings (the h2 tags) in the content of the page, we're going to increase the letter spacing by just 2px. This will lend the headings a more prominent feel and separate them further from the text, and the adjustment is minor enough that it will not distract from reading:
letter-spacing: 2px;
So our header's h1 CSS and our content's h2 CSS now look like this:
#header h1 {
position: relative;
vertical-align: center;
color: #6B5846;
margin-bottom: -10px;
font-size: 48px;
letter-spacing: 20px;
}
#content h2 {
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 2px;
}
You can see what it all looks like when done right here.
Expanding on this CSS
There are a lot of different ways you can apply these properties, too. For the design of the page I purposely used a simple, rather unintuitive design so I could focus on the text as it changed during the above steps, but applying this kind of CSS to a much more vibrant and elegant design can drastically improve its effect on your visitors. I don't intend to "pretty up" the CMRT sample page, and if I do, it will be for a totally separate article, but if you'd like to take a crack at making it look prettier while preserving the font and text adjustments, hit me up and we'll talk about it.
No comments:
Post a Comment