4

Example of Ellipsis

I'm designing a blog with big typography, and was wondering, since I couldn't find a thing on the web about that, if it's a good practice to shorten long titles with Ellipsis. It seems logical that it is not a good practice since user would like to read the whole post title, it's ok just for text excerpts.

  • First problem I see: is the heading in English, or is "mixt" a word in another language? It looks interesting because the word "umami" in the sub-heading, matched with the name "Ruzni" made me turn on my language translation brain. I then take a second look and, "oh it's English". – misterManSam Dec 12 '14 at 15:03
  • Don't mind the example, it's just a generated ipsum text. – Vladimir Dec 12 '14 at 15:07
  • An important thing to keep in mind if you go the ellipses route is kerning. Kerning is the bane of good typography – Andrew Dec 12 '14 at 15:07
  • 1
    Are you providing a way to show the full title? If not then as a user I would be upset that I do not know the full title to what I am reading. What if you decide to start a series and want to title them "Bicycle Repairs - fixing a flat" and "Bicycle Repairs - greasing a chain" and "Bicycle Repairs - fixing bent spokes". I would loathe your site if I am on my mobile and all I see is "Bicycle Repairs -..." – MonkeyZeus Dec 12 '14 at 15:50
  • 1
    I do not think is a good idea to cut off the main title, and put an ellipsys, first due to usability purpose, that is so you can't provide the full main title of the topic; in the other hand, h1 is the main tag for the SEO, and is not a good idea to shorten it. – Giacomo Paita Dec 12 '14 at 20:49
2

In my opinion truncated titles shouldn't be used. It seems to me that you can use a varied font-size depending on string length.

Example

  • Curious, how do you propose to resize based on string length, javascript? And what if the title is fewer large letters 'WWWWWW' as opposed to more small letters 'IIIIIIIIIIII', the I font would be smaller because it's 12 characters even though it already takes up less room than the 6 W's. – DasBeasto Mar 8 '18 at 16:19
  • @DasBeasto, yes, you're right. Actually, I thought about this as well. My best idea is to resize base on parent container width and/or height. I think I'm already seen JS for that. If I'm right, the name of JS library is FitText.js. – Igor Gubaidulin Mar 10 '18 at 12:17
1

It's a common practice to truncate headlines when they are too long.

enter image description here

Key words here being "too long". I'd cut it after three or five first words, because users cannot construct (guess) the phrase by just two words. Another way would be to calculate a physiologically ideal width of column (something around 450 px) and stick to that.

Truncation typically comes in pair with full headline, exposed in tooltip or sliding out of ellipsis, all on hover.

P.s. H1 looks unnaturally big to me here. Here is an amazing instrument for setting up typography on page with automatic coefficients, so that all kinds of text sizes (H1, H2, H3, base text and everything else) are in harmony. http://type-scale.com/ You can choose various coefficients to vary the difference between font sizes.

0

It is actually not uncommon at all to truncate titles. It is obviously not desirable and hopefully can be avoided, but sometimes there are good reasons to do truncation, even on titles. For example, an app in multiple languages may look fine in English but the headers could break your layout in another language - overflowing a div, introducing unwanted line breaks, etc.

With any kind of strings that are dynamic in length you should settle on a maximum width and then explicitly handle the cases where the string doesn't fit. Truncation using dots is not a bad solution, as long as you provide an easy way to see the whole string. Include an alternative mechanism to display the full text (don't rely on the title attribute, and consider touch devices). Don't forget about screen readers, give them the unabridged version.

Your Answer

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

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