You are on page 1of 26

FACULTY OF APPLIED SOCIAL SCIENCE (FASS) FAKULTI SAINS SOCIAL GUNAAN

CBGD3103 GRAPHIC DESIGN

Matric No:

NRIC No:

Telephone No.:

Email Address:

Tutor: Local Learning Centre:

SEMESTER MAY 2012

1

ACKNOWLEDGEMENT Praise to the Lord for providing me with great health, strength and emotional supporting completing this assignment. It is with great appreciation that I acknowledge the contributions and support in completing this dissertation. It is with great appreciation that I acknowledge the contributions and support of my lecturer whose time, effort and guidance were highly beneficial especially during my completing my assignment. My sincere appreciation and thanks to my colleagues for their constant support, guidance and friendship. I wish to acknowledge my wife, Senni, in particular, for her endless patience, guidance and continuous support. Her moral support and perseverance have been my inspiration. I really appreciate all my family members because of their endless support; encouragement and understanding throughout my good times as well as my tough times are so meaningful. Finally, I am grateful to my company, the government who’s allowed me to pursue this assignment.

2

0 SELECTED ONLINE ADVERTISEMENT FACTORS WHY THE ADVERTISEMENT SELECTED 4.2 4.5 The Choice of Typeface Font Size Line Length The Alignment Contrast and Colour 5.3 2.2 1.TABLE OF CONTENTS CONTENTS.2 2.3 What is Graphic Design? What is Typography? History of Typography 4 4 5 6 7 7 9 11 15 17 20 21 21 22 22 22 23 24 3 2.3 4.0 FACTORS INFLUENCE EFFECTIVE TYPOGRAPHY 2.4 4.1 4.5 The Election of Type Families & Fonts Typefaces Selection Typesetting Hierarchy Type of Alignments Selection 3.0 INTRODUCTION 1.1 1.0 SUMMARY .1 2.4 2.0 4. ACKNOWLEDGEMENTS REFERENCES PAGE 2 25 1.

1. It was also known as Visual Communication or Communication Design. composition derived from the Latin word "componere" which means the merger. or structural. Basically a composition is an amalgamation of several parts into a form of matching. To produce the final result. natural. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated. The term "graphic design" referred to a number of artistic and professional disciplines that focus on visual communication and presentation. Graphic design utilizes the elements of graphic design and the principles of graphic design. To create a visual representation of ideas and messages there are various methods used to create and combine words. symbols. and images. 4 . Today's graphic designers often use desktop publishing software and techniques to achieve their goals. a combination of typography. non-objective. Compositions are regarded as an arrangement design elements by following certain principles and capable of achieve a form of abstract.0 1.1 INTRODUCTION What is Graphic Design? The design is basically the result of the preparation of visual experience and taking into account the emotional elements and principles of beauty poured in a unity of composition is good. visual arts and page layout techniques may use by the designer. ornamental.

because basically the letter can be affect the reader emotionally. Good typography can be a cornerstone to a successful web design. Legibility and readability are closely related. In modern art. Recognize the type and character of a typeface is very important. typography is also used to convey an artistic statement. Legibility and readability are fundamental to successful typographic design. According to Danton Sihombing. from yesterday and today. or any printed matter. It is the key element in almost every design. “The type of font chosen can make or break a design. In a one word statement. MFA. from the hand and art. It can make text easier to read. in his book "Typography in Graphic Design". "A good typeface is a combination of information and inspiration of consciousness and unconsciousness. the letter has the potential to translate the atmosphere that is implicit in a verbal communication which is poured out through other forms of visual abstraction. Here is some facts about them: 5 . " Meanwhile. The sad part is. typography is a visual representation of a form of communication is verbal and visual properties of principal and effective. Often the terms are used interchangeably. from reality and fantasy. There is no getting around it. Through the content of the functional and aesthetic values. Typography is the art of selecting and recognizing letters and characters use in a design. It can help generate a visual hierarchy. but not the same. you have to be properly trained in typography.2 What is Typography? Typography is derived from the Greek word Typos which means the form of and Graphe which means writing.” Paul Rand said. The form of the typeface you chose has to capture the very essence of the design you wish to proclaim. typography will effect your design’s entire IMPACT. according to Roy Brewer (1971) typography can have a broad sense that includes the arrangement and pattern pages. that is almost every new designer’s weakest point.1. or else your precious design intentions and future will be lost in the confusion. of work and play.

