Typography & Page Layout

Grid system

What is Grid?How Grid system help you develop your design?

A grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner. The less common printing term “reference grid,” is an unrelated system with roots in the early days of printing.

Head lineHead line

caption

Textor body copy

Flush Left

Textor body copy

Warp

HeadlineHeadlines should be put in the top level of one’s type hierarchy. Therefore bigger, bolder, and often sans-serif typefaces work well. Headline Text usually displays only a few words, so pay attention to ascenders, descenders, and counter-space. Pay utmost attention to kerning. Remember headlines are one’s visually dominant element on the page so make sure it looks good and reads well.

Good Techniques for Publication and Web Design

Body CopyChoose body copy wisely. Body copy is what 85% of the text will be set in. Make sure the type is easy to read in large quantities. The body copy should contrast appropriately with the headline text, either in size or style.

Things to Look for In Bodies of TypeOrphans and WidowsAn orphan refers to the first line of a paragraph that appears by itself at the bottom of a page with the rest of the paragraph appearing on the following page.

A widow refers to the final line of a paragraph that falls at the top the following page of text.

Orphans and widows can be eliminated by adjusting the leading and kerning of type.

RiversRivers are gaps or white space appearing to run down through the body of text. Rivers occur most often when text is force justified.

Baseline ShiftBaseline Shift occurs when two columns of text sit on separate baselines.

Text read to understand information

KERNING

The term kerning refers to adjusting the space between two letters. If letters in a typeface are spaced too uniformly, they make a pattern that doesn’t look uniform enough. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T, L). In metal type, a kerned letter extends past the lead slug that supports it, allowing two letters to sit more closely together. In the digital typefaces used today, the space between letters is controlled by a table of kerning pairs, which specify spaces between different letter combinations.

KERNINGThe term kerning refers to adjusting the space between two letters. If letters in a typeface are spaced too uniformly, they make a pattern that doesn’t look uniform enough. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T, L). In metal type, a kerned letter extends past the lead slug that supports it, allowing two letters to sit more closely together. In the digital typefaces used today, the space between letters is controlled by a table of kerning pairs, which specify spaces between different letter combinations.

KERNING LARGER SIZES Because the space between characters expands as the type size increases, designers often fine-tune letterspacing when working with large letters. As the word “rub” gets bigger, the gap between u and b grows more obvious.

Font UsageGenerally, you can use up to three different fonts which compliment one another in a document. Don’t go overboard. Outlandish font usages is a key sign of the work of an amateur. Less is always more.

Margins and ColumnsThese options can be determined at the beginning when setting up a new document or later by going to Layout > Margins and Columns.

Margins are used to determine the amount of white space from the edge of the document to the text.

Columns are used to divide up text and make it more readable. Within the options for columns, the number of columns and the space between the columns, the Gutter, can be determined.

Margins Margins are the imaginary vertical demarcations for text or tabular columns.

Overall or primary margins are established by the line length function or the cumulative total of secondary margins (tab or text columns).

Margins Establishing margins requires careful consideration.

The amount of white space surrounding printed material effects both appearance and the readability of the page.

Plenty of marginal space indicates luxury or formality; small margins indicate commercialism.

Margins Type area in relation to paper area may vary greatly according to the nature of the project. A telephone directory page, will utilize more than 90% of the paper for type extremities, because the inexpensive paper contributes nothing to the appearance and it has no value to the user.

Margins A luxury book in which carefully selected stock plays an important part in the design and beauty might use as little as 25% of the area for type, leaving 75% for margin..

Two facing pages of a book are considered as a unit; the inside (back) margins are always smaller than the outside (foredge) margins. In bookwork, make the inside margin, the narrowest, the top (head) margin a little wider, the outside (foredge) still wider and the foot/tail margin widest of all.

Margins in good quality bookwork today are based on the standards set by early scribes and printers. The text matter is positioned high up on the page and well into the back margin, providing generous foot and foredge margins.Book and magazines are established differently than are single-page ones.

Two pages next to each other when a book is opened must appear to belong together. The geometrical method is one particular method in determining margins for a book. This method calls for a square format. Short running headlines and folios at the foot of the page are ignored as they contribute very little to the mass of the text matter.

The following diagrams are three distinct apportionments of type area to paper area for book pages. The first is the most common, using 64 percent of the paper area for type. The width and depth of the type would be 80 percent of the page dimensions.

The second diagram is for a classic book page, using 50 percent of the area for type, or 71 percent of the width and depth.

The final diagram represents a book in the luxury class, using 25 percent for type, half width and depth

Examples of the Page Layout conditions – Enhanced Page Layout (left), Poor Page Layout (right).

Department of PsychologyWichita State University

GreekingThe use of gray bars or "dummy" characters to represent text that is too small to be legible when displayed on the screen. Also, in graphic design, the use of dummy text in a layout so that the design of the document will be emphasized rather than its content.

http://www.lipsum.com/

SATISFACTION ENHANCED PAGE LAYOUT POOR PAGE LAYOUT

Easy to read 5.20 (1.15) 4.75 (1.37)

Ability to concentrate 5.30 (.98) 5.20 (1.40)

Satisfied with text size 5.25 (1.29) 5.05 (1.50)

Satisfied with layout * 5.50 (1.79) 3.25 (1.71)

Crispness of text 4.97 (1.25) 4.75 (1.09)

Physical level after reading 4.15 (1.08) 4.20 (.95)

Mental level after reading * 5.50 (1.35) 4.70 (1.03)

Confidence in comprehension 5.25 (1.12) 4.75 (.97)

Level of eyestrain 4.90 (1.33) 4.40 (1.53)

Like to read textbook material with this text 4.05 (1.54) 3.25 (1.71)

Like to read leisure material with this text 4.15 (1.75) 3.55 (1.88)

Like to read news material with this text 4.35 (1.63) 4.00 (1.92)

  ENHANCED PAGE LAYOUT POOR PAGE LAYOUT

READING SPEED (WPM) 185.60 (47.22) 183.38 (51.36)

COMPREHENSION 5.32 (.99) 5.08 (1.31)

Area of Interest data for homepage

AOIsAverage Fixation Order

Average Number Fixations (SD)

Average Dwell Time in seconds (SD)

Picture 1 11.5 (2.89) 329.85 (0.84)

Big logo 2

8.5 (2.50)385.89 (2.06)

Text 3 14 (2.3) 771.21 (3.96)

Lakeshore logo 4

6 (3.09)

192.63 (0.45)

Upper logo 5

1 (1.15)48.3 (0.26)

Left navigation 6

3.5 (5.25)

63.21 (0.34)

Shopping cart 7

0.5 (1.41)265.98 (7.02)

Upper navigation 8

1 (1.73)

70.38 (0.29)

Bottom navigation 9

0 (0.50)

10.74 (0.0)

Search fields 10

1 (1.26)23.88 (0.534)

http://www.helppublish.com/layout.html

Book Typesetting & Page Layout Design  Typesetting

Page layout sample

http://www.magazine.org/Editorial/Top_40_Covers/index.cfm?TYPE=printthispage