In my research into Golden Ratio Typography, I focused primarily on the core geometric properties of text—font size, line height, and line width.

But there’s another facet of text that nearly all of the existing research on typography deals with: It’s called characters per line (CPL).

If you’ve ever read a study on typography, you’ve no doubt encountered CPL. Many of these studies recommend “optimal” CPL ranges that include anything from 55 to 100 CPL.

With an “optimal” range that large, the CPL you use on your site ultimately comes down to personal preference. This raises one huge question:

How can you tune your typography to an exact (or, at least approximate) CPL?

Tuning Text for Characters Per Line

Before you can tune your text, you have to understand how CPL works and what the consequences of different CPLs are. Here’s the deal:

For any font size, as the CPL increases, the line width also increases.

Figure 1. For a given font size, line width increases as CPL increases. Designers must consider this behavior when determining how wide a column of text should be.

This has some significant design implications, and worse, most designers don’t even consider CPL when choosing a column width for their text. They simply pick a column width, and however many CPL that results in…well, that’s what you get.

Frankly, I can’t stand this imprecise approach. Every decision—especially those involving your design and typography—should have a meaningful rationale behind it.

The bottom line here is that your typography should dictate how wide your columns of text are, not vice-versa.

So, how can you tune your typography to a specific CPL and, therefore, a specific width?

There are two potential approaches you can take here. You can:

1. Use the good ol’ trial and error method, whereby you select different widths, count the characters per line, and settle on the width that you prefer.
2. Figure out a programmatic way to predict CPL, and then choose a width based on this prediction.

Choice number one is a laborious pain in the rear, and it gets old really quickly. On top of that, it’s simply an imprecise approach, and we all know how I feel about that…

Contrary to number one, choice number two sounds great and makes a ton of sense. Problem is, you don’t have a programmatic way to predict CPL…yet.

Using Math to Predict CPL

Recently, I became obsessed with the idea of predicting CPL at any font size, so I set out to uncover a mathematical relationship between font size and CPL.

To do this, I examined text samples in the range of 40–100 CPL at font sizes between 5 and 26px for various fonts. You can see one of my samples in Figure 2 below.

Figure 2. Research sample with Helvetica Neue set to 83 CPL. To determine the average character width at a particular font size, you can divide the resulting width (shown in gray next to each line of text) by the CPL. Click to enlarge.

As I stated above, my goal was to determine the mathematical relationship between font size and CPL for particular fonts (obviously, this relationship will differ slightly from font to font). Here’s how I did it:

Using text samples like the one in Figure 2, I first calculated the average character width (c_w) at each font size by dividing the resulting line width by the CPL value.

Not surprisingly, as the font size increased, the average character width also increased. The next step, however, is where things started to get interesting.

To relate font size and character width, I simply divided the font size (f) by the newly-calculated average character width:

And this is where I noticed something extraordinary—for any font, the value (μ) from the above equation remains constant, even at different font sizes. In other words…

Each font has a character constant, μ, associated with it that relates the font size to the width of each character.

It may not be obvious at first, but this character constant is awesome because it establishes a mathematical relationship between the vertical (font size) and horizontal (character width) dimensions of text.

For instance, if you have a font size of 12px, and the font you’re using has a character constant of 2.3, then 2.3 characters will fit in every 12px increment of width (on average).

Thanks to this relationship, it’s possible to predict CPL mathematically. Here’s how it’s done:

Start with a desired CPL value, and then divide it by the character constant for the font you’re using. This results in a width factor, x_w, which is specific to the desired CPL and font:

The width factor from the equation above tells you how many increments of width are needed to reach the desired CPL. Once you have the width factor, all you need to do is multiply it by the font size to get the predicted line width, w, that will result in the desired CPL.

The aforementioned equations can be simplified and combined into one master equation that relates CPL, font size, and line width for any font:

Alright—now that you’ve seen the basic math behind CPL, let’s bring this together by looking at an example.

Sample Predicted Width Calculation Based on CPL

In this example, the goal is to achieve 75 CPL at a font size of 16px for a font that has a character constant of 2.28. You can use the master equation from above to solve this problem:

So, for a font with a character constant of 2.28 at a size of 16px, a width of 526px will yield approximately 75 CPL.

But what if you wanted to know how wide your text would have to be for this same font at 18px? This is easy because you can simply substitute a new font size into the master equation, like so:

