22

In one of the sites I developed, the title of the pages is always one word. It's one word but the length of the words are different. I want to make the font size of the title as bigger as possible. Big font sizes for long words aren't big enough for short words.

For example, this is fixed font size: enter image description here

enter image description here


And these ones are the fluid font sizes (by using some jQuery libraries. The font size is fluid but I defined a max-font size): enter image description here

enter image description here


Is it a bad thing to use fluid font sizes for UX?

  • 2
    "Big font sizes for long words aren't big enough for short words." Why not? I wonder why you have this idea and where it comes from. Can you give some background? – jazZRo Aug 24 '15 at 10:22
  • @jazZRo, let me explain: I want to make the font size 100px (for example). It's possible for almost all the words but some other words are too long for this font size and not possible to fit them in one line. If I make the font size according to the longer words (for example 50 px) then the shorter ones seems really small and there will be big blanks around the small word (as showed in the fixed one). – herci Aug 24 '15 at 10:34
  • 3
    I'm confused why you think words shouldn't wrap? Is there something you're apposed to? – Majo0od Aug 24 '15 at 11:47
  • 3
    Hi Herci - a critical question nobody has asked is: do you want to have a "standard" size, and shrink in really long cases, or is your thought to make each on as large as possible depending on the length of the word? – Fattie Aug 25 '15 at 11:57
  • @Majo0od, I think to wrap words especially if the title is one-word, it doesn't seem good and the word becomes hard-understandable. – herci Aug 27 '15 at 10:21
32

For your specific example and going on the limited information you've provided I would say yes, it is a bad idea.

Doing what you suggest could break the following basic rule:

The page as a whole must be designed in a way that clearly communicates to the user what actions are available and how to easily access the information they seek

Consider keeping the following consistent:

  • Size
  • Weight
  • Color
  • Position
  • Type
  • Contrast

http://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636

So specifically with your suggestion, the issue I see with it is that it will affect hierarchy of information, by breaking consistency between the same types of header.

Example: Below, Short stands out as being a more important piece of information than the longerererererer word. Just because it is a larger font size.

Short

longerererererer

In summary, be aware that if the same type of title has varying styles then a user may see these as representing different types of information.

  • keep.google.com is a counter-example. – Paul Draper Aug 25 '15 at 17:58
  • 1
    @PaulDraper I cant see the example you're referring to in that link. Can you post an answer with some screenshots and more explanation? – Dave Haigh Aug 26 '15 at 8:42
10

Everybody is saying that it simply won't work, but to be honest I think that's a gross generalization, because I have seen designs where it definitely works. So, this got me thinking about defining some generic rules how to figure out when to use it and when not to use it.

When you can use it

  • When other elements make clear that the header is the header.

    For example I have used this myself in an internal demo I was pretty happy with where the top 80% of the initial screen was a huge stylized speech bubble with the title of the page (which was always a quote) filling up the speech bubble no matter how short or long the quote was (both vertically and horizontally) whilst the speech bubble was always the same size (and clicking anywhere or scrolling even a little scrolled up a box from down below over the speech bubble).

    This example is over the top and a far simpler frame (or something else) could do the trick just as well, but the point is just: 'Size' now becomes a graphical property rather than a property primarily showing the relative importance of the text, so other elements (position on page, graphical framing, etc.) have to take over that role.

  • When no other text on the page can have a bigger font size than the minimum size the header can become!
  • Generally speaking: When there is just a single header on the page. When you have multiple headers on a page with different font sizes it will quickly become more confusing. I would not argue this is a strict rule, because given proper graphical framing it might be possible to do it with multiple headers as well, but it's gonna be a lot harder.

So, what about your case?

You mention that in most cases a font size of 100px is perfect and works fine, but that some words are too long. Now, of course it would be possible to add ­-hyphens to your titles and stuff, but I actually think this is one of those cases where it actually might be acceptable. Hyphenating a single word that is the main header of a page would look absolutely terrible (purely a design consideration) and making all the words small enough to fit the longest word would look mediocre (as I assume the 100px is the optimal font size for most words). Additionally there is a different element making it clear that the header is the header (the fact that the word is the first item on the page) and as long as you set up the minimum font size as the text font size + 12px or so I think it actually can work beautifully.

  • 1
    +1 for acknowledging that there is rarely a one size fits all solution. – Paul Wagland Aug 27 '15 at 19:45
6

This won't work the way you intend. As people navigate from page to page, they will notice the font sizes changing.

The problem with this is that large fonts signal a higher level of the hierarchy, so people will perceive differences in hierarchy where there are none.

