This is part nine. You can find the eight part, De-emphasize with no mercy, here
Size matters
Size matters in the visual hierarchy, but contrary to appearances, bigger does not mean better.
We talked about this in the previous lesson. When we exaggerate with emphasizing primary elements, the effect can be grotesque and bizarre. And that's just the beginning of the problems.
Practical tip with an example:
Typography
Things are a bit more complicated in the case of typography, especially since the semantics of HTML elements (like H1 or h6) tell us not very practical sizes.
If we wanted to rely on HTML heading sizes to build a visual hierarchy, we could end up with a monster like the one below.
Here we used h3 elements for card titles ("Users", "Page Views" etc.) and smaller h4 headings for main statistics and even smaller h5 headings for previous period statistics.
Semantically everything is correct, but honestly looking at this UI I have no idea what is the most important here and what should I focus my eyes on.
Let's try a different approach. First of all, let's agree that HTML semantics will not dictate what the element should look like.
This means that, for example, the title of the card, although it will remain an h3 element (i.e. semantically with the highest weight among those present in this card), we style it so that it looks less important.
Why? Because it is only a label, which, although important, should not dominate over the most important element - the main statistic.
Then, instead of relying entirely on typography size, we'll also use font weight and colour to establish hierarchy.
What we did here:
We lowered the importance of the card title by reducing its size and changing its colour to a lighter one. To slightly compensate for the loss of priority, we converted the text to uppercase.
We increased the importance of the main stat by increasing the font weight, because this is really the most important element in this UI (and not the title of the card).
We reduced the size of the percentage change statistic because it is a secondary item.
We reduced the importance of the "previous period" section by reducing the size and using a lighter colour.
So, by judicious manipulation of the font size, colour, and weight, we were able to emphasize the primary elements and de-emphasize the secondary elements, thus achieving the desired visual hierarchy.
How do you feel about this now?
Next part -Lowering the contrast
Material Minimal, which is basically Material Design on steroids can be found here on Figma.
Material Design for Bootstrap is a UI Kit, that uses Material Minimal, check it out here.
And TW Elements, our newest child is based on Tailwind CSS. Check it out!