Graphic Design (CBGD3103)

Bachelor in Multimedia Communication

XXXXXXXXXX
XXXXXX

Puan Nor Harzun Bt Hashbullah

Open University Malaysia
(Kelantan Learning Centre)

Semester 7/2012

CONTENT

Page

1.0

Introduction3

2.0

The factors that influence the selection of effective typography

in graphic design4

3.0

2.1

The Eras typography...4

2.2

Size...10

2.3

Alignment.11

2.4

Kerning, Tracking and Letter Spacing..15

2.5

Choosing secondary fonts.16

2.6

Font communication..17

2.7

Typeface18

2.8

Type families.20

2.9

Look for inspiration...21

Example of Online advertisement. The factors make the design of

the selected advertisement effective in term of the use typography
and images.22

4.0

3.1

Typeface Bodoni24

3.2

Color combination..25

3.3

Content..27

3.4

Alignment..27

3.5

In the mix...28

3.6

Typographical Hierarchy...29

3.7

Line spacing...29

References
4.1

Electronics Book....30

4.2

Website..30

2|31

1.0

Introduction
Typography is around us everywhere we look; from street signs to advertisements to eyecatching headlines in the newspaper to labels on supermarket products and also in
website. Typography catches our attention and provides us with meaning. Typography is
the art and technique of the arrangement of type. It involves the selection of typefaces,
point size, line length, leading (line spacing), adjusting the spaces between groups of
letters (tracking) and adjusting the space between pairs of letters (kerning) (Pipes, 1997).

Significance of typography is unrivaled when it comes to graphic designing. Typography

is a particular design element without which every design seems incomplete. There is no
rocket science involved in it, for which we need to follow a set pattern of rules and
regulations. However, what we need is a sense that matches the perfect typo for our
design (because every type cannot be used for any design).
It wont be unjust to confess that typography plays a major role in making any graphic
design an instant success. By conveying our message visually with typography we can
save ourselves a lot of time keeping in the bounds of creativity. With type we can jump
right into things without having to extract, adjust levels or curves. However, sometimes
the combination of color and typography is overlooked, which affects the overall project.
Typography is something that many designers take for granted and shift their focus on the
more pictorial aspects of design like the image or layout etc. Also to be noted that
typography can be one of the factors in our work that will be immediately noticed and
valued in our portfolio when applying for jobs in the field, especially when it come to
advertising industry.

3|31

2.0

The factors that influence the selection of effective typography in graphic design.

2.1

The Eras typography

Typography much influences every graphic design. Its was the main factor in
design creation component and one of the primary ways of communication.
It depends on the designers idea and also their understanding. It also important to
people see the design, whether the message that wish to deliver or not. To date,
there are thousands of typefaces and fonts that can be found in the internet. Its
usage has evolved and is one of the important things in design. This has been
passed from generations and has undergone various improvements. Below are the
typography developments from old to modern typography.
During the 1800s a system of classifying type was derived, and although
numerous other systems and subsets of this system exist.

4|31

2.1.1

Humanist
Italian writers introduce Humanist (Venice) typography in the later part of
century Fifteenth. It contains thinner blow, meaning page appeared lighter
as it were not met with dark text blocks

This movement lasted from 15th century middle until end of

the century17th. Type will become subtler with introduction font faces
Old Style.

2.1.2

Old Style
Types start demonstrate larger a refinement, augmented by increasing
skills of punch cutters. As a consequence the Old Style types are
characterized by greater contrast between thick and thin strokes. Old
font style has continuously during 16th and 17th century. Famous typeface
still used on this day including: Garamond and Times New Roman.

5|31

2.1.3

Transitional
During 18th century see typeface arrival Transitional. This was the period
of history referred to as the Age of the enlightenment. There are
revolutions in France and USA. There is resistance for tradition.

Influential figures enclose Bodoni John Baskerville and Giambattista

which introduce different type forms. This typeface show thin serif
and narrow blow, that time considered controversial.

2.1.4

Modern
First typeface Modern was attributed to Frenchman Firmin Didot that first
typeface impressive page in 1784. The typeface Didot, elegant but need
6|31

many empty white space to ensure good readability. It usually a

font face used in fashion magazine and luxurious brand today.

2.1.5

Slab Serif (Egyptian)

Early 19th century England see typeface introduction of Slab Serif. This
become typeface which arose from audience. They inspired by new wave
advertising which tried to get attention customers through beefier
letterforms.

7|31

In France, Slab Serif was called Egyptian. It becomes popular after

expedition Napoleon to Egypt. On the return, Egyptian there is all rage in
Paris and this serif font faces were used to communicate this.