So while you’d need 526px to achieve 75 CPL at a font size of 16px for this particular font, you’d need 592px to achieve the same CPL at a font size of 18px. Pretty sweet!

A Closer Look at Character Constants

The most important concept in CPL tuning is undoubtedly the character constant, μ.

As I stated earlier, the character constant is different for every font. In order to build a CPL prediction algorithm, it’s necessary to examine each font individually to determine its μ value.

This process is more complicated than it first seems, simply because different text samples have different average character widths (depending on the characters that appear in that particular sample).

Figure 3. Both text samples are set to 68 CPL, but the line widths (and thus, the average character widths) are different because the samples contain different characters.

When researching character constants, it’s possible to account for these differences by taking a large enough data sample. If you were to test enough different text samples with each font, you’d eventually nail down a statistically significant value for μ.

Ultimately, though, the character constant is only useful for predicting an approximate CPL value—actual CPL values will differ from line to line depending on the characters involved.

Here’s a quick rundown of the character constants I’ve compiled through my research thus far (note: none of these are statistically significant):

Serif Fonts

• American Typewriter — 2.12
• Baskerville — 2.51
• Georgia — 2.27
• Hoefler Text — 2.44
• Palatino — 2.30
• Times New Roman — 2.60

Sans-serif Fonts

• Arial — 2.31
• Gill Sans — 2.51
• Gill Sans 300 — 2.58
• Helvetica Neue — 2.26
• Lucida Grande — 2.07
• Tahoma — 2.30
• Trebuchet MS — 2.22
• Verdana — 1.98

Monospace Fonts

• Courier New — 1.60

The character constant provides a new, algorithmic way to understand how fat or skinny a font is. Lower character constants are “fatter,” and higher constants are “skinnier.”

Simply put, the character constant is an interesting new way to consider different typefaces.

It will prove handy for designers who are looking for a quick and precise way to select fonts that will exhibit particular aesthetics and spatial properties.

Also—and I really like this—smart programs can use the character constant to work with fonts in a more precise, more predictable way.

Update: A commenter pointed out a perfect potential application—building smarter CSS font stacks based on similar character constant values!

Math, Schmath. Software to the Rescue!

When I unveiled the Golden Ratio Typography Calculator, the point was to make it easy to explore finely-tuned typography without having to do heavy mathematical lifting.

Now, I’m pleased to announce that I’ve incorporated this new CPL research into the calculator, too. All that math you saw above? Yeah, you won’t have to do any of it :D

The upgrades to the typography calculator are powerful. Not only can you optimize your typography based on characters per line, but you can also explore the impact of different fonts on CPL in any setting!

Change fonts by using the font selector that appears on any typographical recommendation, and you can observe how the approximate CPL changes based on the typeface.

Figure 4. Use the font selector on any typographical recommendation to see how CPL changes relative to the typeface. Fascinating, I tells ya!

The Bottom Line

Typography is the most important component in all of design. There’s no doubt about it—design is a language of communication, and words are the most powerful communication tool we have.

It makes sense, then, that we should strive to understand as much as possible about typefaces, their metrics, and how they work.

Using the Golden Ratio Typography Calculator, you can explore the finer points of typography like never before.

You’ll gain insight into line heights, line widths, CPL, and how different fonts behave (grr, baby!). Best of all, you’ll be able to create beautiful typography on your site thanks to the precise recommendations from the calculator.

Right now, there’s a mathematical symphony happening on your website.

Every single one of your readers is subconsciously aware of this symphony, and more important, they are all pre-programmed to respond to it in a particular way.

The question is this:

Is your site’s symphony pleasing and inviting to your readers, or does it turn them off and make it harder to communicate with them?

The Mathematical Symphony of Typography

As it turns out, this symphony is not unique to websites. You “hear” it every time you read a book, newspaper, magazine, or web site—every place where typography exists.

At first glance, you might think that typography and math have nothing to do with one another. After all, typography consists of letters and words, and math is…well…numbers.

But the truth is, typography is a combination of artistic letterforms and mathematical proportions, an exquisite marriage of form and function.

When the mathematical proportions of your typography are harmonious, your site—and your content, specifically—look appealing to readers.

Conversely, when the proportions of your typography are imbalanced, your content isn’t as attractive to readers, and your site seems cluttered and disorganized.

