Make Telephone Numbers Look Slick on the Web

The IPhone browser (and some other browsers/email clients/plugins) will automatically detect phone numbers and style them.  This automatic styling might not look so hot, so its best to always explicitly style phone numbers yourself, if possible.

Here’s the basic method:

<a href=”tel:555-555-5555” class=”phone_number”>555-555-5555</a>

The “phone_number” css class should have, at a minimum in my opinion:

    .phone_number:link,visited,hover,active
    {
        color:#5399d4; 
        font-size:15px;
        font-family: Arial, sans-serif;
    }