Much has already been written (Billboard, Wikipedia) about Nine Inch Nails’ viral marketing campaign for Year Zero (2007), their most recent album. The marketing campaign consisted of clues, a bit like The DaVinci Code: things like USB drives left in NIN concert bathrooms; coded messages on T-shirts that yielded URLs; ‘fake’ forums, etc. In essence, various media were used to direct the curious and the fanatic to peculiar websites, such as

• http://iamtryingtobelieve.com/, and
• http://anotherversionofthetruth.com/

Even more striking, as a media/marketing effect, was ‘embedding’ an image in the static at the end of the song “The Warning”. This shape, like an elongated arm, is known as The Presence, and is featured on the album cover. (You might speculate that the spectrograph was what it was, and the hand-like pattern got noticed and then the album-cover was conceived. But that would make you an unbeliever.)

Other sources (1, 2) claim the image is in the song “My Violent Heart”, but I have not seen it there. I have only seen it in “The Warning” (see the detail from my spectrograph, created with Audacity).

Leaving aside the cleverness of the campaign, this article takes a closer look at one of the campaign sites, http://iamtryingtobelieve.com/ , in order to learn some of the CSS/HTML techniques used. http://iamtryingtobelieve.com/ was created by 42 Entertainment. Below is a screenshot.

Typographic Distortion Effects

Below is a screenshot detail from the “How Does Parepin Affect You?” page, http://iamtryingtobelieve.com/howdoes.htm. As you can see, there are a couple of typographic effects—larger font sizes and the weird unfocus/distortion effect (’administration approved’)

These effects are, in fact, not created graphically in an editor, but through CSS/HTML rendering in the browser. Thus, all the text is in fact live text, and easily digested by search engines.

Code

Here is another screenshot detail:

The code looks like this (reformatted for readibility):

<span style="color:Red; font-family:Georgia;
font-size:30px; font-weight:bold;">
    HOW DOES PAREPIN AFFECT
    <br />
    YOU?
</span>
<p style="width:520px; padding-left:20px;
position:absolute; top:234px;">
    We’ve all heard a lot about how Parepin isn’t addictive, and
    h<span class="one">ow its side effec</span><!--ts are rare-->
    <br />
    an<span class="left">d mos</span>tly mild. I can attest that
    <span class="bigWhite">Parepin isn’t addictive</span>, at least
    in my
    <br />
    case, because
    <span class="bigWhite">
        I eli
        <span class="leftUp">
            minated it
        </span>
    from my system about two
    <br />
    months ago and had n<span class="left">o adver</span>se
    affects.</span>
</p> 

<p style="width:520px; padding-left:20px;
position:absolute; top:234px;">
    We’ve all heard a lot about how Parepin isn’t addictive, and
    how its side effects are rare
    <br />
    and mostly mild. I can attest that <span class="bigWhite">
    Parepin isn’t addictive</span>, at least in my
    <br />
    case, because <span class="bigWhite">I eliminated it from my
    system about two
    <br />
    months ago and had no adverse affects.</span>
</p>

That is not a typo. The same content is entered twice, in two separate <p> tags, which overlap each other exactly, thanks to the position:absolute in-line CSS in the code, <p style="width:520px; padding-left:20px; position:absolute; top:234px;">. Thus, certain distortion effects will occur when the text does not overlap perfectly.

The first of these is employed using the tag. The CSS for this is:

.one {
    letter-spacing:-1px;
    text-transform:uppercase;
}

This is self-explanatory—it converts the text to uppercase, and changes the letter-spacing to -1px.

Let’s take a look at the two effects separately:

• Text-transform:

  E pluribus unum

  (<p>E pluribus unum<p>)

  E pluribus unum

  (<p style="text-transform:uppercase">E pluribus unum<p>)

• Letter-spacing:

  E pluribus unum

  (<p>E pluribus unum<p>)

  E pluribus unum

  (<p style="letter-spacing: -1px">E pluribus unum<p>)

Combining the two:

E pluribus unum

Overlaying this on top of “E pluribus unum” would mimic the first distortion effect we see in the “How Does Parepin Affect You?” snippet above.

A second class, <span class="left">, is used for the text “and mostly mild”. Its mechanism is to print “d mos” 2px to the left the first time, and overlay a normal copy of “and mostly mild” on top of it:

.left {
    left: 2px;
    position: relative;
}

.one {
    letter-spacing:-1px;
    text-transform:uppercase;
}

.left {
    left: 2px;
    position: relative;
}

.bigWhite {
    font-weight:bold;
    font-size:18px;
    font-family:Georgia;
}

.leftUp {
    left: 3px;
    top: 1px;
    position: relative;
}