Basic Text Styling With CSS

Ugly Text

By default, browsers produce ugly text. I don't care what you say, it's true. There's nothing pretty about a black, 12pt, serif font on a white background. Users expect text on a webpage to match the sites theme and to look clean and professional. Text that is styled well should be easy to read and, more importantly, easy to scan through. This applies to all text, especially in structural elements such as headers.

So how do you go from hideous browser-default text to stunning, professional type? With a few lines of CSS, of course.

Making Changes

It's easy to change the font-family, font-size, and color using CSS. My guess is these are the first things that people change when they start styling text. That's perfectly fine, in fact, that's the way I do it, too. Before we start applying styles, let's see what we have to work with without any styles at all:

Example with no styles

As you can probably tell, we'll be working with an h1, an h2, a blockquote, and two p elements. For fun, I've also thrown in a hyperlink and an abbrev (abbreviation) tag.

Styling the paragraph text

Let's start out by making the paragraph text a sans-serif font — how about Verdana? We'll set the size to 11px and leave it at that.

Styling the headers

Next, we'll move on to the headers. This time, let's keep with the serif-style fonts except change the family to Georgia. To make them stand out more appropriately, the h1 element will be 18px, bold, and dark green, while the h2 element will be 14px, normal, and a medium green.

Styling hyperlinks

Since the blue hyperlink isn't going to match the theme we're creating, we'll make it dark green (#006600). This is, so far, an improvement, but can it look any better?

Taking it a step further

Adjusting the paragraph text

The first thing I'm going to enhance is the paragraph text and the blockquote text. I'm going to make a few changes that most people never think of doing, but they are changes that make content much more pleasurable for readers.

The default text color is usually black. I'm going to set it to a semi-dark shade of gray, specifically #555555. Colors like this on a white background seem to pull the design together and tend to be less strenuous to readers. Of course, if your background was black you would want to use something lighter instead.

Letter-spacing

Verdana is a good font to use on the web, but in small sizes it looks a bit cramped. The first adjustment I'm going to make is very subtle. Using the letter-spacing attribute, I'm going to set the letter spacing to .25px. Here is a comparison of the first line of text with both default and customized letter-spacing:

Example of letter spacing

At first, this adjustment seems trivial, but with a lot of content this effect will really show its value.

Line-height

Next, let's adjust the line-height to 1.5. Notice how there isn't a unit of measurement attached to the value? Although you can use them here, line-height is one of the few CSS attributes that doesn't require units.

Revisiting the header elements

I'm going to use the text-transform attribute to force the h1 element to be capitalized. This will help the main header stand out more and improve scannability. I'm also going to add a green border of 1px underneath, to make it look more prominent.

For both h1 and h2 elements, I'm going to add letter spacing of 1.4px and 1.2px, respectively.

Pointing out acronyms and abbreviations

A popular way to inform readers of acronyms and abbreviations is to add 1px, dotted borders directly underneath the text. Let's go with the darker green (#006600) color.

When choosing a border color for acronyms and abbreviations, keep in mind that the presentation of the element should not be overpowering. Users shouldn't know that they're looking at an acronym or abbreviation until they get to it during the natural reading process.

Styling the blockquote

The finishing touches will be placed on the blockquote element. I've decided to set the font to Georgia, darken the color a bit (to #444444), adjust the line-height and letter-spacing, add a light background, and play with the padding and margins.

The final result

Here's what all of our adjustments did to the original design:

Final example

Of course, there are a million other things we could have done to enhance the style of the text in this example. I could have opted to use different fonts, sizes, colors, line-heights, letter-spacings, etc. The idea was to introduce a few useful CSS tips that will help you produce better looking text, increase scannability, and create a more professional design overall.

The complete CSS code after all of the adjustments looks like this:

H1 {
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: bold;
	color: #006600;
	letter-spacing: 1.4px;
	border-bottom: solid 1px #006600;
	text-transform: uppercase;
}

H2 {
	font-family: Georgia, serif;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 1.2px;
	color: #009900;
}

P, BLOCKQUOTE {
	font-family: Verdana;
	font-size: 11px;
	color: #555555;
	line-height: 1.5;
	letter-spacing: .25px;
}

BLOCKQUOTE {
	font-family: Georgia, serif;
	font-style: italic;
	color: #444444;
	letter-spacing: 1.25px;
	line-height: 1.5;
	background: #EEEEEE;
	padding: 5px;
	margin: auto 15px;
}

A {
	color: #006600;
}

ABBR {
	border-bottom: dotted 1px #006600;
}

And, of course, the XHTML:

<h1>This is an H1 Header</h1>

<h2>And this one is an H2 Header</h2>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod <a href="http://example.com/">
    tempor incididunt</a> ut labore et dolore magna
    aliqua.
</p>

<blockquote>
    Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</blockquote>

<p>
    Duis aute <abbr title="Identification">I.D.</abbr>
    in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.
</p>
Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.