Page Design
When we communicate, content is important but it isn’t sufficient to ensure that we are well understood. We
have always to structure in a proper way what we say and especially what we write.
1. Legibility
Written verbal communication organisation is called text design and was born about 000 years ago with the
advent of writing in ancient Egypt. The first written pieces consisted of images presented on a flat surface in
some organised sequence. The Egyptians soon developed a system for writing from right to left and used
images presented in the form of lines. The use of the linear sequence proved to be a form that aided the
reader in his or her reading and as such was one of the first decisions made about the legibility of written
text.
At the same time, as these decisions were being made, the symbols and forms that were used in the images
began to take on similar sizes and relationships to reduce the difficulties faced by readers when confronted
with these texts.
Fig 1 Hieroglyphs
A linear sequence of signs of the ancient Egyptians’ alphabet.
Text design has been always practiced and considered important but it has become a professional activity
with the print advent in the 1456 with the Gutenberg print machine. The development of a machine to print
pages was a landmark event in the world of communications because it signalled the commencement of the
period when books and publications became affordable to all. Prior to this time, all publications were hand
written and one can only imagine how costly such works must have been and how inaccessible they were to
most.
When the printing press was invented, so too were typestyles. It was possible to vary the way text was
presented although in the early days, the typestyles were copies of handwriting.
The choice of paper, ink, spaces, character size and length of pages all became decisions for the printers and
soon a science developed to explore and decide the optimal forms to ensure legibility of the resulting texts.
Nowadays, we mostly utilise digital software to create our written texts. They already take some “decisions”
for us but anyway every time we write we meet different possibilities exist to enhance readability, legibility
and comprehension of our texts. Page or document design has to respect and to be coherent with the content
and usually it needs to be made before start writing.
We use the terms legibility and readability to define aspects of the presentation of text that can affect how
hard or easy the text is to read. Legible text uses the technical features for display appropriately, eg. fonts,
layouts etc. Readability is all about correct use of the language. Readability is influenced by correct use of:
 Punctuation marks;
 Appropriate use of language and expressions;
 Use of an appropriate level of language for the reader; and
Topic 5: Page Layout
1
 Use of images and diagrams to facilitate understanding.
Text is difficult to read when the font size is too small. It can be difficult to read when the line size is too
great. It can be hard to red when the space between the lines is too small or too great.
The legibility of this text is limited by the contrast with the background and the size of the fonts. As well as
this it is limited by the spacing between the lines. The legibility of this text is limited by the contrast with the
background and the size of the fonts. As well as this it is limited by the spacing between the lines.
Fig 2 Legibility
Many factors influence the ease with which text can be read including the line spacing. The narrow spacing
here reduces legibility.
Factors in a text that impact of the legibility of a text include such elements as:
 font type;
 font size:
 line length;
 line spacing;
 serif or sans-serif fonts; and
 word and character spacing.
a. font type
There are many different font types that can be used in text-based communications. Whereas in the past with
mechanical typesetting machines, few font types were ever used, with modern computers, font types abound.
And often designers make inappropriate choices of font from a legibility perspective in order to make pages
and layouts more visually appealing.
Character sets from the different font types can vary in a number of ways. They vary in terms of the width of
the characters, the ascenders and descenders, the amount of white space within the character and character
formation. Some font types are almost illegible when printed with a small font size and others lose legibility
as the font size increases.
A sample of text written using Arial font
A sample of text written using Times font
A sample of text written using Helvetica font
A sample of text written using Optima font
A sample of text written using Futura font
A sample of text written using Verdana font
Fig 3 Font Types
A collection of common font types showing differences in character formations
b. Font Size
The way in which font size influences legibility is clear. When text is too small it is hard to read and
likewise when it is too big, it ca be equally hard to read. The optimal size is determined by a combination of
factors which include:
 line length, as the line gets longer, font size needs to be bigger;
 page layout, a page with a very busy layout may need a larger font size, likewise a page with a simple
layout can be successful wit a smaller font size;
 display resolution, small fonts are harder to read on computer screens than they are on paper because the
screen does not print as clearly;
 audience characteristics, you will always see large font sizes used in books for young children and for
