1. Importance is not by font size, but by font weight

“You can say, “I love you,” in Helvetica. And you can say it with Helvetica Extra Light if you want to be really fancy. Or you can say it with the Extra Bold if it’s really intensive and passionate, you know, and it might work.” — Massimo Vignelli

As what Vignelli has said, it is by font weight that we can give emphasis and importance to words. Let’s take a look at the difference of the two examples below:

Font used: Helvetica

From the image above, I used 32px for I love you to show that it’s higher hierarchy than You are my life, my everything, which is 23px. But giving an emphasis to I love you doesn’t stop there. It still lacks the contrast we’re looking for in order to set it apart from the subtitle. And so, font weight comes to the rescue.

Bonus Tip:

Using the same format we had before, in Design A, I used 3 different font sizes: 32px (Title), 23px (description), 16px (published) while in Design B only 2 fonts sizes: 32px (Title) and 23px (description + published).

Contrast formula = size + weight + color

In handling contrast, I go by the formula size+weight+color than size+size+size/color. In Design B, instead of adding a new font size, I opted to keep my description’s size and utilize it in Published by and added a touch of color to achieve contrast.

The goal is not to have various font sizes and few font weights, but fewer font sizes with various weights

2. Use percentages and not pts for proportional font sizes

Pts (left) and Percentages (right)

When I was starting out, I use to rely on linear increments by adding +-2 or +-4 pts to show hierarchy, but only to find out that it isn’t ideal. Here’s the reason why:

The 4pts difference between 14px and 18px seems to be noticeable but when we take a look at the next example:

The 4pts difference now becomes unnoticeable, by the naked eye it seems that they’re sharing the same font size, for this reason, depending on percentages is much better than the linear rule.

Using percentage rule

From the given example above for percentage rule, the 24px is 150% of 16px. It has given us an effective contrast that we want to achieve when dealing with content. Thus, to know more how the system of percentage rule works, I’m using a tool called Modular Scale.

In using the modular scale, you need to set up your base font size, which is the font size you’ll be using for body text and then choose the ratio or interval for your sizes, and then you’re ready to go!

3. Know the Type Layout

Haven’t you observed that most type layouts share something in common?

Photo from Medium, Youtube, Sketchapp

The 3 examples above has a certain format, it is comprised of a photo or icon on top, followed by a title and a body text. And these kinds of examples follow mostly this pattern:

It doesn’t necessarily mean that we have to follow the whole format strictly but it can go in different pairs using the following :

  1. Combine 2 or more of the elements
  2. They must come in the correct order
  3. The headline must always be present

4. Use headlines wisely and effectively

I’ve mentioned in point # 3 that always keep the headline as if it is a necessity. And in this point, I’ll be sharing three things of how we can use headlines effectively and give life to our structure.

Make it as a requirement

Having headlines add more context to the elements and helps users to read.

Adding the “Notifications” headline helped in understanding what the content is about

Make it dominant

By making the Headline dominant from the other, gives a visual structure that it is different and must be of importance, and importance can be achieved by following the formula I shared in point #1

Using bold font weight we were able to make it look dominant

Make headlines up

Headlines should occupy the first 3 levels of a structure.

Since we are following the format we had earlier, we’ve placed the headline after the fleuron, which is still part of the first 3 levels.

Source link https://blog.prototypr.io/to-all-the--rules-i-should-have-known-before-e4ee5e3651d9?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here