The bottom line is this:

The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content.

So how can you tweak the proportions of your typography to create a beautiful mathematical symphony?

Let’s take a trip down the typographical rabbit hole and find out!

The 3 Fundamental Dimensions of Typography

Every paragraph you’ve ever seen has 3 primary dimensions. The first two, font size and line height, are vertical in nature.

Figure 1. How font size and line height work in web browsers. Font size is measured from the top of a capital letter (S) to the bottom of descending characters (y). Half the line height extends both up and down from the centerline of the text.

The third dimension, line width, is horizontal.

Figure 2. Line height and line width form the vertical and horizontal dimensions of typography.

Taken together, these 3 dimensions are responsible for how you perceive typography.

To get a feel for how these dimensions work together, it’s helpful to look at a few text samples where one dimension is varied and the others are held constant. This way, you’ll be able to see the effect that each dimension has on the other two.

In Figure 3 below, the line height and line width are fixed, and the font size is varied from 13 to 16px.

Figure 3. With the line height and line width held constant, it’s clear that larger font sizes require larger line heights to maintain both proportion and readability.

In the first paragraph of Figure 3, the line height is large enough relative to the font size to produce generous whitespace between the lines of text. However, in the second paragraph, the line height is not large enough relative to the font size to yield sufficient whitespace, and it looks cramped as a result.

This leads to an important conclusion: As font sizes increase, line heights must also increase in order to maintain the geometric proportions of a paragraph. In other words:

Font size and line height are proportionally related.

In the next example, the font size and line height are fixed, and the line width is varied from 233 to 466px.

Figure 4. As the line width is increased, the text becomes harder to read because the line height has not been increased to offset the effect of the width.

Despite the fact that the line heights are the same in the two paragraphs of Figure 4, their readability is quite different because of the differing line widths.

As the line width gets longer, it becomes more difficult to perform a return sweep (the movement of the eyes from the end of one line to the beginning of the next) unless the line height is also increased to account for this effect.

Research confirms this conclusion, too. In a 2004 study from the University of Reading (how ironic), Mary C. Dyson states:

Long line lengths are said to need more interlinear spacing to ensure that the eyes locate the next line down accurately when executing a return sweep…

Bottom line? It’s clear that line heights and line widths are mathematically related in some way. More specifically:

For any font size, the line height must increase as the line width increases.

But what is the exact mathematical nature of this relationship?

Harmonious Proportions and the Golden Ratio

Answering this question might be easier than it first seems because nature has given us a remarkable blueprint for beautiful and effective proportionality.

Evident in plants, animals, the shape of galaxies, and even your DNA, this proportionality blueprint is so pervasive that humans have noticed it for thousands of years. We’ve used it, too—it can be seen in art and architecture throughout history.

So what is this incredible proportion that “really ties the room together?”

I’m talking, of course, about the golden ratio.

When nature needs a proportion to relate things and to provide order on any scale, it tends to use the golden ratio.

With typography, the goal is to relate font size, line height, and line width in an aesthetically pleasing and orderly way.

Could it be, then, that the golden ratio is applicable to typography as well?

The Mathematics of Golden Ratio Typography

As you probably guessed, the answer is an emphatic yes! Here’s how it works:

First, the font size (f) and line height (l) are proportionally related through a ratio (h). Mathematically, this is about as simple as it gets, and the basic equation looks like this:

In the equation above, the optimal line height is produced when h equals the golden ratio (φ). This insight gives us the following equation:

Unfortunately, just knowing the optimal line height for a given font size is not enough.

Earlier, you saw that all 3 typographical dimensions—font size, line height, and line width—affect one another. Therefore, you cannot talk about line height or font size without also considering the line width.

Based on this reasoning, there must also be an optimal line width that corresponds to the optimal line height from the equation above.

Problem is, you don’t know the exact relationship between line width and line height. All you know for sure is that the line width is significantly greater than the line height.

With the help of basic mathematical modeling, you can make an educated guess that the relationship between the optimal line height and line width is exponential. Here’s the simplest equation to express that:

This is remarkable because now, for the first time, you have a solid mathematical basis for the relationship between font size, line height, and line width.

Note to designers: Golden Ratio Typography is intended to serve as a basis for proper typesetting. Factors such as x-height and other typeface metrics also influence typography and should be considered in finalized designs. Golden Ratio Typography provides the most rational starting point for adjustments of this nature.

