Sometimes a layout doesn't look great for all the different variations in data it will have.

For example:

Say you have a style set for the headings on a particular type of page, like a product page.

For almost all products, it looks great the way you have it.

But theres one product page where the heading is too long and causes an ugly line-break to occur. You cannot rename it to something smaller either.

At this point you have 3 options:

  1. Do nothing, just deal with it.

  2. Change the font-size for all product page headings.

  3. Change the font-size on a case by case bases when its too long for one line.

The bad thing about option 1 is most look great but some look awkward.

The bad thing about option 2 is you are degrading the look of all the pages (granted marginally, but still degrading) just to accomadate a few, seems like there should be a better way?

The bad thing about option 3 is the font size is not consistent, creating a less uniform look. Also this can get out of hand, like using inline styles, if you do this too much (or at all) it can lead to a real maintenance nightmare.

So whats the ideal choice? Is there an option I left out?

  • Why does a line break in a product name cause the design to break and look ugly? If that's really the case, I think that the flaw you have is that your design is not flexible enough to handle a data-driven website. Can you post a screenshot of the offending page so we can see what this looks like? Feb 23, 2011 at 14:00

2 Answers 2


Option 4: Customize the display of long headings

You might not be able to rename the product(s) with long names - but you can change the way that long names display.

Possible approaches include:

  • Truncate long product names at 60 characters, adding an elipsis (...)
    Variations: After how many characters should you truncate? do you look for a word break? Do you show a tooltip with the full product name?
  • Detect long product names and switch to an explicit style
    Variations: Use a smaller font size; insert a line break and force a two line heading
  • 3
    +1, and yes, you do show a tooltip with the full title.
    – peterchen
    Feb 23, 2011 at 10:14

I don't think that there is an ideal solution. All involve some form of compromise. You just have to decide what you are prepared to compromise.

I think option 2 is the least worst solution as it retains consistency across the site/application which is probably the most important thing. Your users will expect the various parts of the page to be in the same place on every page.

Option 3 might work if you can ensure that the heading occupies the same "physical" space on each page. This might require having slightly more white space on the "normal" pages.

Option 1 is probably the worst option as it could give the impression that the page is broken in some way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.