Visual hierarchy: how designers direct your eye

The simplest way to say that something is important is to make it larger. A headline set at three times the size of body text announces itself. Designers often choose sizes from a scale, in which each step is a fixed multiple of the last, such as 1.25 times, so that the jumps look deliberate and not random. Too many sizes confuse; three or four levels are usually enough for a page.

Bold type draws more attention than regular type, and strong colour more than a muted one. A single bright button on a quiet page is hard to miss, which is why designers use their accent colour sparingly: if everything is bright, nothing stands out.

Contrast also matters for reading. The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5 to 1 between normal-size text and its background, and 3 to 1 for large text, so that people with low vision, or anyone in bright sunlight, can read it. Light grey text on white may look elegant on a designer's screen and be unreadable on a phone outdoors.

White space, or empty space, is not wasted. It groups things and separates them. The principle of proximity, one of the Gestalt principles from the psychology of perception, says that we see items that are close together as belonging together. A caption placed near a picture is read as the picture's caption, and a caption placed an equal distance from two pictures is ambiguous. Generous margins around the text also make a page feel calmer and easier to read.

Elements that share an edge look related and orderly. Most layouts are built on a grid, an invisible set of columns and rows to which everything is aligned, and this gives pages a sense of structure. A deliberate break from the grid, such as one element that is set apart, signals that it is special.

Consider a typical news card on a phone. A large image attracts the eye first, since images do. Then comes the headline, in the largest and boldest type. Under it, in a smaller and lighter style, are the summary and details such as the time and the source. A small set of icons for saving and sharing sits to one side, quiet enough not to compete with the story. Each level is a deliberate step down in importance, and a reader who looks for two seconds can tell what the story is, how recent it is and where it came from.

For comfortable reading, lines should be neither too long nor too short: about 45 to 75 characters is a common guide for body text. The space between lines, called leading, should be generous enough for the eye to find the start of the next line. Fonts for other scripts need extra thought, because their shapes and their usual proportions differ from those of Latin letters, as in Devanagari, where the headline bar and the marks above and below the line need room.

Squint at the page, or blur your eyes, until the details vanish. What you can still make out is what the hierarchy is saying. If it is not what you meant to be most important, adjust it. And watch someone who has not seen the design use it for a minute, without any help from you; where they hesitate or get lost is where the hierarchy is failing.

• How Devanagari works: a script where vowels ride on consonants

  The script of Hindi, Marathi, Nepali and Sanskrit is an abugida. How its consonants, vowel signs, joined letters and headline bar fit together.

• How the internet works: from a tap on your phone to a web page

  What happens in the second after you open a website: IP addresses, DNS, packets, HTTPS and the cables under the sea, explained without jargon.