There’s one little problem here, though: The web isn’t nearly as precise as these equations.

You see, web designers are constrained to using integer values for things like font size, line height, and line width (this will be the case until sub-pixel rendering becomes a reality).

The above equations all yield highly precise decimal values, and simply rounding the answers to the nearest integer produces significant errors that will cause your resulting typographical proportions to be imprecise.

The bottom line is that the web is not optimal, and therefore, the optimal equations presented above are insufficient for fine-tuning your typography in the real world.

Ultimately, if you want precise Golden Ratio Typography on your website, then you’re going to need some tuning equations.

Fine-tuning Golden Ratio Typography for the Web

To understand how typographical tuning works, let’s look at an example.

For a font size of 16px, the perfect line height is achieved when h equals the golden ratio. This yields a value of 25.88854px for the optimal line height. Using this value, you can then determine that the associated optimal line width is 670.21670px.

If you tried to use these values in your site’s CSS, you’d encounter problems.

Because it only resolves integer values, the web cannot display a line height of 25.88854px. Instead, the best you could do for the line height is 26px.

But 26px is greater than the optimal line height given by the equations, and as you’ve seen, you cannot change the line height—not even a little bit!—without also changing the associated line width (otherwise, the resulting proportions would not be precisely “golden”).

Therefore, the process of rounding the line height from 25.88854px to 26px requires that the resulting line width be greater than 670.21670px.

This is the essence of typographical tuning:

If your line width is shorter than the optimal width, then your corresponding line height must be less than the golden ratio. Conversely, if your line width is longer than the optimal width, your corresponding line height must be greater than the golden ratio.

Here’s a graph to help illustrate this concept for the most commonly-used font sizes:

Figure 5. As line widths increase, line heights must also increase to preserve geometric proportions and readability. The horizontal gray line in this graph represents the golden ratio (φ), and you can see how line heights behave relative to this value for the most commonly-used font sizes. Click to enlarge.

Mathematically speaking, the typographical tuning equations are more complicated than the equations you’ve already seen. Fortunately, I’ve done the heavy lifting here, so you can focus on the concept and the results.

Ultimately, you need two tuning equations for the different scenarios you will encounter while setting typography. Depending on the situation, you’ll need to determine:

1. The adjusted line height, given a font size and line width
2. The adjusted line width, given a font size and line height

Here are the equations to do just that:

Using the second equation above, you can determine the adjusted line width for the aforementioned example situation of a 16px font size with an integer line height of 26px.

The adjusted width, which will maintain golden typographical proportions for this scenario, is 685.32505px. For use on the web, this must be rounded to 685px.

Let’s look at another example that will hit closer to home (and this is how you can tune the typography on your own website right now):

What if you wanted to use a 16px font size in a content width of 550px? What should your adjusted line height be in this case?

Here’s how you’d solve that problem:

The answer here is 25.00169px. Once again, this value must rounded to the nearest integer for use on the web, and this results in an adjusted line height of 25px.

Golden Ratio Typography Calculator

Obviously, doing a bunch of math every time you deal with typography will get tiresome very quickly.

To remedy this, I’ve created the Golden Ratio Typography Calculator, which makes it incredibly easy to determine the perfect typography for any situation!

Smart and versatile, the calculator will give you golden typographical recommendations based on the input you provide.

If you enter only a font size, the calculator will show you the optimal line height and line width for that font size.

If you enter only a width, the calculator will show you the best and second-best font size/line height combinations for that width.

If you enter both a font size and a width, you get the whole shebang:

• Optimized typography for your font size and width
• The best typography for the width you’ve provided
• The second-best typography for the width you’ve provided
• The optimal typography for the font size you’ve provided

Go play around with the Golden Ratio Typography Calculator and explore finely-tuned typography like never before!

The Incredible Impact of Golden Ratio Typography

I hinted at this earlier, but I want to make it clear: The stuff I’ve shared with you today doesn’t just apply to the web. In fact…

Golden Ratio Typography can be used to fine-tune the typography of any medium!

Books, newspapers, magazines, websites, e-readers, you name it—they can all benefit from the improved proportions that Golden Ratio Typography provides.