older readers.
Page Design
2
Font size is measured in points. The point system is based on the imperia inch where 72 points represents 1
inch. A character of 36 points will therefore measure half and inch in height. The most legible font sizes for
printed work are in the range 9-12 points. This page has been set in 10 point.
9 10 12 14 18 24 36 48 pts
Fig 4 Character sizes
These characters show the relative sizes in points. The width also increases with the character height.
Page Design
3
c. Line Length
Lines that are too long are often hard to read. The human eye reads by scanning from right to left. When
people read, the usually don’t concentrate on each letter in each word, but more they see word shapes and
recognize words by the familiarity of the shape. Anything that reduces the ability of the eye to track across
text and to recognize shapes can limit legibility.
As the length of a line increases, the eye finds it more difficult to scan. It has to slow down to make sure it is
scanning on the correct line. Publications like novels, magazines and books tend to match a font size to a
line length. Where the font size is small, the line length is usually small. In magazines and newspapers, for
examples, you will see several columns across a page wit a small font size. In books where the font can be a
bit larger, lines often extend across a page, although pages are often not that wide.
As a general rule, legibility tests suggest an optimal line length is in the order of 54- 80 characters.
On comput r sc eens whe e it is po- sible to ma e a windo any s ze, lin s that do n t w ap can be ve y h rd to
re d. Peo le will oft n make the r windo s sm ll on com uter sc eens to ake the te t more le ible.
Fig 5 Word recognition
Most readers recognise words by their shape and not their individual characters. Notice how this block of
text is still readable despite the incomplete words.
On computer screens where it is possible to make a window any size, lines that do not wrap can be very hard
to read. People will often make their windows small on computer screens to make the text more legible.
d. Line Spacing
When text is produced in print or on computer screens, the spacing between the lines can be varied. Most
times the spacing is set to several points greater than the font size. On this page for example where the font
size is 10 points, the lines are 12 points apart which leaves some white space between the lines. If the lines
are too close, just as with long lines, the eye will find it hard to track without getting distracted by lines
above and below.
The most appropriate line spacing for normal fonts is font size + 20%. The amount of line spacing is also
influenced by the font type. With fonts, for example, with small x-height, a smaller line spacing can be used.
The Caslon font, is an example of one with a small x-height and which is still very legible with a reduced
line spacing.
e. Serifs
With fonts, serifs are the small ticks that sit at the end of the characters. The idea of serifs is that they will
lead the eye fm one character to the next and thus make the text more legible. In most publications, text is
most often set in serif faces. This is especially true for books, newspapers and magazines.
characters with serifs and without serifs
Fig 6 Serifs
Serifs are small decorations that are intended to provide a path that connects the characters
Many designers find fonts without serifs, sans-serif, to be more visually appealing and we see these fonts in
common use in instances where the look and feel is important, for example, brochures, advertisements etc.
There are no hard and fast rules for choosing where to, or where not to, use serifs. Some common guidelines
are shown below:
 Serif fonts are common for books and newspapers making them familiar and comfortable to readers.
 Where the serifs make the characters easy to read, the face blends and doesn't distract the reader.
 The serifs on font faces typically aid readability by moving the eye from one letter to the next,
connecting individual shapes to form whole words.
 Bold, unusual, or very distinctive serifs can distract the reader and make the character difficult to
recognize and read.
 Serif faces often have a subdued, formal, or serious look and are well suited to important documents
 Sans serif faces are often crisper, bolder and can appear more informal.
Page Design
4
 Sans serif faces are often more readable than serif faces when set in very small type such as in footnotes
and captions
 Serif faces printed from at lower than 300dpi on inkjet printers or printed on textured paper may lose
detail in the thin strokes and delicate serifs
 Serif faces can be more difficult to read on computer screens where the resolution makes the serifs blurry
and indistinct.
f. word and character spacing
Modern word processors provide a number of options for word and character spacing. For optimal legibility
it is best to use fixed width spacing between characters. Fully justified text creates inconsistent word
spacings and should be avoided when legibility is important.
Most word processors use proportional spacing between characters in words and again, inconsistent spacing
should be avoided.
In instances when kerning is an option, this helps to reduce the space left between characters by moving
them together where possible.
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
Fig 7 Kerning
Decreasing space between characters by moving them into each others’ spaces.
2. Text organization
There are many ways to set about designing a page of text. Some would say it is a bit like starting to furnish
a room. All empty rooms have many common features, for example, walls, doors and windows. Onto the
empty page we an place a number of elements, such as headings, images, text blocks, just as into a room we
can place furniture and floor coverings and curtains etc. When we have finished, we need to ensure with
how we have designed the page, that it is legible and the information easily accessible.
The legibility of a page can be influenced by taking into consideration the following factors:
 Hierarchy;
 Repetition;
 Balance; and
 Contrast.
