Serious visual hierarchy guidelines

Question

I have been looking for guidelines on visual hierarchy with precise and substantiated recommendations, yet I have found only generic tips, such as "you can use contrast and font size" to add visual weight to an item. How much contrast and how big font size, and what leverage between the two, remains unaddressed. Solely at the discretion of the designer, I guess.

I am asking for suggestions about serious guidelines, explaining what, how and why to use. E.g. a guideline explaining whether bigger font is better than font of the size but in weaker colour (or whether both are equal), with references to research or least references to DIY user research protocols, would count as "serious".

Answer 1

There is academic research on the foundations of UX and visual design, and there's (typically: unpublished) corporate research on the UX of completed prototypes and launched products. The middle area is necessarily devoid of concrete science, as the number of variables increases exponentially for each component you add to the study.

The research question you give as an example, comparing font size and color, runs into massive issues if you were to try to generalize it and attempt to apply it to a different situation. It's easy enough to get Times New Roman in sizes 12pt and 16pt and make the 16pt font more and more grey until it finally has equal prominence to the 12pt font.

But is the same ratio true for 16pt vs 20pt font? Is the same true for the bold versions? What about other fonts, keeping in mind that point size and perceived visual size vary drastically? All-caps vs lowercase, keeping in mind that this also changes drastically depending on the font choice? Colors other than grey, keeping in mind that the RGB color model is not perceptually uniform? Backgrounds other than white? And what if this text is near another object, like an image?

Until we create a mathematical solution to art and design (which probably requires defunding all other science for a few decades), you have to take the vague guidelines that fall out of other designer's experience and design yourself. You can find out if you did a good job afterwards using the usual user metrics like retention, running surveys, and conducting other usability evaluation. And that research of "is my website/service/product better than before the changes?" is something that can be conducted as "seriously" as needed.

Answer 2

As @Danielillo commented and Leo Wattenberg answered, this question is too broad to answer (and yet too limited).

I'll try to answer it based on the big picture. Font size and color (or contrast) are just the tip of the iceberg, and also an impossibility, for the same reasons other people commented.

However, when we talk about visual hierarchy, there are countless methods and techniques we can use, and many of them have guidelines. Now, here's the thing: while guidelines do exist, they don't exist as a "one size fits all" solution since they combine in almost infinite ways.

Consider the following image:

I made it really quick, so I'm not aiming for great design, but just to provide you with examples.

Basically, I have used what you said (font size and color + contrast)... plus a couple of other techniques. Which one would you say has more hierarchy?

The first one drives attention by breaking patterns; the second one uses two Gestalt Laws; the third provides more hierarchy to the title because of size, yet what you'll want to see is the text in the circle; the fourth breaks patterns for the title but uses a visual hierarchy technique called grouping for the whole group. And each of these is just a couple of techniques among many different methods used in typographic design, let alone multi-element designs that may use images, shapes, motion, interaction, etc.

So, back to my point: there are very precise guidelines if you check on a technique or method basis. For example, if you mention contrast and size, you'll probably want to check accessibility guidelines. If you want to drive attention, you may want to check attention-driven design techniques; if you aim to affect users' psychology, you may want to check Gestalt Law principles, you could even use the HTML default sizes for headings and paragraphs as well as the default colors for text and links in their different states, and so on. However, as I showed in the image above, all of them can be combined in multiple, almost infinite ways.

In short: you won't find a guideline for everything, for the simple reason that it's impossible.