And now, as you begin to view the world through the lens of Golden Ratio Typography, you’ll notice countless opportunities for typographical optimization.

The Bottom Line

Golden proportions are evident throughout the universe, and they occur in places where form and function combine to produce a beautiful, effective, and useful result.

Remember the mathematical symphony of typography?

By employing Golden Ratio Typography, you’ll ensure that your site has a golden symphony that will appeal to everyone.

If you’ve followed my advice over the last few years, then you already know how to use WordPress categories effectively.

But now that you’re using categories in a meaningful way, do you know how to get your category pages to rank well and dominate in the search engines?

Using this tip that I’m going to share with you today, you’ll be able to do just that.

However, before we begin, I need to let you in on a little secret—by default, WordPress does not provide you with the controls necessary to create category pages that have maximum SEO juice.

Fortunately, this is where I come in :D

Add a Unique Headline and Content to Your WordPress Category Pages

Here’s the trick: All you need to do to get your category pages to slay in the search engines is to add a unique headline and some unique content.

Jaw-droppingly simple? Yep.

Possible with a default installation of WordPress? Nope.

But it is possible with the Thesis Website Framework, which adds these essential SEO controls to “edit category” pages in the WordPress interface:

See the Introductory Headline and Introductory Content fields in the image above?

By adding unique content to those fields on each of your category pages, you will make your WordPress category pages rank better in search engines.

How Sugarrae Uses Thesis to Build Category Pages that Rank

Without a doubt, my favorite example of someone who uses Thesis category controls to rank like crazy is Sugarrae.

Check out her affiliate marketing category page, which consistently ranks in the top 10 for the hyper-competitive term “affiliate marketing.”

See the introductory content before the list of posts? It ain’t just sexy, folks—it is essential for getting the maximum SEO benefit from your category pages, and Thesis makes it all possible.

With Thesis, you can take your site to new heights by employing the same strategies as professionals like Sugarrae.

If you’ve never checked it out before, then now is the perfect time to see how Thesis will improve your site.

Unless you’ve been living under a rock, you’ve almost certainly heard the latest news that has the social media universe in a frenzy:

This week, Google released its Google +1 (“plus one”) button to compete with Twitter’s Tweet button and Facebook’s Like button.

In order to capitalize on the potential traffic and exposure that this new button can generate, you’ll need to incorporate it into your site as soon as possible.

There’s one little problem, though.

Unless you’re a ninja, you’re probably going to get frustrated while trying to add the buttons to your site.

For most people, there are just too many options and too many different ways to integrate and configure the buttons, and this leaves them feeling uncomfortable with the result.

I don’t know about you, but whenever I implement something on my site, I like to know that I’ve done it the most efficient and effective way possible.

In keeping with this line of thinking (and also with my company’s focus on making the web faster and easier), we’ve gone ahead and published a detailed tutorial that will help you add the Google +1 button to your site with confidence.

Oh, and here’s a pro tip before you go: Under the “Step One (the API Call)” section, be sure to use Option 2—it’s the one that will yield the best performance!

What’s the latest and greatest on SEO, WordPress plugins, web hosting, and—my personal favorite—the best food in Austin?

I’ll keep you up to speed with that and maybe even drop a hint about Thesis 2 in this 9-minute video interview from PubCon South 2011.

After you check out the video, be sure to take a look at the new DIYthemes Facebook page, where you can interact with other Thesis users and see hundreds of awesome Thesis customizations!

Sadly, the crew at WordPress.com have chosen to retire two of my old themes, Cutline and PressRow.

If you loved these themes and are sorry to see them go, don’t sweat it! Soon, I’ll be re-releasing both of these classic theme designs for free to everyone who uses the Thesis Theme Framework.

And thanks to the power of Thesis, these new versions of Cutline and PressRow will be more optimized, more flexible, and faster than their predecessors.

What is the Thesis Theme Framework?

Thesis is the ultimate theme—it’s a powerful template system that enables you to customize your design, tweak your SEO, and run a world-class website with ease.

While Cutline and PressRow were two separate themes, Thesis is a single framework that does it all. It runs underneath this site, my business site, and tens of thousands of others, and it can accommodate any design!

Thanks to this remarkable flexibility, I’ll be able to offer the Cutline and PressRow designs for free to Thesis users.

