It’s a common mistake to denote heading level by its font size only. The popular Bootstrap CSS framework does exactly that:

When you see this picture, it makes sense: the higher the level, the bigger the heading. The problem: this works only when you put these headings next to each other. But when you use six levels of headings in a real text, these styles will not help establish the structure. From the reader’s perspective, they would be just randomly-sized headings. To see an example, open the Bootstrap’s own documentation in the middle of its page.

Now look at this example from Wireless DJ help page:

The progression of sizes is not the only design tool here.

There is only one main heading (aka h1) on a well-edited page, and it’s on top. So from the structural point of view it doesn’t matter what it looks like. It makes sense to make it large though.

The second-level headings (h2s) are larger than the body text, but what’s even more important, they have generous margins around them, and the top margins are visibly larger than the bottom ones. This helps link the headings to their text and separate the sections from each other.

The third-level headings (h3s) are not just smaller than the second-level ones. They are actually of the same size as the body text, but are bold. Also, they have no bottom margins at all. This connects them very tightly with their text.

If you want more than three levels, you won’t be able to make do with just font size and margins. You will need to employ other tools:

This example is in Russian, but it’s even better if you can’t read it. Just see how headings of different levels have several attributes that help you recognise them: alternating typefaces, italics, rulers, numbering.

Such a complex hierarchy may be necessary in some legal documents (the example above is from the Russian Civil Code), but in most cases, three levels of headings must be enough.

The letter x is not a multiplication sign. Use the times sign (×) to denote multiplication:

Notice how the proper multiplication sign is aligned with other mathematical operations signs. Using x in place of × is as sloppy as using programmer’s quotes (") in place of actual quotes (“...”). Also, when you write 5x, it means 5 multiplied by x or 5×x. Probably, not what you were trying to say.

Traditionally an underline was used for emphasis:

Some logos use it to look important:

Above, underlines are part of the message: they interplay with the letters, drawing the readers’ attention to the underlined words.

But the use of underline for links, especially in paragraphs of text, is semantically different from this classical use. Such underline should not be an obstacle for the reader who choses not to care about the link. The design should only hint at the option to click the link, not scream about it. In fact, the words should not change their meaning the slightest when the linking is removed (i. e. when the text is printed).

In Crafting link underlines on Medium, Marcin Wichary says that an “ideal” link underline would look like this:

But this is not ideal, this is exuberant. You don’t want to break one underline into six stubs with funny optical effects at the gaps. You want the underline to be modest and quiet.

This is not as bad as the new Safari rendering though:

Only four lines here, but they are thick as logs. And the vertical distance from the text is smaller than the white area around the descenders. Only a blind person could come up with this crazy design.

To make the text and the underline both clear, put them in separate visual layers (see Tufte’s Envisioning Information, Layering and Separation). Make them ignore the existence of each other:

Notice how this underline is very thin. It resembles a hair on a piece of paper.

Why not thicker? Again, because it is not a part of the text, it should not divert the reader. It should be as thin as possible, as long as you can see it (see Tufte’s Visual Explanations, The Smallest Effective Difference).

Some lawyers think they should shout at their readers by using all-caps text — this is how they communicate the idea “this is important”. Here’s a fragment of some Apple document:

The lawyers do disservice to themselves: all-caps text is much harder to read than normal one. If you are a designer, you are responsible for this, but unfortunately changing it is often beyond your power. So here’s what you do when no one is looking:

And all-caps becomes small-caps:

The text still stands out, but it no longer looks ugly and most importantly it is noticeably easier to read. We’ve used this trick in Getwear’s terms of use and other similar pages. See also: Typography for lawyers.