Fancy Ampersands

Add some flair to your blog through CSS & PHP

Ampersands are one of those things that kinda gets over­looked in Web Design. I mean, it’s a pretty small char­ac­ter, & peo­ple don’t really pay that much atten­tion to it. Not fair, right?

Though seem­ingly insignif­i­cant, the amper­sand has a beau­ti­ful face, often masked by the sturdy Roman char­ac­ters that sur­round it. I say it’s high time to take away the cur­tain and let this char­ac­ter show it’s stage presence.

But how can such a thing be accom­plished? Let’s take a look back stage.

First let’s take the hum­ble amper­sand and seper­ate it from it’s surrounds:

<span class="amp">&amp;</span>

Now we’ll dress it up with a bit of CSS.

First we have the font-family. Some fonts con­tain fancier amper­sands than oth­ers. Here I’ve cho­sen a group of fonts that have styled it sim­i­lar to what you see on this page. However, this is only avail­able in the italic vari­ant, so we set that prop­erty too. Finally, because head­ings are usu­ally bold, and we don’t want that to stop the fanci­ness, we make sure that is set to normal.


Alright, now it’s all well and good to be able to man­u­ally improve our amper­sands appear­ance when we want to, but wouldn’t it just be eas­ier to have this done auto­mat­i­cally, no hav­ing to add a span around each amper­sand individually?

Yes, it would, and it only takes a bit of PHP.

What the reg­u­lar expres­sion below does, is look inside $con­tent for any occur­rences of &amp; that are not inside of a tag (&‘s are com­monly found in url’s, and replac­ing those will break the link). I’ve also made one that checks for the numeric ref­er­ence aswell.

.amp {
font-family: "Goudy Old Style", Baskerville, "Palatino Linotype", Palatino, serif;
font-style: italic;
font-weight: normal

$content = preg_replace("@(?![^<]+>)&amp;@", "<span class=\"amp\">&amp;</span>", "$content");
$content = preg_replace("@(?![^<]+>)&#038;@", "<span class=\"amp\">&#038;</span>", "$content");

If you’re using WordPress you could place the fol­low­ing in your functions.php file:

add_filter('the_content', 'fancy_amp');

function fancy_amp($content) {
  $content = preg_replace("@(?![^<]+>)&amp;@", "<span class=\"amp\">&amp;</span>", "$content");
  $content = preg_replace("@(?![^<]+>)&#038;@", "<span class=\"amp\">&#038;</span>", "$content");
  return $content;

And that’s it!

6 people have left a comment

robert phillips said:

It *almost* works for me.

I’m try­ing to use it in the tagline (what Headway calls it), aka “blog description”.

Exact copy/paste into functions.php.

I think the prob­lem is with my CSS, but I’m run­ning out of ideas:

span.amp {
font-family: “Goudy Old Style”, Baskerville, “Palatino Linotype”, Palatino, serif;
font-style: italic;
font-weight: nor­mal



    Hi Robert,

    The above php code to insert into functions.php applies only to the con­tent of a post or page. For the tagline, the eas­i­est way would be to open header.php and replace the text that says get_bloginfo('description') with the actual tagline, with the span around the ampersand.

    Also, if you want to apply the same styling to amper­sands in the title of posts/pages, copy the above code, and replace the_content with the_title.

      robert phillips replied:

      Thanks, Alex!

      It’s odd. I did copy/paste using Text Wrangler, fol­low­ing your instruc­tions to the let­ter. Tried it with Headway and a cou­ple of really basic frame­works such as Carrington. Aside — some themes don’t even have get_bloginfo(‘description’).

      What I found when I could insert all the php code is this. Of course the page ele­ments get the span. But — still — the Description does not have the span injected.

      Given that you’re very into wp typog­ra­phy (unlike vir­tu­ally every the­mer who *claims* to be into it; con­sider Thesis, for exam­ple :D), there’s obvi­ously no issue with your code. And the search/replace using TextWrangler is a no brainer.

      But some­thing is amiss.

      If you’ve got any quick ideas, I’m game to keep try­ing. But if it’s not time-effective for you, I surely understand.

      But I’m start­ing to think that for prac­ti­cal pur­poses, I should just fire up Photoshop and set the type like I want it into a trans­par­ent back­ground jpg header image. We both know that *must* work.


    I agree that doing the descrip­tion in Photoshop would be a good idea, espe­cially as it involves site brand­ing and will be con­sis­tent cross browser.

    I had a look at the Carrington blog theme, and you’ll find the line you need to change in header/header-default.php, on line 65. I just remem­bered that most themes will be using bloginfo('description'), with­out the get_, which might be why you couldn’t find it.

    Just replace the php with your text (eg. <p id="blog-description"><span class="amp">&</span> this is my blog</p>), and that should work.

robert phillips said:

That did it, Alex. Exactly as…advertised :D!

I hink the real issue is me and php. Although I’m totally w/o fear of CSS, php makes me…a bit ner­vous. So what I’m doing is just pre­cisely doing what I’m told w/o under­stand­ing it.

So while it worked just fine for Carrington Blog…when I did Headway 1.66, which is the theme that I really want to do it in, every­thing went kaboom (the error mes­sage was a php error in line 64).

I didn’t panic. A sand­box offline, and I just copied over a fresh file and that was that.

And don’t *you* panic. I think we both need a beak from this. Especially you, since this got you into just a bit more than you’d planned when you did the post :D!!!

IF I decide it’s a must-do for Headway, I’ll send you the pre­cise line(s) of php and you can tell me exactly what my direc­tions are. AND — since this would be going *way* beyond sup­port for a post, I will expect (nay, demand) to pay you for what your time is worth.

Thank sso much or stay­ing with it this much!


Leave a Reply

* Required

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <q cite=""> <strong> <sub> <sup>