For those of you wondering, the Thesis Theme Framework is not available on WordPress.com blogs, as it requires a self-hosted version of WordPress from WordPress.org. If you’re a WordPress.com blogger who would like help moving to the beneficial world of self-hosting, please give me a shout in the comments!

How can you get Cutline and PressRow?

Now that Cutline and PressRow have been removed from the WordPress.com theme directory, I’ve decided to re-release these classic themes for free as skins for the Thesis Theme Framework.

These skins are still in development and will take time to complete, but if you want to be notified the second they’re done, simply enter your email in the box below, and I’ll be sure to contact you.

Thinking about leaving WordPress.com?

Since you can no longer use Cutline or PressRow on WordPress.com, now may be the perfect time for you to become a WordPress.org user.

Personally, I think running a self-hosted version of WordPress is extremely beneficial because it gives you total control over your website and your data.

If you’re considering moving from WordPress.com to WordPress.org because of Cutline or PressRow and need help getting set up, please let me know in the comments so I can help you out!

Update: Here’s an article (including video!) that explains how to transfer your blog from WordPress.com to WordPress.org.

Architecture is endlessly appealing to me. Houses, in particular, capture my imagination because they are so primal in their utility: They provide us with a safe place to sleep, eat, store food, and raise young’uns.

For the last 90 years in America, home architecture has been dominated by profiteering companies looking to churn out cheaper products for higher margins. Market demand and time constraints are generally at odds with innovation and creativity, and this is precisely why qualified architects are only responsible for a small fraction of American homes.

On one hand, this sucks because it means that most houses in America were conceived and built by people who truly don’t know a damn thing about the art of designing a home.

On the other hand, this extreme suckage has made it easier to spot the really good stuff—the houses designed by architects who had a purpose and thoughtful motive behind every last structural detail.

A cursory review of the architects and designers who shaped an emerging, twentieth century America will no doubt reveal classic names like Wright, Neutra, Eichler, Eames, Nelson, van der Rohe, and Saarinen. These artisans—real experts, you know?—are all associated with the most inspired period of design in American history: The mid-century modern era.

When I decided to buy a house in 2009, I went on an all-out mission to find the perfect mid-century modern (MCM) home in Austin. After an exhausting three-month search, I managed to score a classic MCM that does everything right:

• At first glance, the home appears to be oddly situated on the lot, but closer inspection reveals that it’s built on the same axis as the four cardinal directions!
• Extra-tall windows bring in natural light and also serve to unite the house with the surrounding land.
• The flat roof, extended easements, huge windows, and indoor/outdoor feel are all characteristic of my favorite branch of MCM architecture that can be traced back to Richard Neutra.
• Just look at the place—it’s sexy as hell :D

Finally, I’d like to shout out a huge thank-you to Nick Reese, whose badass camera setup and editing skillz made this video possible!

As an important player in the Web software space, WordPress wields a powerful influence in the marketplace. When you’re in a position of such importance, it is your responsibility to purvey accurate information and to refrain from projecting ideologies and agendas on a market that is likely to take anything you say at face value.

My work with Thesis has placed me in a similar position, and I understand how much you can affect the psyche of your customers/users with just a few choice words. It’s powerful; it’s amazing; but most of all, it’s humbling.

As far as I’m concerned, being a figurehead in the market doesn’t mean that you get to be rich, famous, adored, and influential; instead, it means that you always have to hold yourself to a higher standard than everyone else. In other words, you have to do a better, more responsible job because thousands—perhaps millions—of people are dependent upon the solutions that you claim to provide.

Wielding such an awesome responsibility means that there is no room for ideologies, agendas, or anything else.

Solutions are what matters. You can check the rest of that crap at the door.

A few weeks ago, I started receiving tweets and emails from people who claimed that search results for my site were looking more like a pharmacy than a helpful Web resource.

Of course, upon hearing such blasphemy, I immediately opened a new browser tab, looked around to make sure no one was watching, and then started Googling myself…and if you think that is some NC-17 material, wait til you see what my search results looked like:

Figure 1. The three red arrows highlight <title> tags that were cloaked by the WordPress pharma hack. Helpful Web guy or reckless pill-slinger? You decide :D

What you don’t see in the picture above is a hacked <title> tag for my home page, but that’s only because I fixed it before realizing I was going to write an article about these shenanigans.

Suffice it to say that, before I caught the hack, my site looked more like the best damn antidepressant resource than the best damn blog on the planet.

