A Long Business Name in a Small Header

The header is a fixed budget

A header row has to contain the business name, a route to the rest of the site, and usually a way to make contact.

On a desktop there is room for all three and on a phone there is room for about one and a half.

A short name leaves space for the other elements, and a long one takes it.

Which makes this a design problem about allocation rather than about the name itself.

The options, in order of preference

• Stack it onto two lines.
• Drop the tagline entirely.
• Use a short form plus a mark.
• Reduce the menu to a button sooner.
• Shrink the name as a last resort.

The first is the simplest and least used. A name that runs to five words across is fine as two lines of two and three, which halves the width it needs and costs a little height that a header usually has spare.

The tagline is usually the thing to lose

Since it is the element earning least in that space.

A tagline in the header is read by very few people, competes with the name, and takes width that the navigation needs.

What it is trying to say, which is usually what the business does, belongs in the first line of the page where somebody will actually read it.

Moving it there frees the header and improves the page, which is an unusually clean trade.

Where the tagline is genuinely part of the identity and appears on vehicles and signage, keep it on the desktop header and drop it on the phone.

Shortening without losing the name

The option businesses resist and frequently should take.

A long formal name can appear in full in the footer, on the about page, and in your legal terms, while the header uses a shorter working version.

That is what customers do anyway, since somebody who calls you by the first two words of your name is telling you what the short form is.

An initial-based mark works where the full name is genuinely unwieldy, provided the full name is visible immediately below or beside it.

What does not work is initials alone with no expansion anywhere on the page, which loses the one thing a stranger needs to identify you.

Ask three customers what they call your business, and use that.

A worked example

A business with a six-word name and a tagline had a header where the name occupied about seventy per cent of the width on a phone.

The navigation had been reduced to a menu button squeezed against the edge, and there was no room for the telephone number.

They stacked the name onto two lines, removed the tagline from the header and put it as the opening line of the home page, and used the resulting space for the phone number.

The header ended up the same height as before, since the two-line name matched the height the tagline had occupied.

Calls from the site rose, which they attributed entirely to the number now being visible.

Never make it an image

Worth stating separately, since the usual response to a fitting problem is a logo file.

A name rendered as an image cannot reflow, cannot be resized sensibly by the browser, and cannot be read by anybody using a screen reader unless somebody wrote the alternative text.

It also becomes blurry on high-resolution screens unless a second version was supplied.

And it fixes the aspect ratio, so the only response to a narrow screen is to shrink it until the text is unreadable.

Set the name as real text and use an image only for a mark or a symbol beside it.

Where a designed wordmark is genuinely required, supply it in a format that scales cleanly and always add the alternative text.

Test the extremes

Since the failure happens at widths nobody looks at.

Check the narrowest phone you can find, where the name and the menu button are competing directly.

Check with the browser text size increased, which some people run permanently and which expands the name relative to everything else.

Check in landscape on a phone, where the header height matters more than its width.

And check what happens at the width where the desktop menu collapses to a button, which is the transition that usually breaks first.

The name is the earlier decision

Worth saying for anybody who has not yet chosen one.

A short name is easier to fit, easier to say, easier to remember, and easier to type into a search.

None of those is a reason to rename an established business, since recognition is worth more than convenience.

But a business choosing a name now should know that every extra word costs something in every place the name appears, permanently.

Two words is comfortable, three is workable, and beyond that you are designing around it forever.

Check where else it has to fit

Since the header is the visible constraint and not the only one.

The same name has to work in a browser tab, a search result, a business listing, a social profile, and an email signature, each with its own limit.

A search result title is cut off at roughly sixty characters, so a long name followed by the page name means the useful part disappears.

Put the page subject first and the business name last in your titles, which is the convention and matters more with a long name.

Check what your own results actually look like by searching for your business, since that is the version most people see before they ever reach the header.

The counter-case

Some names have to stay in full.

Professional practices, anything where the name is a legal entity customers search for, and businesses whose name includes the service are all better in full than abbreviated.

A long name is also frequently more descriptive, which helps somebody understand what you do before reading anything else.

And a stacked two-line name is a perfectly good solution that requires no compromise at all.

Stack it, drop the tagline, keep it as real text, and check the width where the menu collapses.

What to do

1. Stack the name onto two lines.
2. Move the tagline into the page.
3. Ask customers what they call you.
4. Use the short form in the header.
5. Keep the full name in the footer.
6. Set it as text, never an image.
7. Test at the collapse width.

Step two frees the most space for the least loss, since a tagline in a header is read by almost nobody and is taking room the phone number needs.

What else is competing for that row is covered in sticky headers and the space they eat.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.