You can see this perceived hierarchy in action below. In these examples, many people see the first two headings as part of one section, and the last heading as a new section.

— Examples of the effect of font size —

Here's a heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis neque quis sapien gravida dapibus eu et eros. Donec ut ipsum velit. Pellentesque vulputate in purus quis maximus. Praesent in quam non leo porta semper. Nulla tincidunt porttitor sapien sed bibendum. Donec eget justo et quam maximus facilisis eu suscipit sapien.

Here's a heading

Donec id condimentum urna. Suspendisse fermentum, est eget cursus maximus, dolor felis blandit est, varius imperdiet neque neque sed mauris. Praesent lacus nisi, aliquet at elit id, tincidunt pulvinar dui. Proin ut nisl vel odio semper commodo ut nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ultrices, nisl iaculis mollis aliquet. Nulla venenatis purus.

Here's a heading

Integer at diam rutrum, accumsan mauris sit amet, laoreet metus. Vestibulum in posuere mauris, pretium pulvinar ipsum. Sed cursus semper metus, maximus pellentesque libero sodales vitae. In nec odio sem. In nec sollicitudin quam, tempus pharetra nibh. Praesent malesuada massa nec justo placerat tempus, et cursus nisl velit ultrices ligula.

0

(1) In broad general "graphical design" terms -- don't do this. It looks like total rubbish. The "reason" is that you want consistency to imply distinctions and tidyness - the whole reason that different elements or concepts in graphic design will be consistent (whether color, size, typeface, etc). So, any "graphical designer" would just say "don't do that, it looks stupid" and that's correct.

(2) That being said, there is a look where if you have REALLY ENORMOUS headlines, you can equal them out like this. You could say, all the headlines are so enormous that it is perfectly clear - compared to the body copy - that all those "enormous" headlines are the same thing, even though the fount size is different.

(Interestingly, this can be either a sort of "Victoriana" look (rather like an exciting! ad from boy's-own magazine or a railway timetable or the like) or indeed a modern hip sort of thing (there was a magazine from The Face period that would always annoyingly do this, I can't remember which).)

I think, but I'm not sure, this is sometimes called a "stacked" headline look.

For an example go HERE and look at the Gorilla Coffee example (red background).

(There are endless examples of that "stacked" headline look in advertising etc lately - I just found it tricky to google them up! I'm sure others will offer any number of common examples from current brands.)

To reiterate, if you're simply asking "should I do this for headlines in my long-form article" the dead-simple answer is (see "1" above), don't do it, it looks silly.

But I'm just bringing to your attention that this "stacked headline" look does appear, more in sort of bold posters, that type of thing.

Finally, (3)

It is perhaps of interest to this question that:

shrinking font sizes for headline-like elements (or whatever) are a built-in feature in iOS (for many years now).

(Purely for the interest of anyone who doesn't program for iOS, here's an example: you can see it is nominally Helvetica 11. However I turned on "Autoshrink" and if the name gets long it will shrink it to in this case 6 point as the worst-case. Beyond that it will just cut off the text.

enter image description here

)

So, in apps, this is indeed standard behaviour, and, you'd pretty much always use it in the case where the text is generated dynamically, i.e. you don't know how long the title of the chapter, street addrees, here a person's name, or whatever, is going to be. (I guess the only alternative to autoshrink, if the dynamic text turns out to be too long, is just trimming the text - you have to do something, you can't just make the app crash.)

So it's worth considering that (for better or worse) this happens by default, in iOS apps - basically any business or text-based (non-game) iOS app.

(Really, in apps, I think it sucks ... but again there's really no alternative, if the text is generated on the fly and it has to fit in some space - other than just leaving it out or trimming it.)

So, it's conceivably that "young people today," non-UX-professionals, looking at your question here, would just say "What, of course do that, it happens everywhere" ("everywhere" meaning for them "in apps").

  • 1
    -1 This is about technically implementing certain behaviour and has nothing to do with it being good or bad UX. – David Mulder Aug 24 '15 at 19:54
  • This is a good answer re implementation but doesn't address the question if it is a good idea or not to use fluid font sizes for titles. – Mayo Aug 24 '15 at 23:42
  • Hi Mayo, as the answer says it is worth noting that this feature is built-in to iOS, and hence is seen everywhere in a million (well, say half a million) apps. – Fattie Aug 25 '15 at 11:52
  • Swiftkey does something similar on Android as well (for its suggested words that appear above the keyboard. – Chris H Aug 25 '15 at 13:05
  • indeed, there's similar options in Android Studio. – Fattie Aug 25 '15 at 13:10

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.