Is it a good practise to put Ellipsis on H1

by Vladimir   Last Updated March 08, 2018 16:16 PM

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.



Answers 3


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.

illuminaut
illuminaut
December 14, 2014 08:21 AM

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.

Zoe K
Zoe K
December 14, 2014 09:37 AM

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

Igor Gubaidulin
Igor Gubaidulin
January 13, 2015 11:01 AM

Related Questions


User Experience in reading blogs

Updated May 15, 2015 08:07 AM


The Ideal Typographic Measure

Updated March 27, 2015 05:05 AM

How easy to read are small caps vs lower case?

Updated March 08, 2018 15:16 PM

Why center align text in 2018?

Updated July 20, 2018 21:16 PM