Problem with text spacing (images included)

[slev]

Hi I’m having a problem with some text spacing, while using the font “pacific” from the google font api. The problem occurs when i use an “&” which is in part of the companies name i get what looks like a double spacing
like this

the code for this is

Welcome to Light &Space

BUT I WANT IT TOO LOOK LIKE THIS

which i acheve by

Welcome to Light &Space

NOTE THERE IS NO SPACE BETWEEN THE & AND THE WORD “SPACE”

any ideas how i could acheve this whilst spelling it correctly ? i normally would just put it in but seeing as its my H1 tag on my index page i though i should get it right for sep purposes ..

thanks in advance
Sam

[jamygolden]

Hmmm, yeaaahhh… This is the only thing I find annoying about custom fonts. How about an image with text-indent? The content will still be there for Google to see.

[Brightonmike]

Wrap the ampersand in span tags and give a negative right margin?

[Brightonmike]

Sorted:

http://jsfiddle.net/kqVGD/

[joshuanhibbert]

@Brightonmike Is spot on, although you could use letter-spacing instead of margin-right if you wanted to get all semantic about it.

[wolfcry911]

how is using letter-spacing as opposed to margin any more or less semantic?

[joshuanhibbert]

@wolfcry911 I could be wrong, but wouldn’t it make more sense to use the property that is designed to control the spacing between letters?

[Author]

Posts