a. Hierarchy
The primary task of page design is to create a strong, consistent visual hierarchy in which important elements
are emphasized and content is organized logically and predictably. Page design is visual information
management, using the tools of page layout, typography, and illustration to lead the reader's eye through the
page.
Readers first see pages as large masses of shape and colour, with foreground elements contrasting against the
background field. Secondarily they begin to pick out specific information, first from graphics if they are
present, and only then do they start parsing the harder medium of text and begin to read individual words and
phrases.
When there is no structure to the organisation and layout, information can be much harder to gain from the
page. The actual information that is being presented ca in fact simply be long passages of text. It is through
the layout and organisation that a person can be assisted to make sense of the information in meaningful
ways.
Page Design
5
Fig 7 Visual scanning process
Visual scanning of page structure over time.
Page design actions drive the eye in scanning the page and understanding the content. The way an eye first
reacts to a page in determining what is noticed and where the eye is initially led. Normally people will want
the eye to be led to the place where the text will start. Often people place graphics and images into pages
that lead the eye away from the important places.
Fig 8 HTML page
The computers’ text has no design elements. This is the HTML source page of Amazon.com web site.
It is important to be aware of the following design aspects when planning a page layout:
 The overall graphic pattern and contrast of the page is the first thing that is noticed when a page is
glanced at;
 The elements that make up the page are those that are seen next;
 regular, repeated patterns of text and graphics help the reader to quickly establish the location and
organization of information.
b. Repetition
Repetition is a important element in assisting the legibility of printed text. The use of repetition provides an
organization for the presentation that a reader can use to reduce the mental strain of reading. There are
always a number of repetitive elements in texts which are included as a matter of course. These elements
include:
 Headings for new sections;
 Paragraph breaks within sections;
 Consistent line widths;
 Consistent captioning etc.
Page Design
6
Fig 9 Dull page vs. visual structured page
The human eye is strongly helped by visual structure to understand content.
The use of repetitive elements helps to prepare the readers for the information that follows. By using
repetitive elements, readers are able to derive a sense of comfort and familiarity within the text. The forms of
repetition that can be included in texts to aid readability further include:
 Consistency in the layout being used from one page to the next;
 Consistency in the placement of images and diagrams to break the page;
 Consistency in the use of features such as highlights, insertions, referencing, use of footnotes etc;
