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.
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
• 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 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
Topic 5: Page Layout
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.
1
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.
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
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 posible 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 xheight and which is still very legible with a reduced
line spacing.
2
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.
• 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.
Page Design
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.
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.
3
• Paragraph breaks within sections;
• Consistent line widths;
• Consistent captioning etc.
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 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
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
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.
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;
Page Design
4
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.
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, fiveeights from the bottom. The optical centre is the place
where the eye perceives the optima balance point to sit.
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.
Fig 12 Formal Balance
Static centred form is pleasant but mostly ineffective.
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
Page Design
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 counterbalancing 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
5
depend on the number of imaginary grid units you have
selected and how much space is available.
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.
4. Contrast
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.
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.
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.
Fig 13 Informal Balance
Off-centred forms create visual interest.
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) The point size of the text;
b) Weight, using a style of font with heavy characters;
c) Position, placing images and text in ways to ensure
they stand out;;
d) Shape, using a shape that differs from that which is
expected or that which is currently being used;;
e) Colour, changing the colour to provide a different
look.
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.
Page Design
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
6
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
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 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.
Fig 17 Blends
The lines shown have different blend parameters
demonstrating variations in color and darkness.
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.
Page Design
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.
7
• 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.
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
4575
Fax
2342
Dept
56
Section
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
Phone
Fax
Dept
Section
Ron
Jones
Mary
Elliott
Susan
Linster
Jenny
Beard
4575
2342
56
Admin
3345
5644
34
Sport
3778
9796
56
Govt
7464
3453
45
Leisure
Person
Ron
Jones
Mary
Elliott
Susan
Linster
Jenny
Beard
Phone
4575
Fax
2342
Dept
56
Section
Admin
3345
5644
34
Sport
3778
9796
56
Govt
7464
3453
45
Leisure
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.
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;
Page Design
Fig 19 Visible Lines
These sites all use visible lines, which makes it easier
to analyze the designers' use of alignment.
8
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, rightjustified, 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 rightjustified 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
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.
Page Design
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.
9
Fig 22 Columns in text
The use of columns in text can aid readability and
create space efficiency.
Fig 24 Lines in text
The use of lines as rules in the design of a page helps
to formalize many invisible line
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
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
10
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_linesrul
es.htm
Learn more about alignment:
http://desktoppub.about.com/od/alignment/
Collect some free clipart in the form of lines and rules
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?
http://www.webplaces.com/html/lines.htm
7. List and describe the four factors that are used to
plan the organisation of a page.
Now take a look at two designs using mostly invisible
lines.
http://www.summitministries.org/
http://www.max-effect.com/
8. What is meant by the term optical centre? How is
the optical centre used in page design?
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/in
dex.html
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
11