2.1.6

Sans Serif
These typefaces arose at a similar time. They are designed to be bold and
stripped of non-essentials. Its stand out characteristic is its lack of serifs.
San Serif fonts remain popular today for its ease of reading and strong
contrast, especially for web readers
(I Love Typography, 2007).

8|31

9|31

2.2

Size.

The different usage sizes would affect design and design message. But we
will be seeking really important to use different sizes to give emphasis for a
few designing section. For example, in a newspaper, often larger
headlines that text for news story. On the other hand, banner headlines
which serves to most important news story greater than headlines in the
paper. Accordance in designs, we will be seeking useful to use various font sizes.

10 | 3 1

2.3

Alignment.

This may seem trifling but it not. Its one of most important things consider
when use type. To know which quite alignment to use, we have to consider
first readability and design aesthetics. When we use an alignment, be
consistent all lengths design. If we use central alignment for our headline, did
so to remainder page. If we usage associate alignment, it would be misleading
readers and perhaps not even keep reading for it now eyes disorder. Now, let
us take a look at the different alignments:

11 | 3 1

2.3.1

Flush Left

Flush Left (or Ragged Right). Text is aligned to the left and is one of the
biggest factors for improved factors for better readability. Since, we read
from left to right, this is really effective.
2.3.2

Flush Right

12 | 3 1

Flush Right (or Ragged Left). Text is aligned to the right and could be
used to highlight some parts of the text. It can slow down ones reading
for we are used to read from left to right.
2.3.3

Justified Alignment

.
Justified Text in beginning and end are aligned to left and right. This look
clean like fit all letters in a box, although, sometimes other people find it
hard to read for there isnt a visual cue on when the text line will stop.

13 | 3 1

2.3.4 Centered Alignment

Text concentrated aligned to central. Make good used this if use correctly,
it can make our work look elegant. Wedding Invitation usage focus
centered alignment produces elegance. If we do not use it really, it could
establish confusion for readers.

14 | 3 1

2.4

Kerning, Tracking and Letter Spacing.

Since we have known about fonts, the families and typeface, we need to become
aware of these three things now for it affects will look into our design.
Tracking adjust interstice all letters simultaneously. Kerning involving
reduce places in between two letters while letter spacing is increasing between
two letters. This could be a little detail but would affect whole design, if we do
not give proper attention. Spaces are very important to direct a readers eye. If our
letters too crowded, it not attract read in and it will look heavy for reader's eye.

15 | 3 1

2.5

Choosing secondary fonts.

Since we will not use one font in our design, ensure to choose a good secondary
font that will still jive with our primary font. Ensure to use different fonts to avoid
visual confusion but should also look to it that there was a good combination.
Our design will look funny and strange, if we do not choose secondary font.

16 | 3 1

2.6

Font communication.

Like colors, fonts also relay a different message depending on its typeface. Every
font communicates a different attribute to a reader. Some look masculine while
others look feminine. There are also some scary looking fonts while some are
elegant looking. Choose which one suits design. Our font choice can speak for
itself.
2.7

Typeface.

17 | 3 1

Type face is usually mistaken with font. But they are different. Fonts refers to a
specific member of a type family if it is roman, boldface, etc while a typeface
refers to the consistent visual appearance or style of a font. We need to select
typefaces that suit the theme of our design. Typeface is divided into two main
categories, the Serif Font and the Sans Serif Font.
2.7.1

Serif Fonts

Serifs are small lines at the ends of character strokes. Serif fonts are font
styles with serifs at every character. These are usually used in books for it
guides the eyes from letter to letter.

18 | 3 1

2.7.2

Sans Serif Fonts

Meanwhile, a San Serif doesnt use a serif. It is usually used in magazine

headlines and in websites for it is easier to read in the computer screen.

2.8

Type families.
This is important for us wouldnt be able to recognize fonts and their types if we
are not aware of this. Since we are designer and we use type in our designs, we
need to have apt knowledge on this.

19 | 3 1

Every font style has different type families. It could be Condensed Bold,
Condensed Black, Ultra Light, Ultra Light Italic, Light, Light Italic, Regular,
Roman, Italic, Extended or Combined Styles.
2.9

Look for inspiration.

20 | 3 1

As always, looking at others work could give us more idea and inspiration in
using type. Look at posters, brochures, logos, websites and others and figure out
how they use type. We can get a lot of ideas from their work. Study existing
examples and start with your own.

We can see type anywhere every day. We can see it in the TV, in billboards, in
magazines, in cars and in many other places. Type is everywhere and we could
never get away from it especially designers.

21 | 3 1

3.0

