Better typography with CSS

04 Style the title

Now that we’ve got the normal bits and pieces out of the way, let’s look at how we can style individual elements to make them special. In design school, you’re often taught to track headlines in – that is to say, reduce the space between letters to reduce negative space and create more of a block. We’re going to do that with our book title by applying a negative value to the letter-spacing CSS attribute for our <h1>. To counteract the tightening of the letters, we’ll add some space between the words using the word-spacing attribute. This technique adds impact to any heading but slightly reduces readability, so avoid using it on standard paragraph text. Add the CSS code below to your style sheet to apply the effect. Note that when we’re setting character spacing or sizes, we’re using ems as the unit. This allows everything to scale uniformly, and can be thought of as a percentage (ems represents the width of a standard letter m in the current typeface at the current size).

h1 {
margin-left: 60px;
font-size: 3em;
text-transform: uppercase;
font-weight: 900;
letter-spacing: -0.1em;
word-spacing: 0.3em;
margin: 0;
padding: 0;
text-align: center;
color: #83201a;
}

05 And the rest…

While we’re looking at headings, add the code below to position the author heading in the centre and the chapter heading in the left margin. This second rule only works in this instance because the chapters are represented by Roman numerals. We’re centring the text in the left-hand margin by floating it left and giving it a width of 60px.

/* Author */
h2 {
margin: 0;
padding: 0;
text-align: center;
margin-bottom: 10px;
color: #54110d;
}
/* Chapter */
h3 {
margin: 0;
padding: 0;
float: left;
font-size: 2em;
width: 60px;
text-align: center;
color: #999999;
}

06 The first paragraph is all-important

Pick up a newspaper or magazine and you’ll see that the first paragraph of a feature is often rendered differently to the rest of the copy. This is a technique designed to pull the reader into the article. There a variety of ways to achieve this, but here we’ll simply increase the font size for the first paragraph. While we’re at it, we’ll add a top border to create a horizontal rule, and some margin to move the content away from this rule. We’ve identified the first paragraph with the class ‘first’, so add the code below to increase the size of this text:

p.first {
border-top: 1px solid #cdcdcd;
padding-top: 10px;
font-size: 1.1em;
}

07 Style the pull quote

A pull quote is another typographic device to help pull the reader in, and although you wouldn’t normally find one in a literary text such as we’re using here, it’s a useful technique so we’ve cheated a little and added one here. Blockquote is a good semantic tag to use when quoting a few lines of text, and can be styled just like any other element. Here, we’re going to float it right, then position it beneath the picture by clearing right and make the text nice and big. Additionally, we’ll add a vertical rule using the CSS border property to help separate it from the main content and provide a visual anchor for the text. Finally, notice that the leading (line spacing) is set quite tight here. Add the code below to your style sheet:

/* Pull quote */
blockquote {
clear: right;
border-left: 10px solid #b68e55;
font-size: 2em;
color: #83201a;
padding: 10px;
width: 185px;
float: right;
line-height: 1em;
margin: 10px;
}

08 Review and test

We’re going to add a few bells and whistles in a moment, but before we move on to that final stage, it’s always worth checking progress in a variety of browsers to make sure everything is rendering as it should do. If you’ve got it all right, the page should appear nearly identical in every browser at this point. A good tool for checking is NetRenderer (http://ipinfo.info/netrenderer/index.php), which allows you to view your page in various versions of Internet Explorer.

Pages: 1 2 3