A highly legible typeface can be made unreadable by poor typographic design. The glory of the Roman empire in the first century to conquer Greece. Phase of computerization makes use of typography is easier and faster in less time with this type of choice of hundreds of letters. This is the root of the typographical form from Demotia. At present. Further technological advances occurred when Adobe Systems released the Post Script Fonts in 1984 and Apple Computer and Microsoft Corporations issued a True Type Font in 1991.• Legibility – is concerned with how easy it is to distinguish individual letters. • Readability – refers how easy it is to read and scan over paragraphs of type. Digital letters actually form a functioning computer language to translate the code to produce the perfect display typeface either on screen or at the time of printing. This kind of language are also among others. we can found a variety of digital fonts used in a computer program. we experienced growth of typefaces by hand until the creation phase of computerization experience. readability is dependent on the manipulation or handling of the type. 1.3 History of Typography Typography. Nowadays. artistic. but there are times when distinctiveness may be more important than legibility such as selecting a font for a unique and distinctive company logo. ( hieroglyphs) was known around 1300 BC. In Egypt grew Hieratia font. The peak development of typography is when the Romans began to establish his authority around the 8th BC in Rome. Typographical form eventually grew up in Crete. religious. such as the Viking nations Norway and Sioux Indians. While legibility is basically dependent on the typeface design. The Romans did not have its own writing system so they learned the Etruscan writing system which is a native of Italy and perfected it to form Roman letters. It is better to always choose a legible type. It will be more legible if the type of design is simpler. started from the use of pictograph. and the Latin alphabet that was brought from Greece. which began to be written using a special pen. bringing a new civilization in Western history by adapting literary. and then spread to Greece and eventually spread all over Europe. 6 .

The terms family and font separate them into much more specific categories. or distract them. etc. and its member typefaces include: Myriad Roman. Myriad Bold. and Myriad Bold Italic. Make your type selections mean something. The font choice can speak for itself.0 FACTORS INFLUENCE EFFECTIVE TYPOGRAPHY Here the five factors that influence the selection of effective typography in Graphic Design to find a better typography. For example. These generally range from 6 to 72 point: 7 . Some look masculine while others look feminine. Type classification (Oldstyle. Choose them carefully. Font applied to: i.1 THE ELECTION OF TYPE FAMILIES & FONTS Every font style has different type families. Myriad roman is a font in the Myriad family. For instance. • Type Family Family is a broad term used to describe a group of typefaces which share the same name and basic features. and they will either help you communicate with viewers. There are also some scary looking fonts while some are elegant looking. 2. Choosing the size of type For text type. If you are not aware of this . Myriad is the name of a family. Every font communicates a different attribute to a reader.) is used to divide type designs into broad groups which share similar general characteristics. according to legibility studies prove most readable. Myriad Italic. Choose which one suits your design. This definition of font is a contemporary one. Modern.2. use sized that. you wouldn’t be able to recognize fonts and their types. A family can contain anywhere from just two fonts (Roman and Italic) to twenty or more! • Font Font is the word used to describe a specific member of a type family.

