how to match text with google ads? 2

[iluvperl]

Anyone familiar with matching their text and links with google ads?

http://www.spyderscripts.com/ads/ads.html

The top one is the ad, the rest are my links and text I want to match identically. I can't put my finger on it but the fonts or the sizes between their ads and my text aren't identical. Are they using a differnet font? Is there's a different size?

Also, why do MY links have a gap between the link and the underline? I've never had that happen before.

 

[Foamcow]

You are using a completely different font to the Google ad.


They are using san-serif fonts (Verdana), you are using serif fonts (Times).
The serif is the "twiddly" bit on the ends of the characters.
Sans-serif fonts don't have these.


<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[iluvperl]

Thanks.

You were right about the font and I have it matching the normal text now but I can't match the TITLE text. The link font I use is either too big or too small, I can't seem to match it up.

Any ideas on what size to make it?

 

[ChrisHunt]

The Google ad appears inside an <iframe>. To see what's going on, right-click on it and select "This Frame > View Frame Source". The Google code is pretty terrible (<font> elements used as <span>s FFS!), but the appropriate part is:

[b]<font style="font-size:11px; font-family:verdana,arial,sans-serif; line-height:14px;">[/b]
<a class="ad" id="aw0" target="_top" href="/pagead/iclk?sa=l&ai=BuV ... etc ..." onFocus="ss('go to [URL unfurl="true"]www.TShirtStudio.com','aw0')"[/URL] onClick="ha('aw0')" onMouseOver="return ss('go to [URL unfurl="true"]www.TShirtStudio.com','aw0')"[/URL]  onMouseOut="cs()">
[b]<b>Design your own Jigsaws</b></a></font>[/b]

So the text in question is 11px verdana bold, with 14px line height.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

Instead of using <font> tags try using CSS style attributes or better still, an external CSS file to control the font size.

By using nice semantic markup and a CSS file you can alter the look of all the elements on your page with a couple of simple CSS rules.

For example, if you had set all the headings for those ads as <h2> tags then you could use a style sheet to say:

h2 {
    font-family:verdana,arial,helvetica,sans-serif;
    font-weight:bold;
    font-size:10px;
    color:#000000;
}

This would make all your h2 elements 10px, bold and black.
If you needed them to be blue, you just change the stylesheet and the job's done!

I'd guess and say that the heading text is around 10px bold Verdana.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Foamcow]

Sorry, typed my message ages ago and didn't post it so I missed Chris' response

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Tarwn]

Thats ok, I'm still kicking myself for never grasping Serif vs Sans-Serif. It seems so obvious now, serif has serifs, sans-serif is 'without'...

 

[iluvperl]

Foam and Chris both get stars for this one

I never thought of right clicking the iframe's source, that's a neat trick. Thanks everyone!