c. Balance
Balance is the result of an arrangement of one or more elements in the design so that visually, they equal
each other. Every object in nature has structural balance, from the symmetry of a flower petal to the
chambers of a snail's shell. The balance needed every time we perform any form of physical movement is
automatically maintained by a built-in equilibrium that we take for granted.
Man-made structures, even if not formally equal on all sides, must maintain a balance in relation to a
perpendicular surface. Doubtless the Leaning Tower of Pisa will someday fall when a greater portion of its
weight shifts off balance. Sound must also be balanced, both in its production and in its reproduction.
Page Design
7
Fig 10 Tower of Pisa
The peculiar balance of the Leaning Tower of Pisa is well known all over the world.
For graphic design, the visual centre of any typical A4 page is not the actual physical centre but what is
termed the Optical Centre. This visual point of balance can be determined mathematically as being located
three-eights from the top of the page, five-eights from the bottom. The optical centre is the place where the
eye perceives the optima balance point to sit.
Fig 11 Mathematical Balance
The optical centre of a A4 page can be determined mathematically.
For a single sheet design, type and images are easily positioned vertically to ensure an even amount of space
on either side of the design to achieve balance. When positioned evenly across the horizontal axis, the
elements appear, to the eye, to actually sit lower down on the page.
Regardless of the design style of work that is to be produced, the optical centre must always be carefully
considered during the initial design stages for a printed piece to work successfully.
One of the most fundamental differences in a design is whether balance is symmetrical (centred) or
asymmetrical (off-centre). The choice between these two forms profoundly affects the layout and feeling of a
design. The selection of which is the more desirable should be based on which of the two is going to achieve
the result required to get the particular information over to the particular readership.
Symmetrical Balance
Symmetrical (or formal) balance has elements of equal weight as well as tone placed on both sides of an
imaginary vertical line on the page and gives the feeling of permanence and stability.
Any symmetrical layout is likely to produce a more static, restful design. However, because a centred layout
is so static, it is very easy to make it pleasantly innocuous but boring.
Nevertheless, the general tone of the centred design is restrained and formal. It can be used to advantage in
advertisements emphasizing quality, and by businesses whose position in the community is one of trust. This
method of balance is also acceptable if you are publishing a novel with which the reader is going to relax
quietly in an armchair, but it is extremely difficult to make such a layout visually interesting.
Page Design
8
Fig 12 Formal Balance
Static centred form is pleasant but mostly ineffective.
Asymmetrical Balance
One of the major advantages of an asymmetrical layout is that it allows for the more dynamic use of white
space. This is particularly important if illustrations are included. Asymmetrical (or informal) balance may be
unequal in position and intensity. To create asymmetrical balance, there must be an increase in intensity to
compensate for the change in position. Intensity can be increased by changing size, shape, or tone. For a
particular job, the designer might choose to position the elements to one side of the picture plane. The white
space opposing must then act as a counter-balancing force.
A useful way to determine the balance of elements on a page is to compare one area with another; it is
helpful to analyze the space with an imaginary grid. In this way, you can optically weigh the masses and
determine their intensity and direction. How space is handled will depend on the number of imaginary grid
units you have selected and how much space is available.
Fig 13 Informal Balance
Off-centred forms create visual interest.
4. Contrast
Of all the design principles, contrast is probably the next most important. Contrast creates interest in the
printed product by providing variety in the design. An expressive voice will emphasize a word or phrase by
raising or lowering the tone, or by increasing or decreasing the speed of delivery. The contrasting tones of
the voice in speech give expression and life to the words spoken. In music, a sharp or flat that is outside the
primary tonality is a modest but definite emphasis.
Fig 14 Contrast
Contrast can be achieved in many ways to make elements stand out.
Similarly, in typography, an italic of the same point size as its roman provides a modest but definite change.
To gain emphasis in a layout, there must necessarily be strong contrast between the elements. Contrast can
be added in the design by changing:
a)
b)
c)
d)
e)
The point size of the text;
Weight, using a style of font with heavy characters;
Position, placing images and text in ways to ensure they stand out;;
Shape, using a shape that differs from that which is expected or that which is currently being used;;
Colour, changing the colour to provide a different look.
Page Design
9
a. Size
Design considerations of multi-page formats such as magazine pages are different from those for an
advertisement to be placed in a magazine or produced on a single page. Good design requires a deliberate
choice of the levels of emphasis that are the most applicable to the subject.
b. Weight
Most popular type faces of today have a number of companion letters such as Bold, Italic, Extra Bold. The
careful use of type families within a design can add visual interest for the reader in addition to providing
visual guides, or cues, to a change of thought or item of importance.
c. Position
The very act of placing any design style (formal or informal) on the slant will cause the design to be in visual
contrast to the normal horizontal position. As a general rule, the placing of such designs on a slant is not a
desirable practice, although in some cases it can prove to be very effective. Nevertheless, ease of reading
must always be considered, and tilted designs might cause some inconvenience to many individuals who are
trying to read it.
d. Shape
Trying to put a square peg into a round hole is an impossible task because the shapes are at contrast to each
other. This principle can be incorporated into a design where the visual elements are deliberately arranged to
be in conflict to each other. This may be achieved in a variety of ways, e.g. Introducing graphics and/or
illustrations that differ from the normal proportion of the page.
e. Colour
The concept of contrast in colour should not be limited to the narrow perspective of natural colours, i.e. red,
blue, purple, green, yellow, etc. Certainly, the use of colour opposites will achieve contrast in a design, as for
example the use of a colour opposite, together with a colour which harmonizes with the substrate.
Harmony
Harmony is the opposite of contrast and relates to the unity of all parts in the design. A layout can contain
harmony of shape, tone, colour, and treatment. Harmony is consistent with the previous attributes discussed
suggesting a place for balance, repetition and consistency in presentation and form.
Whilst contrast is a feature that can highlight particular elements of a page and lead the eye to various
sections, harmony tends to create a page where there is less of this feature. Both harmony and contrast can
serve page design well and achieve different outcomes in the pursuit of legibility.
5. Lines
Lines are a very common form of graphic used in page and screen design to assist layout, to improve a
page’s appearance and to aid the legibility of the text.
Lines help in organizing the space of a page and in defining the internal hierarchy of elements. It is possible
to use lines for dividing areas, changing chapter, starting new topics, ending discussions.
Lines can be created in many forms for page and screen display and the forms can vary in terms of:
 line width;
 line thickness;
 line texture and form;
 line geometry (eg. straight, angled, curved);
 line decoration.