Minimum Font There are some cases where many fonts being used simultaneously works well as an artistic statement.) iii.ii. Here is a range of classifications for weight regarding fonts: Ultra light Ultra bold Light Regular Book Semibold Medium Thin Bold Extra bold Demibold Black/heavy (Above is an example of weight of the font) (Above is an example of a family and some of it’s font. Choosing the right font can make huge different in typography. The weight within the family There are many different font weights with a variety of names. Basically people will used one or two font but it must not more than three.2 TYPEFACES SELECTION 8 . 2. but it’s a generally a good rule of thumb that you keep the number of fonts down to a minimum.

Fonts refers to a specific member of a type family if it is roman. using a serif font with minimal disruption to readability. Then. etc. First. 9 . the readability index for serif fonts compared to sans serif fonts is 41% higher for the average reader. Helvetica Black. Typefaces are a family of fonts (such as Helvetica Regular.Type face is usually mistaken with font. Times Roman is considered to be one of the most legible on paper. Some typefaces are more legible than others on the screen. Typeface is divided into two main categories which are: i. Select typefaces that suit the theme of the design. The Serif Font Serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols. Three reasons a serif font should always be used for printed copy. But they are different. but at screen resolution its size is too small and its shapes look irregular. using a serif font. In print. editors can drop from 10 points to 9 or 8 points. Third. The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text. boldface. and Helvetica Bold belong to the Typeface Helvetica). Helvetica Italic. while a typeface refers to the consistent visual appearance or style of a font. longer lines are used and it didn’t causes the reader to lose their desire to read. most readers expect a serif font for long blocks of text and find Times New Roman comfortable to read. Some generally used Times New Roman because it produces a reasonable balance between density of information and overall legibility.

Secondly. Sansserif is considered more legible on computer screens. Most web pages employ sans-serif type for this reason because san serif fonts are easier than serif fonts to read on the lowresolution computer screen. the line length is typically very short because using a longer line length can drop the readability index dramatically.ii. 10 . Below is an image showing some of the san serif fonts. and shorter pieces of text and subject matter requiring a more casual feel than the formal look of serif font types. it could be a size down. but more often it is sized up. it looks better because it provides the illusion of additional contrast. headings. The Sans Serif Font Sans serif fonts are more often used in headlines. There are four reasons why typographers using a sans serif font for body text when used on-screen. Firstly. Lastly. the line spacing used for screen text is usually wide and it improves readability and comprehension for the reader. Next.

2. colour is the overall density of the ink on the page. It is important to consider what purpose the website you are designing for is surfing. Text layout. readability is important. and the interplay of text with white space of the page and other graphic elements combine to impart a "feel" or "resonance" to the subject matter.3 TYPESETTING Typesetting is the arranging and composition of text. 11 . In typography. Colour and Contrast Selection When dealing with contrast and colour decisions. The colours of your website can have a huge impact on the overall attractiveness of the site. Be sure that the text on your website has enough contrast from the background that it is easy to read at length. tone or colour of set matter. leading and depth of the margins. Whatever design you decide on should allow for the text to be easily read. For example is the website text heavy and are users going to be reading lengthy text on this website? If so ensure that your design choices such as background colour and background textures etc. Choosing the right colour combinations can be difficult. The look of your site will obviously be a factor in your visitors’ first impressions. determined mainly by the typeface. The image below using colour to create readability and contrast with alternate fill and stroke colours then applying drop shadows. will enhance and not distract from the ability to read text. i. but fortunately there are a number of online tools that can help. but also by the word spacing.

Designing a great web layout and utilizing a grid will aid in creating an ideal space where the content can be placed. It leaves the reader hunting for the next line and they can often lose their spot where they were reading. It tend to stress people if the lines are too short and some will skipping potentially important words. 12 .ii. breaking the reader’s rhythm. When line length is too long it makes it difficult for readers to follow and they become frustrated. Line length A good line length is one that allows the reader’s eyes to flow from the end of one line to the beginning of the next very easily and naturally. It is extremely important to consider when designing for web. Below is an example taken from the screen for a short and good line spacing. Anyway if the line is too short the eye will have to travel back too often. Another common rule of thumb to use for line length is to only have roughly 12 to 15 words per line or 52 to 78 characters not including spaces.

the designer assigns each character a width allowing for consecutive characters to be placed on a line without touching. It is commonly confused with tracking. Most high-quality fonts contain instructions for kerning which are applied automatically by the typesetting engine. 13 . Kerning is the amount of space between the letters within a word or sentence.iii. Kerning Kerning is implicitly part of digital type design. The examples are shown below. and advanced typographic systems allow the specification of kerning. Kerning allows you to manually adjust the space between any two characters. When a typeface is designed.

Tracking (Letter spacing) Tracking refers to the amount of space between a group of letters to affect density in a line or block. Below are two examples of tracking. you would be well advised to leave it alone and adjust the kerning manually for further changes. As such. Here are some examples of tracking. it is a powerful option. Tracking allows the user to apply a form of universal spacing between all characters. 14 . and once you have found a setting that you feel is suitable. Be sure to experiment with tracking when you need to fill in space on the screen or to make stroke text more readable. According to the image below the top line is too loosely tracked.iv. whereas the bottom line is too tight.

5. it is all one typeface in one size and weight. Last figure show that colour used to guide the eye around the composition and graphic element. Next. 1. 4). In Fig. and introducing multiple sizes and weights to add some variety. This isn’t realistic for most design work. All of the word have the same typeface and type size. Below is the concepts with an example that slowly builds complexity by introducing new visual elements. A clear understanding of hierarchy results in more beautiful. emphasize the most important element with a weight change (fig. Fig. The only thing communicating hierarchy is the order in which the text is presented. 3). clarity to the information by chunking it into logical groups (fig.1 15 Fig. but it is a great place to start. 2). It shows the user were to start reading and where to read through. varying the alignment and spacing. and communicative designs that better serve their audience. Hierarchy defines how to read through content. meaningful.4 HIERARCHY Every typographic layout needs the essential element of hierarchy. It differentiates headers from body text. Below are some works of hierarchy. It is important to understand how to reinforce this hierarchy typographically.Varying the vertical spacing provides a bit more structure. The increased size shows the reader where to begin reading (fig.2.2 . As shown in Fig.

4 Fig. 5 Fig.Fig. 6 16 . 3 Fig.

This is a good alignment choice for wrapping around an image. This is really effective since we read from left to right. It will confuse the readers and might not even continue reading for it is now an eye distraction if you use mixed alignment.5 TYPE ALIGNMENTS SELECTION It is one of the most important things to consider when you use type. do that for the rest of the pages. If you use centre alignment for your headline.2. Below are the different type of alignments: • Flush Left One of the biggest factors for improved readability is text that aligned to the left. • Flush Right Flush right aligns on the right margin. It is considered to be more difficult to read than flush left. It can slow down one’s reading for we are used to read from left to right 17 . The golden rule for typography is to make it readable. Be consistent all throughout the design when you use an alignment. or for displaying poetry.

Centred type results in both the left and right margins being ragged.• Centred Text is aligned to the centre. If you are going to centre text. poetry and invitations. titles. as it aligns from the centre outwards. The line lengths are not the same. 18 . It can make your work look elegant if used properly so make good use of this. Wedding invitations use centred alignments to express elegance. Do not use for large blocks of text or throughout a document. • Justified If you choose for a justified text alignment. make it obvious. but they are not really different. you don’t have as much control over it because this alignment provides even margins on both sides. It may create confusion to the readers if you do not use it well. In this paragraph it is difficult to tell if this text was centred purposely or perhaps accidentally. This text is centred. This style is best used for headlines.

don't you think? • Asymmetrical This alignment is used for a description for any other kind of arrangement.This text is justified. Whatever you call it. Not an option under the alignment menu on a computer. Some people call it quad left and right. It is quite popular for print or on the web for areas of type where you want to create an original. don't do it unless your line length is long enough to avoid awkward gaps between the words because the gaps are really annoying.the text lines up on both sides. and some call it blocked . eye-catching appearance. 19 .

generally. 20 . This has using typography art advertisement which I think is successful for Heinz. The ad targets ketchup lovers who are attracted to clean.3.0 SELECTED ONLINE ADVERTISEMENT ( Heinz ) This advertisement targets. chefs and the public. natural ingredients.

Following that philosophy. if something is difficult to read. And it only use two type of fonts and that make the ad easier and interesting to be read. So. One of the type font is using all capital letters and another one is using big and small letters.0 FACTORS WHY THE ADVERTISEMENT SELECTED People are far more likely to be accepting of a message that is stated clearly in both words and typeface. And in food service that means they would not paying higher prices. the perception is that it is more difficult to do. Below are some factors why the ad was chosen: 4. For many people.1 The Choice of Typeface This ad is using Sans-serif fonts and its seem to work wonderfully for these kinds of minimal websites with big bold typography. creating call-to-actions using highly readable fonts should encourage the most engagement.4. People were more likely to make a decision when the message was easier to read. ( Arial Rounded MT Bold ) ( Script MT Bold ) 21 . the selected ad are readable and the food product (Heinz) already get positive feedbacks from the viewers.

speed reading that would record text in a photographic manner is physiologically impossible. The ad is using two size of font. ( Centred Alignment Text and Image ) 4.4. The body text means a long. According to studies measuring the movement of the eye. Its a psychological thing which really works. consistent text entity where the point size is usually 9–12. As we know that reading takes place in small leaps so that the eye picks put 5–10 characters at a time.3 Line Length The ad’s using only one or two words in each line and that makes this ad is easy to read and remember. aligned to the centre. Bigger variations not only make the reader to read big sized text but it also make him to read the smaller one too. This ad deals chiefly with the readability of the body text. 4. 4.2 Font Size The text is aesthetically pleasing but it definitely gets the point across. I am not saying its a bad practice. actually it has its own use. The alignment for this ad is seems like an asymmetrical 2 grid with the justified.5 Contrast and Colour 22 .4 The Alignment Most of the amateur designers use centre alignment for text. but using it for paragraphs is not recommended. The text in this look strong and balanced in centre alignment rather than left or right alignment. Well. Size contrast is the key when playing with font sizes.

6 The Art Design and Image Using art design in some ads will attract viewers to continue read it.This ad is easily understood because it is the first and most basic form of contrast. 23 . Using the product itself as an image is a keen-witted so the viewers will know the product and tempted to buy it. not enhance it. This ad design looked “spontaneous” and “grungy”. The net effect is to reduce. not enhance. All this does is to reduce contrast. 4. the contrast between the background and the words. The selected ad is using many tomatoes (the main ingredient of the product) and some kitchen utensils to make a big tomato. An attractive art design will make the ad more successful. and make the page very unreadable. Both words and the background share the red colour.

And I found it fascinating. If I had never dropped in on that single course in college. Artistically subtle in a way that science can’t capture. Role of the typeface itself is to communicate ideas or information from the page to the observer. Such as newspapers or magazines we read. it’s likely that no personal computer would have them. we had been related to typography every day and every moment. It was beautiful. The use of typography allow a letter displayed without having to explain a word or phrase that contains the sound. I learned about serif and sans-serif typefaces. One way to use typography is to manipulate the design to make it look more attractive. it all came back to me. about what makes great typography great. but also has elements of great art. None of this had any hope of any practical application in my life. there will always a way to create a creative masterpiece. 6. when we were designing the first Macintosh computer. But 10 years later. Basically the technique and art of typography is to set the font. It was the first computer with beautiful typography. where the elements of typography is not just reading.0 SUMMARY Typography itself is one element of a unique graphic design world. Sometimes unconsciously. typography is not some random spur of the moment decision. As the conclusion. And since Windows just copied the Mac. but provides the functional advantage of being easier to read and take value away from. there’s many factors and values that should be considered to generate well-tailored typography that not only looks good. Currently typography has become a force in the creation of a graphic design. about varying the space between different letter combinations. I decided to take a calligraphy class to learn how to [learn calligraphy].0 REFERENCES 24 . Graphic design artists often use the letter as a complementary tool designs to create a certain impression. design of letters and letters form. Usually typefaces used by graphic designers to convey a specific message or as a graphic element to support the design. the clothing label we wear and many other examples. On the use of typography as a source of noise letters can be ignored. And we designed it all into the Mac. In graphic design.5. Historical. the Mac would never have multiple typefaces or proportionally spaced fonts. Below is the quote from Steve Jobs’ Stanford commencement.

About Face: Reviving the Rules of Typography.Bain E. New York: Hasting House Publisher Binns B. Watson Guptil. Robert (2002). The Elements of Typographic Style (version 2. Step-by-Step Graphics: 57-6l Black. 63. The Legibility of Sans Serif Typefaces. Vancouver: Hartley & Marks. ISBN 1-58115063-6 25 . IK. 5th ed. London: Penguin Books P.B. an Experimental Study. 1 edition. 1998). 1983. Page 40: Prentice Hall Inc Swanson. Type and Typography. 2006. 1990. Johannes Itten. The New Typography. New York.5). (January 31. John Wiley & Sons.K. Behaviour & Information Technology 9: 283-296 Bringhurst. The Elements of Color.F. and Scala. De Lange R.W.S. Master’s Diploma in Technology: Graphic Design. 1970. A History of Graphic Design. ISBN 0-88179-133-4. ISBN-13: 978-0471289296 Jan Tschichold. ISBN 2-88046-798-5 Meggs P. the Essential Guide to Typography. David (2004). 1993. J. University of California Press (November 30. A. p63. 1998. The Theory and Practice of Typographic Design. Designing with Type. Readability and legibility in text. Bloemfontein: Technikon O. Allworth Press. Alan. London: Laurence King. 1997. 2002. Production For Graphic Designers 2nd Edition. Allworth Communications. Switzerland: Rotovision SA. Pipes. Visible planning on paper and on screen: The impact of working medium on decision – making by novice graphic designers. & Haslam A. ISBN-13: 978-0520071476 Jury. 1970). 1990. Craig. Gunnar Graphic Design and Reading: explorations of an uneasy relationship (c) 2000.

0).W. Alex W. Wucius Wong. ISBN 0-393-730344 (pbk).W. Norton & Company. Inc. Principles of Form and Design. (September 15. (1999).White. ISBN13: 978-0471285526 26 . New York. Type in Use – Effective typography for electronic publishing (version 2. 1993). Wiley.