Enough of that, though—let’s dig a little deeper into the WordPress pharma hack and see what it’s all about.

What Does the WordPress Pharma Hack Do?

There are three facets of the pharma hack that I find particularly interesting. First, the results of the hack are only visible to search engines, and if your site is hacked, the public-facing portion of it will remain visibly unaffected. In other words, you won’t be able to spot the hack just by viewing the HTML source. The goal of any hack like this is to gain valuable links from high-ranking pages, and these hackers have wisely chosen to disturb the water as little as possible while going about their dirty business.

Second, like other hacks, the pharma hack must place malicious files in your WordPress folders in order to work its evil. However, unlike other hacks that I’ve encountered, the pharma hack disguises a majority of its code and saves it in the WordPress database, thereby making it more difficult to find and eliminate.

The third remarkable aspect of the pharma hack was that it didn’t affect every page of my site. Further, it only targeted the pages of my site that receive the most search traffic. For example, in Figure 1 above, the three hacked titles correspond with the following posts:

• 2 Sure-fire Ways to Make Money Online
• Deal or No Deal: A Statistical Deal
• How Much Should a Web Design Cost?

Interestingly, these three pages contain the most potent and high-ranking keywords on my site. Also, back when I ran AdSense, two of those three pages were the highest earners on the entire site (as far as PPC is concerned, anyway¹).

With these key points in mind, let’s answer the original question here: What does this hack do?

The WordPress pharma hack quietly exploits your highest-ranking and most valuable pages by overriding the title tag and by inserting spammy links into the page content. Interestingly, the modified title tag and spammy links are only visible to search engines.

How Does the WordPress Pharma Hack Work?

We know what the pharma hack does, but in order to eliminate it and to prevent attacks like this in the future, we need to know how it does what it does.

Basically, the hack consists of two parts—malicious files in the WordPress plugins folder coupled with encrypted code in the WordPress database. The files in the plugins folder contain code that runs the encrypted code stored in the database. Because of this, the pharma hack is dependent upon these rogue files in the plugins folder.

Typically, hack files contain easily-identifiable PHP functions like eval() and base64_decode(), and although the pharma hack is no exception, there’s one major difference. With the pharma hack, these functions are stored in the WordPress database as strings, and they’re encoded backwards! At runtime, a hack file in the plugins folder pulls these strings from the database, flips ‘em, and then runs ‘em as functions, and that’s how the deed gets done.

Oh, and remember how I said this hack only targeted my most potent and high-ranking pages? Cleverly, the hack pings Google Blog Search with queries like this one to see how many links a particular page has, and then it stores the results in the database. At runtime, the hack uses the number of links to determine which pages to target…

Sneaky bastards :D

How to Remove the WordPress Pharma Hack

Even if you don’t see any symptoms of the pharma hack (like cloaked title tags in search results), your site may still be hacked and therefore completely vulnerable. To know for sure, you’ll have to dig through the two places where the hack is known to romp—your WordPress plugins folder and your WordPress database.

Oh, and before we go any further, let’s get one thing straight—you are running the latest version of WordPress, aren’t you? Good, I knew you were the sensible type :D

Step 1: Remove Hack Files from Your Plugins Directory

Let’s start by examining the WordPress plugins folder for hack files. Using an FTP client, navigate to the /wp-content/plugins directory, and then locate your Akismet folder. I’ve recommended this particular folder as a starting point because I found malicious files stored here on three different sites; however, based on what I’ve learned about the pharma hack, these malicious files could be in the directory of any active plugin. Therefore, in order to do a thorough diagnosis, you should check any plugin that was active at the time your site was hacked.

Using your FTP client, make sure your viewing options are set to show hidden files, and then check to see if any of the following malicious files are located in your Akismet plugin folder:

1. .akismet.cache.php
2. .akismet.bak.php
3. .akismet.old.php
4. class-akismet.php
5. db-akismet.php

Ultimately, the important thing to note here is not the filenames themselves, but rather the patterns these names follow.

Items 1–3 are hidden files, and they all exhibit a characteristic naming structure with .cache, .bak, .old, or a similar pseudo-extension in the middle of the filename. Generally, you’ll find two out of three of these files together—one will look like this, and the other will look like this.