Example of Online advertisement. The factors make the design of the selected
advertisement effective in term of the use typography and images.

I choose Debenhams because the company was founded in the eighteenth century as a
single store in London and has now grown to approximately 160 locations. It is listed on
the London Stock Exchange and is a constituent of the FTSE 250 Index. It has
had to evolve and offer its customers something more relevant. This online advertisement
website offers various goods, from kids, teenagers, bachelors and adults. It also offer
more big sale every year. The website looks glamorous, talented, and international. I love
Debenhams. The website is: www.debenhams.com

The typography has appeared in catalogues, promotional material and in store and used to
trigger an emotional response, which translates into an action purchase. The advent of the
internet has given retailers a new medium to display and use typography for the sale of an
item.

22 | 3 1

Logo

Christmas sales
Beauty & fragrance
use small serif

u
Bodoni typeface
face

Social networking

Debenhams is a large UK retailer that sell a wide range of household goods, electronics,
clothes and more.
The companys current focus is on promoting their Christmas sale. The website enables
their target market, families to easily access products that interest them. The home page
displays popular product categories such as beauty and fragrance, women swear, home
and furniture and toys in large contrasting boxes, which serve to jump out from the page.
The typography features use of Modern typefaces. The Debenhams brand logo situated
in the header area uses a narrow, evenly spaced font with small serifs. This font contrasts
against the Arial san-serif type used in the body text and separates the Debenhams brand
from the items that they sell.

23 | 3 1

The Modern font used for the brand logo is repeated below in the footer. The use of and
positioning next to young and modern social networking icons such as Facebook and
Twitter informs the viewer that this is a company in touch with its customers.

The contemporary white font placed on top of the black background in the header and
footer creates a chic and sophisticated image. This tells the viewer that Debenhams is an
established company but who is in touch with modern fashions and trends.

3.1

Typeface Bodoni
The promoted sale categories such as beauty products and womens swear use the
font face Bodoni. Bodoni has a narrow underlying structure with flat, unbracketed
serifs. The face has extreme contrast between thick and thin strokes. The font face
is elegant and flowing and compliments the look and feel of the Debenhams
brand.

The typography is used to promote goods for sale. Discount percentages are
shown in large font sizes. These sizes are the biggest fonts on the page and help
create a hierarchy. For example, people eye initially focuses on the brand logo
then is drawn to the large fonts below, with the most important offers placed at
the top.

The typeface Bodoni, used to promote these discounted goods, has a textured
glass effect. The typeface is yellow and appears to sparkle, almost as if were
looking in the store one evening to see the Christmas lights contrasting against the
product displays.

The products take centre stage within the Debenhams site. Christmas is the
biggest sales time of the year and typography is used to reflect and promote this
festive period.

24 | 3 1

As mentioned Bodoni is used to promote discounted items. The typeface features

strokes that contrast from its stem. This serves to produce a shimmering effect.
This is an optical effect of the vertical strokes. This has been further heightened
through the glow emerging from behind the type. These effects reinforce
Christmas associations such as shiny decorations and bright lights.

The typeface is also large announcing to customers that Christmas has arrived and
that there is plenty to enjoy within for all. This again reinforces Christmas
associations such as inclusiveness and abundance.

3.2

Color Combination
This is one factor which is mostly overlooked by majority of the people when
they plan to design online advertisement website. However, let me clear one thing
here that this is one factor which can either make or break the future of online
advertisement website. This is a common psyche of the people that the thing
which attracts them at first glimpse, they give it a try and the thing which
influences them to take this step is the appearance, packaging or color
combination of that particular things and of course will attract people to buy
anything in the online advertisement website also tends to visit them every now
and then and eventually becomes loyal to those websites as well.

They website use many combination of blue and added water to make a web
splats have the impression that want to always approach the client and look
elegant. It represents knowledge, power, integrity, and seriousness.

25 | 3 1

Black is the strongest of the neutral colors. In this online advertisement website,
black is the second background that commonly associated with power, elegance,
and formality. Black is commonly used in edgier designs, as well as in very
elegant designs. It can be either conservative or modern, traditional or
unconventional, depending on the colors its combined with. In design, black is
commonly used for typography and other functional parts, because of its
neutrality. Black can make it easier to convey a sense of sophistication and
mystery in a design.

Pink is essentially a light red and is usually associated with love, romance and
friendship. It denotes feminine qualities and passiveness. Pink is thought to have
a calming effect. The designer put pink background in perfume fragrance to make
people feel calming effect where pink functions to gender textual referents, attract
female readers attention and also effect in visual communication. Researchers of
color psychology have found that this effect only occurs during the initial
exposure.