6 Line thickness
Page Design
10
Line thickness (weight) is measured in points. A point is a measure that is equal to 1/72 of an inch. Point size
is usually used to describe the size of typeface. This text is 11 pt. The point size of a typeface is the distance
from the top of the ascender to the bottom of the descender of a character. Lines are usually measured in
fractions and multiples of points. When printed, though, the thickness of a thin line is often limited by the
resolution of the printer. A 1/4 pt line printed on one printer may appear thicker on another. Figure 6.1
shows a variety of lines of varying point size. As the line thickens, it is possible to use a number of effects to
vary the appearance of the line. Consider, for example, the two 6 pt lines in Figure 6.1.
Fig 15 Line thickness.
The thickness and weight of lines can be varied to achieve different effects. There are several ways to create
a line 6 points in thickness.
7 Line Form
There are many ways to create lines for digital display. They can be created as combinations of thick and
thin lines with variable spacing. They can also be created comprised of dots, dashes and other suitable
elements eg. dots. Designers have a wide range of choices when working with lines and they provide a
number of opportunities for enhancing and decorating pages and screen images. Figure 6.2 shows some of
the forms that can be used with Microsoft Office lines in Word and Powerpoint.
Fig 16 Line Form
Using dots and dashes provides yet another means to vary the appearance of lines.
Most applications with a drawing capability provide the means to vary the gradient of lines, as well as the
texture and pattern. In a monochrome printed text, it is difficult to demonstrate the range of options. Figure
6.3 demonstrates a variety of blends for a thick horizontal line.
Page Design
11
Fig 17 Blends
The lines shown have different blend parameters demonstrating variations in color and darkness.
Lines don’t always have to be straight (although the mathematical definition suggests other wise). In the
design of pages and screens, curved lines can provide many opportunities to enhance and improve aspects of
their appearance and usability.
Most software packages provide a number of tools to facilitate the creation of a range of different forms of
lines. Apart from straight lines, a number of tools exist to support the creation of curves, smooth lines and
freehand line drawing. Once a line connects back to itself, it is no longer considered a line and it becomes a
shape (discussed in the next section).
Figure 18 shows the Lines tool from Microsoft Office and a 6pt line drawn with the curve tool. Creative
designers find many uses for curved lines often in the form of graphics and decorations. Straight lines tend
to be used for more formal and conventional uses, such as layout and form while curved lines are used for
more creative design endeavours.
Fig 18 Curves
Curve lines provide ornaments that can be used in a number of ways in designs for screen and print.
Using Lines in Tables
Below, a solid line separates columns of text, a pair of lines set apart a phrase, and a short dotted line
separates a section of text from other parts of the page.
Person
Ron
Jones
Mary
Elliott
Susan
Linster
Jenny
Beard
Phone Fax Dept Section
4575 2342 56
Admin
3345
5644 34
Sport
3778
9796 56
Govt
7464
3453 45
Leisure
Others tricks could be applied to change the appearance and the structure of a table.
Person
Ron
Jones
Mary
Elliott
Susan
Linster
Jenny
Beard
Page Design
Phone Fax Dept Section
4575 2342 56
Admin
3345
5644 34
Sport
3778
9796 56
Govt
7464
3453 45
Leisure
12
Person Phone Fax Dept Section
Ron
4575
2342 56
Admin
Jones
Mary
3345
5644 34
Sport
Elliott
Susan 3778
9796 56
Govt
Linster
Jenny 7464
3453 45
Leisure
Beard
A few simple lines added to a piece of clip art gives a sense of movement to the airplane. Short, choppy,
vertical lines create a grooved texture along the edge of the timepiece sketch.
Dashed lines suggest a coupon, whether there is one or not. It causes many of us to take a second look at this
ad because the familiar dashed line makes us think "I can save money!".
Summarising lines are used for three main purposes:
 as a marker to distinguish sections of a page;
 as a decoration to enhance the appearance of a page;
 as a graphic to assist in the layout of page items.
