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:
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):
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.
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.
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 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.
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.
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 —
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.
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.
(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.
)
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").
