Some people love a website gushing with high-end graphics, and that’s fine because imagery has it’s place.

But what if you interviewed someone in the most stylish of clothes and the second they uttered a word it was complete nonsense?

So it goes on the net: Good content should be well formatted and readable, For pointers about creating user friendly content see The New Real Estate Crash.

So why am I gushing over usability when all we’re doing is styling a text logo?

Here’s a typical text logo:

And here it is with styling:

Before we go further, the styling above, in my opinion, is overstated. The shadow is too dark and the offset too far from the top layer. I made the comparison for effect because simple and subtle is better.

Let’s do another take:

Compare this with the first image and you’ll see a nice difference. All I did was add another layer of text below the original text, change it’s color and offset it about 2-pixels to the left and top.

This is easy to accomplish, so let’s start.

First, here’s Artisteer’s HTML for the text logo:

<div class="art-Header">
<div class="art-Logo">
<h1 class="art-Logo-name"><a href="/">Designs by Arty Marty</a></h1>
</div>
</div>

Next, is the CSS.

.art-Logo-name
{
display : block;
position: absolute;
left: 216px;  /* Left position offset from the parent <div> */
top: 10px;  /* Top position offset from the parent <div> */
width: 634px;
}

h1.art-Logo-name
{
display: block;
text-align: right;
}

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size: 27px;
font-style: normal;
font-weight: normal;
text-decoration: none;
letter-spacing: 3px;
padding: 0;
margin: 0;
color: #F0CE42 !important;  /* Color value for top text layer */
}

What we’ll do is simply clone what is already there and create a new syle sheet class.

Let’s add the new syle sheet class name to the HTML document. It will look something like this:

<div class="art-Header">
<h1 class="art-Logo-name"><a href="/">Designs by Arty Marty</a></h1>
<h1 class="art-Logo-name-layer"><a href="/">Designs by Arty Marty</a></h1>
</div>

You can see the <div> tag now has two syle sheet classes: “art-Logo-name” and “art-Logo-name-layer”.

Now let’s adjust the style sheet.

The original CSS is above. We’ll use most of the same styles applied to the new “art-Logo-name-layer” class and adjust the color and position. You’re style sheet will look something like this:

/* Logo Name - Bottom Layer */
h1.art-Logo-name-layer
{
display: block;
position: relative;  /* See note below */
left: 2px;  /* Left position offset */
top: -34px;  /* Top position offset */
z-index: -1  /* Set beneath art-Logo-name */
}

h1.art-Logo-name-layer, h1.art-Logo-name-layer a, h1.art-Logo-name-layer a:link, h1.art-Logo-name-layer a:visited, h1.art-Logo-name-layer a:hover
{
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size: 27px;
font-style: normal;
font-weight: normal;
text-decoration: none;
letter-spacing: 3px;
padding: 0;
margin: 0;
color: #333333 !important;  /* Color value for bottom text layer */
}

The text layer in my website’s header is layered below and offset to the top layer.

That’s it. Try it and see how it works for you.

Note: Because my logo text is right-aligned, I use the style, “position: relative;”. So, the new style sheet class, “h1.art-Logo-name-layer”, is positioned relative to the preceeeding object, “h1.art-Logo-name”, not the parent container, <div class="art-Header">.

In most cases, you’ll use the style, “position: absolute;”. Moreover, you’ll need to adjust the top and left offset for your particular situation to the parent container.

Download the example for all of the hacks.

Now...back to why font choices and usability are important. Keep reading. >

ShareClose