The following section has been designed to help you to understand the role of lines in graphic page design.
8 Alignment
The difference between a sloppy layout with a homemade appearance and a neat, professional layout is often
found in one principle: alignment.
Solid alignment can transform the appearance of a design from unfocused clutter to stunning order. Your use
of alignment can make the difference between whether your information gets noticed or not.
So what is alignment? Alignment is the use of visible or invisible lines (usually straight) to line up
everything on your page. Succinctly stated, the principle is this:
 No element should be placed on a page arbitrarily.
 Everything in a design should be lined up with something else to achieve unity.
The principle of alignment focuses on visual connections. Even if two elements on your page are far apart
and are not directly related to each other, they should still be unified through alignment. This ties the whole
design together and gives your pages a cohesive feel.
Create strong edges
Line up everything in design so that you can trace visible or invisible lines down the sides or across the top
or bottom. On most well-designed pages, you should be able to trace multiple different invisible (or
sometimes visible) lines. Some will run horizontally across the page; others will run vertically. Often, you'll
be able to picture a grid on which the entire design is based.
Obviously, there are other design principles at use in each design that help determine their effectiveness, but
alignment contribute significantly.
Page Design
13
Fig 19 Visible Lines
These sites all use visible lines, which makes it easier to analyze the designers' use of alignment.
Fig 20 Invisible Lines
Max Effect website has two very strong invisible vertical lines. One starts at the left edge of the logo and
runs down the entire page. The other starts at the left edge of the orange navigation bar and continues down.
a. Centring
Centring elements on a page - whether it's body copy, headings, pictures, or something else - weakens the
impact. When you centre a design (or parts of it), you lose the strong edges that left or right alignment create.
This lessens the strength of your page organization. A hard alignment on one side or the other is cleaner and
more dramatic.
In addition, centring is often not obvious. Take headings over a block of copy, for example. It's frequently
hard to tell whether a designer centred the heading, indented it, or simply placed it randomly, especially if
the body copy has an indent. At any rate, the strong edges are lost and the page looks jumbled.
This doesn't mean you should never centre anything. However, don't resort to centring automatically. Use it
consciously and sparingly.
b. text alignment
Be very careful about using left-justified, right-justified, and centred alignments together. Mixing alignments
confuses the lines.
One exception is to use right justification and left justification back to back. If you can line up right-justified
text right next to left-justified text, the hard edge between them is magnified. This can be a very effective
tool.
9 Columns and grids
Page Design
14
In page design lines are implicitly employed when grids and columns are in place.
Most designers will set up a page grid before they start whacking elements down on a page. To determine the
grid appropriate for your design is no easy business, but it's worth investing some time in it.
Fig 21 Columns
The Parthenon’s columns and virtual grids not only supported the whole structure but they also made it more
beautiful and ordered.
Here are a few pointers you might find useful:
 Number of lines per page - it's normally helpful if the number of lines you can fit on each page in your
chosen font is divisible by the number of grid sections you intend to have.
 Complexity of content - if your content is to include relatively little artwork, few panels containing
comments, quotations and so on, then you may not need a grid at all. If it is to be fairly complex, then it's
a good idea to have a number of panels in your grid, even if your basic page is to be a single column of
text.
 Margins - a function of how much you need to fit on to each page, which of course will vary from one
production to another
 Facing pages - when setting up the pages, always consider what two facing pages will look like together.
 Master pages - most desktop publishing systems will provide you with master pages. It's on those pages
that you should set up your grid once you've decided what it should be.
When you design a page you can decide the number of columns.
 The big advantage of a single column is, of course, that it's easy to use - so easy in fact that you might as
well just use a word-processor rather than a dtp system. It's also fine for large amounts of unbroken text
and is therefore very economical.
 A two-column layout is often just as efficient as a single column layout. If you use just one column on a
page, then its width is limited by the maximum length of a line to 2.5 alphabets. By using two, narrower,
columns you can put more text on a page.
 A three column page is excellent for the production of a lively, interesting layout. It is particularly useful
