We recently got into a design discussion with our Web Graphics Designer. We wanted to alter one of our logos to incorporate some text in order to distinguish the main logo from a subset of it, but still show the association. Specifically, a main health insurance plan from one of it's specific medicare offerings.

Creating another new logo is probably not an option for now as adding text to the existing one would be a much faster solution. Also, it seemed best for association to place the text near the logo to the right of it, although that is an assumption on my part.

She wanted to use a vertical bar for the separation and create a second logo instead. Regardless, does a vertical bar usually imply the idea of "And" or would incorporating text with a logo be the proper way to distinguish a subset?

I did find one example, here in St. Louis there is this type of format between a Health Insurance Company and an associated university displayed on the schools letterhead, divided by a vertical bar:

BJC Institute of Health | Washington University School of Medicine

Aftermath: The corporate designer got involved and had the final say. She opted to use the original logo with a bar and then text to the right of it.

  • 1
    I think it depends a lot on context, positioning, design/size of the bar, etc. but I do tend to use them in designs to create a sort of visual separator for like content. Sort of used like a comma to pause between the parts.
    – DasBeasto
    Jan 7 '16 at 16:44
  • It depends on weight. In your example (plain text) both have same weight, so the bar gives the idea of "AND". But if first text was greater then second, it would be different.
    – panna
    Jan 7 '16 at 17:11
  • I hadn't thought of that. In our case the text would be the same weight, but in the two logos, it would be somewhat smaller. I will see if I can get an example of the latter.
    – user9533
    Jan 7 '16 at 17:20
  • 2
    I think graphicdesign.stackexchange.com is probably a more appropriate place for this question. (That is, you're more likely to get better answers over there, I'd think.)
    – Nate Green
    Jan 7 '16 at 17:20
  • Why are you questioning the graphic designer's decision? Jan 7 '16 at 19:47

It's a typographic element that divides two sections of text.

In the context of logos, that's less of a UX question and more of a Graphic Design question--specifically a question for your branding team. If that branding team is you, then it's your call. :)


What @DasBeasto said in the comments.

A vertical bar in interface design is typically used as a visual separator between two groups of content. The separator tends not to imply "and".

Here's an example from our company's app UI enter image description here

We used a separator in denote slight differences between the importance of the items in the navigation. Placing more emphasis on the logo (home link) by placing a divider between it and the rest of the items.

In terms of what content goes onto either side of the separator, there really isn't any set conventions.

In most western languages, we read from left to right. So having the primary item to the left, followed by subitem to the right is a sensible option.

Aside: I would say, nowadays, most Web Designers are familiar with basic UX conventions. Since you're hiring a designer, trust in their expertise in the field. They know what they're doing. :)

  • If I implied I didn't think the original designer knew what she was doing, I apologize. It actually turns out that the corporate designer got involved and her design is the one that won out.
    – user9533
    Jan 7 '16 at 22:31

The bar, as you put it, and adding some text isn't strong enough to communicate your intent of separating and adding value to an altered mark. This is unless you took it further by using a different font or a different color, something to denote a clear separation from what the mark was from what it is now. Then you are making progress toward making a differential identity.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy