(click anywhere to close)
OPEN MENU

[Typography] Page

category: Design | course: Typography | difficulty:

Having a grid is great for dividing the page into different sections, but not everything works equally well. People are accustomed to a certain standard page layout and reading direction, and if you want long pieces of text to be easily read it’s best to follow those guidelines. It’s not that you can’t go wild with extravagant grids, it’s that you should reserve that for title pages and places that don’t require long reading.

Page Dimensions

The outer dimensions of any typographic work play an important role. They define the shape of the grid, and frame the design in a very strong way. It’s therefore recommended to not just pick a stock size or arbitrary shape for your design, but to choose page proportions that are satisfying and suitable to the message of the content.

A large amount of content requires a larger page, or you’ll be left with thousands of pages. A traditional layout requires a page that is longer than it is wide, while modern designs tend to have more horizontal shapes. A design with only square text blocks would do well with a perfectly square page. Take all of these factors into account when actively choosing your page dimensions.

When it comes to books, size is crucial – stuff for serious reading should fit in our hands. Font size should be no smaller than 9 point, and no larger than 14 point. Typefaces with a very pronounced or very small x-height are not your best bet.

Margins

It’s perfectly possible, however, that you don’t know the exact size at which a design is going to be viewed. While you perhaps can’t predict the maximum size (such as the size of a user’s screen, or the size of the paper used for the final printing), you do fully control how much space you want to take up.

TypographyPageMargins

For this, we have the margins. Margins solve a multitude of problems;

  • They set off text from the edges of the paper, making it more readable and giving the design more room to breathe
  • They create a “safe zone”. If the final dimensions of the work turn out differently than expected, margins make sure none of the important information is cut off, and that the design is still intact.
  • They create room for notes and other messages connected to the body text, but on a separate level in the hierarchy. This doesn’t just mean remarks or references, this also includes things such as page numbers or displaying the current chapter you’re reading at the top of every page.
  • They balance and contrast the page by creating as much (near) empty spots as there are spots full of text or design elements.

Actively include the margins as you design, from start to finish, and you will notice improvements in your typography. Be aware, though, that you don’t clutter the design by putting too much in the margins. You don’t need to fill every header, footer and aside with extra information; an interested reader knows what chapter or section he’s at and doesn’t need constant reminding.

Additionally, you can choose to hang punctuation and ornamentation (such as quotes and drop caps) into the margin, to keep the edges of text blocks even. Sometimes it works very well, sometimes it doesn’t, depending on the context.

Space

Besides adding space at the edges of the frame, there’s also the necessary amount of space to add between text blocks. These so-called gutters are usually an automatic result of using a proper grid, but there’s still some things to watch out for.

TypographyPageSpace

There are two main reasons a typographic design needs space: to set it off from other elements (to make it more readable), and to lead the user through the design. If everything’s connected to everything, the reader doesn’t know where to go. If you leave a lot of space between elements, you make clear that these are unrelated, while if you leave little space, elements suddenly become a group. Similarly, if you align elements along a common line in space, this line can be followed by the user.

Because we read from top to bottom, text is still best set in columns that are clearly taller than they are wide, and as a result, space usually takes the form of columns as well. Columns provide a way to put a lot of information on a page, which is economical and increases comprehension of the information, while at the same time leaving ample room for space. Creating too much white space makes it impossible for the user to quickly find content or establish relationships between paragraphs, as there’s seas of space between all elements.

In short, use scales to set the proportions of your text blocks (and perhaps page dimensions), but create space freely and in abundance, first and foremost shaped as columns.

Gutenberg Diagram

The Gutenberg Diagram is an image that shows the general direction in which a reader’s eyes scan or read a page. It’s very useful in determining where you should place your most important content, so that it’s the first thing users see. This diagram, however, is mostly true for design with information evenly distributed across the page. It can always be overruled if you add enough contrast or emphasis somewhere else. The diagram looks like this:

TypographyGutenbergDiagram

Western readers naturally start top left, and move across and down in a series of sweeps until they reach bottom right. Each of these sweeps begins along an axis of orientation – a horizontal line created by aligned elements – and proceeds in left-to-right direction.

The fallow areas receive the least attention, unless visually emphasized. This tendency is called reading gravity, and designs that follow it often improve reading rhythm and comprehension.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)