26 | 3 1

Sometimes a background image is enough to make the layout stand out the design
looks distinctive and memorable. The background image of the site perfectly fits
the company, which offers Christmas sale.

3.3

Content
Another important factor which would influence overall online advertisement
website is the content that would be posting over website once website goes live
over World Wide Web. This online advertisement website have relevant to the
niche are promoting via website plus at the same time, the content are updated at
all time so that the visitor would like to visit again and again in order to find the
latest news about promotion over website every now and then. For the example,
the Christmas Sale on December every year.

3.4

Alignment Check
Text alignment is an important factor too. There are generally four types we could
potentially use: left, centre, right and justified. Left-aligned type is by nature less
formal and more inviting than fully justified type. This online advertisement
website using left alignment. It is much easier to maintain well formed blocks of
type with compared to justify as it doesnt create odd whitespace issues between
words and has a consistent level of kerning. The alignment left often considered
more informal, friendlier than justified text and readable for the people. Also
known as ragged right for the rough right edge created by the variances in line
length, left-aligned type by nature creates its own visual interest in the form of
whitespace.

27 | 3 1

3.5

In the Mix
Something else that must consider when applying typography to design, that
would also fall under the basics would be the mixing of different fonts within
advertisement.

In Debenhams website using three different fonts which is Bodoni, Arial San
Serif and also Serif. For variance in the face of such limitations, go with some
combination of a small serif header with a Arial San Serif body typeface, and
promotion using Bodoni. Furthermore, it is using a combo of upper and lowercase
serifs while mixing also offers some nice variety for design.

Font Serif

Font Arial San Serif

Font Bodoni

28 | 3 1

3.6

Typographical Hierarchy
When we look at Debenhams site, we know immediately where we should start
reading. Debenhams site welcome catches our eye. Its much bigger, using
typography to establish a clear hierarchy. Debenhams have well hierarchy.
First Moving on to another important aspect of typography implementation on the
web to look after, is setting the hierarchy for online advertisement website.

The type should effectively take the reader by the hand and lead them through the
site. The most common way to achieve consistently by Debenhams Website using
size and boldness to highlight and steer the users attention where it needs to go.
Other ways include using all caps and mixing font types to draw the readers eyes
through the website.

Big size and boldness

3.7

Line Spacing
Line spacing can be a major deal breaker for a good scheme of typography. In
Debenhams website, it is using logo tag in line spacing of the text. It is generally
becomes a lot more readable and easier on the eye. The line spacing about 0.3em0.5em larger than font size.

Debenhams realize why generous line spacing is a must in the majority of

designs. At this level, they are pretty readable but the spaced out one is ever more
so due to each word having more space to be distinguished and separate from the
rest.
Line Spacing

29 | 3 1

4.0

References:
4.1

Electronic Book:

Smith, Cheridan. ( 2008). Foundation form creation with adobe livecycle

designer es. [Books24x7 version] Available from
http://common.books24x7.com/toc.aspx?bookid=29080

4.2

Websites:

David Gareth Johns (2007), Typography essay, Retrieved June, 28, 2012,
from:
http://www.webdesignstuff.co.uk/work/jd007/typography_essay.pdf
(2007),Please Enjoy Choosing Type Alignments for the Web, Retrieved June,
28, 2012 from:
http://astheria.com/design/choosing-type-alignments-fortheweb
B, Robert (2010 )How To Use Typography Effectively in Web Design,
Retrieved June, 28, 2012, from: http://www.noupe.com/fonts/how-to-usetypography-effectively-in-web-design.html
Prisantoso,Y(2010)Factors Influencing Your Overall Website Design,
Retrieved Retrieved June, 28, 2012, from:
http://www.instantshift.com/2010/10/14/factors-influencing-your-overallwebsite-design/
Wikipedia(2012) Debenhams, Retrieved June, 28, 2012, from
http://en.wikipedia.org/wiki/Debenhams
Wikipedia(2012)Typography, Retrieved, June, 28, 2012, from:
http://en.wikipedia.org/wiki/Typography
Liez, K(2012)What Designers Need to Know About Typography, Retrieved,
June, 28, 2012, from: http://naldzgraphics.net/tips/what-designers-need-toknow-about-typography/
Mirza, A (2010)Typography and its Immense Importance for Your Designing

30 | 3 1

http://www.dzinepress.com/2010/07/typography-and-its-immenseimportance-for-your-designing/
Cronin, M (2009)10 Principles For Readable Web Typography, Retrieved
July,2,2012, from: http://www.smashingmagazine.com/2009/03/18/10principles-for-readable-web-typography/

31 | 3 1