Items 4 and 5 share a naming convention, too—they are simply the plugin name (or a truncated version of the full plugin name) prefixed by either class- or db-. If you find a file that matches this convention, its contents should look like this.

Now, when you check other folders, you’ll know what naming patterns to look for when attempting to spot hack files, you sleuth you!

Here’s what one of my infected Akismet folders looked like; note that an uninfected Akismet folder only contains three files (akismet.gif, akismet.php, and readme.txt) and no hidden files:

Figure 2. Two hidden files inside the Akismet plugin folder that were planted by the WordPress pharma hack.

If you find infected files, delete them! Doing this will effectively end the pharma hack symptoms and restore your search results, but it’s important to note that your site will still be vulnerable at this point. In order to completely remove all traces of the hack and restore the integrity of your site, you’ll need to dig into your WordPress database to remove some lingering offensive code.

Step 2: Remove Malicious Code from Your WordPress Database

Because this step involves database interaction, it’s crucial that you pay close attention to the instructions outlined here. Also, it’s always a good idea to make a database backup before manually editing anything, so don’t say I didn’t warn ya!

To begin, you’ll need to access phpMyAdmin, which is a program on your server that allows you to view the databases associated with your hosting account. If you’ve never heard of phpMyAdmin and don’t know how to access it, don’t worry—simply contact your Web host, and they’ll be able to help you out here².

Figure 3. Select the wp_options table in your WordPress database.

Once you’re inside phpMyAdmin, select your active WordPress database from the left side of the page. If you’ve selected the correct database, you’ll notice a new set of links on the left—a collection of tables that look like those shown in Figure 3. From here, click on the wp_options table, and this will allow you to browse the table contents.

Your goal here is simple—you need to delete database entries that contain malicious code. Fortunately, finding the entries you need to delete is a simple job if you use the phpMyAdmin search function, which you can access by clicking the Search tab at the top of the page, as shown in Figure 4:

Figure 4. Click on the Search tab to search the wp_options table inside phpMyAdmin.

On the search screen, you’re going to need to search the option_name field (see Figure 5 below) for the following rogue database entries:

• wp_check_hash
• class_generic_support
• widget_generic_support
• ftp_credentials
• fwp
• rss_% — Attention! In this case, you should delete all matches except rss_language, rss_use_excerpt, and rss_excerpt_length (these are legit WordPress database entries).

Figure 5. Search the option_name field for malicious database entries from the list above. If you find any of these entries, delete them!

What Next? (And Some Helpful Prevention Tips!)

Now that you’ve successfully removed the WordPress pharma hack, you’re probably wondering what you can do to prevent stuff like this from happening in the future. On that note, I’ve got some good news, and I’ve got some bad news. First up, the bad news…

At this time, there is still one huge unanswered question about the WordPress pharma hack: How in the hell did the hackers manage to get into your server in the first place? I’ve received reports of the pharma hack on a variety of different Web hosts and server configurations, so it’s clear that the main vulnerability extends beyond a single host/server platform. So far, the only common denominator between the sites I’ve examined is that they’re all running WordPress, but even this fact doesn’t mean that WordPress itself is the problem.

Alright, with the bad news out of the way, it’s time for the good news: You can prevent hacks like this in the future. Rather than rehash the information here, I’m going to point you to a fantastic resource on WordPress security tips. From the perspective of someone whose site just got dropped from Google’s index because of the pharma hack (that’s me), you would be wise to follow these simple security suggestions :D

I like to solve problems. At this point in my life, I’m focused on solving the fundamental problems of Web design and development through my business, DIYthemes, and my software, Thesis.

One of the most compelling things I’ve learned in the past year, however, is that it’s not good enough to crank out “sufficient” solutions to problems. Truly sustainable answers require a style of thinking that involves patience, perspective, skill, testing, and unbiased criticism. Additionally, it’s crucial to realize that the best solutions we can generate should be reflective of our own human nature—in other words, we must strive to make them as adaptable as we are.

Through my work on Thesis, I’ve begun to see all sorts of new connections that reveal the direction the Web is heading, and I know that I can use these insights to figure out better solutions to the problems I’m already tackling.

Recently, I sat down with Nick Reese from Art of Blog to talk about some of these insights and to share my thoughts heading into 2010. You can check out the original interview on Nick’s site, or you can click here to watch the video in HD on Pearsonified :D