Typography and Layout

A bit about visual rules


Every day designers have to collect information from all the possible resources. Tips, books, lectures, etc. Today we would like to draw your attention to key principles from the book "Typography and layout" by Artem Gorbunov. This is an interactive handbook, where you can find not only useful theory but also learn from wide range of practical examples including screen mockups. That’s why web designers, interface designers and everyone willing to work with text and illustrations will find it really helpful.

The inner and the outer

This is a particular case of the Law of Proximity (objects which are close to each other are perceived together). The inner and the outer model can be applied to different levels and elements.

Typographic objects consist of a combination of other elements: words consist of letters, lines - of words, and paragraphs - of lines. So that an object can have a separate meaning, i.e. a letter, a word, a line and a paragraph to be separated, its inner space must be narrower than outer ones.

Here is how it is applied in practice:

The headline should be closer to the next paragraph than to the previous one

The space between the headline and the paragraph should be larger than the line spacing in the paragraph

 

There should be a space between the elements of the list larger than the line spacing

Line spacing should be larger than interword space (so be very careful with full justification)

The rule of anchored objects

Anchored objects are the most visible objects on a page: illustrations, headings, factorids, logos and pictograms. A simple text paragraph may also be anchored if there is nothing around it.

Rectangle is a basic shape of the modular layout. All modules of the layout should be rectangular-shaped and together form a rectangle of the page or screen, which they are limited to.

The rule of anchored objects:
Anchored objects should be placed in one of the corners or in the visual center of its rectangle.

The objects are attached to each other within the layout. The overall design will remain if you do full justification and keep the rectangular shape of the modules. 

But anchored objects always jump out of the layout. If they don't have the anchor point, the layout will fall apart.

Anchored objects establish a hierarchy: at first we notice illustrations and any pictures, then large headlines, and after that logos, signs and numbers. The typed text is the most neutral.

Basic elements

Here are some rules from the book on working with two important and most noticeable basic elements: headlines and illustrations.

Headline
This is what attracts attention and arouses interest of a reader. If there are no illustrations on a page, a reader will first notice the largest words.

  • Headline:
  • organizes a page and its parts;

  • gives a shape to text blocks;

  • guides the process of reading.

Size of a headline shows the comparative importance or logic of texts.

Illustrations
They definitely attract attention quicker than a headline. The perception of an illustration is influenced by its ratio. Thanks to the two eyes, the human visual field is extended. That’s why the horizontal illustration looks natural. But high objects require vertical proportions. Usually a vertical illustration looks more dynamic, even if nothing is happening in it.

If a picture has a clear direction, it’s better if it "looks" at the text.

A specially drawn for this purpose illustration or pictogram can be mirrored. However, photos and other people's works shouldn’t be mirrored. It will be a distortion of information and just a bad form: people have asymmetrical faces, birthmarks, hairstyles and clothes, the sides of cars are different, the buildings are in a certain order, the text is not readable in a mirror image.

The cropped body parts should be covered up with a page edge, a spacer or at least with a ruler.

This is only a small part of the rules and examples that Artem Gorbunov gives in his handbook "Typography and layout". However, following them, you can create a harmonious design of web pages and interfaces of mobile apps.