where a lot of artwork has to be combined with text. The relatively narrow columns will probably force
you to use a fairly small font and layout can start to get confusing if you're not careful. The use of a fair
amount of white space often helps to make the overall layout comprehensible.
Page Design
15
Fig 22 Columns in text
The use of columns in text can aid readability and create space efficiency.
Fig 23 Three Columns in text
Three columns are used often in brochures.
Lines as Rules
Lines can be used in document layouts to formalise in many places where invisible lines are caused by the
various layout features.
In laying out a document, lines can be created through a variety of means:
 Margins, set margins into the page so text aligns on the left hand side and white space is provided;
 Headers and Footers, designers frequently use underlining or some form of line in the header and footer
to border a page of text;
 Column separators, designers will often use vertical lines t formally separate columns;
 Figures and Tables, lines can be used around figures and tables to accentuate their presence;
 Shading, the use of shading around sections of text can create outlines for the text without actually
drawing lines.
Page Design
16
Fig 24 Lines in text
The use of lines as rules in the design of a page helps to formalize many invisible line
When using lines the following guidelines can aid their design:
 Too many rules can be distracting and interrupt the flow of text. Don't overdo the use of lines eg. putting
boxes in every element on the page.
 It is important to use appropriate size rules. Thick rules can dominate the appearance of an image or page.
Delicate text and rules that are too thin fade away into the background.
 Watch the spacing between the lines and the text. Put adequate space between text and rules to avoid
ascenders or descenders running into the rules.
 When placing rules above and below or to the left and right of a block of text, make sure the distance
between text and rules is visually balanced on both sides.
Some ways to create attractive and alternative forms of lines and rules:
 Use dots or dashes instead of solid lines. Most word processors offer a variety of line formats
 Pair up thick and thin rules for double lines. Again word processors provide a number of ways to create
lines and boxes apart from single line
 Use rules in a spot color or tint. Using a bit of colour, or a shade of gray can add a visual appeal.
 Use a consistent theme with lines and rules throughout the work. eg. a group of rules in the same or
varying thicknesses and lengths as design elements that draw the focus to an important element of the
design.
 Reversing text out of a thick rule can create a strong image. Use the option to create a shading (black)
around the text. Make sure to use strong contrasts eg. blacks on whites rather than greys on greys which
can limit legibility.
Links of Interest
Learn more about grids and columns functions in page layout.
http://www.cultsock.ndirect.co.uk/MUHome/cshtml/index.html
Rule is another name for a line in graphic design. Use rules as decorative elements and as functional parts of
the overall layout to separate, offset, or anchor areas of the page.
http://desktoppub.about.com/od/layout/l/aa_linesrules.htm
Learn more about alignment:
Page Design
17
http://desktoppub.about.com/od/alignment/
Collect some free clipart in the form of lines and rules
http://www.webplaces.com/html/lines.htm
Now take a look at two designs using mostly invisible lines.
http://www.summitministries.org/
http://www.max-effect.com/
It shows some examples of WebPages, explaining balance and contrast concepts.
http://www.siggraph.org/education/materials/graphics_design/mitchell_S96/chap1_3.htm
You can find here an in depth study about balance.
http://students.cup.edu/joh6115/intro.htm
Learn more about grids and columns functions.
http://www.cultsock.ndirect.co.uk/MUHome/cshtml/index.html
Page Design
18
Revision Questions
1. What is meant by the term legibility in relation to printed pages?
2. Describe how the choice of font type influences legibility.
3. Explain when it is best to have a small and a large font size when seeking a legible product.
4. What measurements are used to define the size of characters?
5. Explain how line length influences the legibility of text.
6. What are serifs? Describe fonts you know that have serifs and those that do not have serifs. How do you
decide when to use serifs?
7. List and describe the four factors that are used to plan the organisation of a page.
8. What is meant by the term optical centre? How is the optical centre used in page design?
9. What is meant by the balance of a page? Give an example of different forms of balance that can be used
in page design.
10. Discuss and describe strategies that can be applied to create contrast in pages.
11. Discuss and describe the ways in which lines can vary in page design.
12. How is line thickness measured in typical word processing applications? What are some common line
thicknesses?
13. List some of the line options available to users of Microsoft Drawing tools.
14. Discuss and describe how lines can be used in tables.
15. Describe some rules you would apply when using lines and rules in tables.
16. Discuss and describe guidelines for alignment of text and images in pages.
17. When should text be centred? When should it not be centred?
18. Some designers like to fully justify text to get lines on both sides of a page. Discuss when and when not,
this is a useful strategy.
Page Design
19