Typography

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

TABLE OF CONTENTS

CONTENTS;

PAGE

ACKNOWLEDGEMENTS

2

REFERENCES

25

1.0

INTRODUCTION

4

1.1

What is Graphic Design?

4

1.2

What is Typography?

5

1.3

History of Typography

6

2.0

FACTORS INFLUENCE EFFECTIVE TYPOGRAPHY

7

2.1

The Election of Type Families & Fonts

7

2.2

Typefaces Selection

9

2.3

Typesetting

11

2.4

Hierarchy

15

2.5

Type of Alignments Selection

17

3.0

SELECTED ONLINE ADVERTISEMENT

20

4.0

FACTORS WHY THE ADVERTISEMENT SELECTED

21

4.1

The Choice of Typeface

21

4.2

Font Size

22

4.3

Line Length

22

4.4

The Alignment

22

4.5

Contrast and Colour

23

5.0

SUMMARY

24 3

1.0

INTRODUCTION

1.1

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

4

1.2

What is Typography? Typography is derived from the Greek word Typos which means the form of and

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

5

•

Legibility – is concerned with how easy it is to distinguish individual letters. It will be more legible if the type of design is simpler. It is better to always choose a legible type, but there are times when distinctiveness may be more important than legibility such as selecting a font for a unique and distinctive company logo.

•

Readability – refers how easy it is to read and scan over paragraphs of type. While legibility is basically dependent on the typeface design, readability is dependent on the manipulation or handling of the type. A highly legible typeface can be made unreadable by poor typographic design.

1.3

History of Typography Typography, started from the use of pictograph. This kind of language are also among

others, such as the Viking nations Norway and Sioux Indians. In Egypt grew Hieratia font, ( hieroglyphs) was known around 1300 BC. This is the root of the typographical form from Demotia, which began to be written using a special pen. Typographical form eventually grew up in Crete, and then spread to Greece and eventually spread all over Europe. The peak development of typography is when the Romans began to establish his authority around the 8th BC in Rome. The glory of the Roman empire in the first century to conquer Greece, bringing a new civilization in Western history by adapting literary, artistic, religious, and the Latin alphabet that was brought from Greece. 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. At present, we experienced growth of typefaces by hand until the creation phase of computerization experience. Phase of computerization makes use of typography is easier and faster in less time with this type of choice of hundreds of letters. 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. 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. Nowadays, we can found a variety of digital fonts used in a computer program.

6

2.0

FACTORS INFLUENCE EFFECTIVE TYPOGRAPHY

Here the five factors that influence the selection of effective typography in Graphic Design to find a better typography. 2.1

THE ELECTION OF TYPE FAMILIES & FONTS Every font style has different type families. Type classification (Oldstyle, Modern,

etc.) is used to divide type designs into broad groups which share similar general characteristics. If you are not aware of this , you wouldn’t be able to recognize fonts and their types. Choose them carefully, and they will either help you communicate with viewers, or distract them. Make your type selections mean something. The terms family and font separate them into much more specific categories. •

Type Family

Family is a broad term used to describe a group of typefaces which share the same name and basic features. For instance, Myriad is the name of a family, and its member typefaces include: Myriad Roman, Myriad Italic, Myriad Bold, and Myriad Bold Italic. 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. For example, Myriad roman is a font in the Myriad family. This definition of font is a contemporary one. 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 your design. The font choice can speak for itself. Font applied to: i.

Choosing the size of type For text type, use sized that, according to legibility studies prove most readable. These generally range from 6 to 72 point:

7

ii. The weight within the family There are many different font weights with a variety of names. Choosing the right font can make huge different in typography. 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.) iii. Minimum Font

There are some cases where many fonts being used simultaneously works well as an artistic statement, but it’s a generally a good rule of thumb that you keep the number of fonts down to a minimum. Basically people will used one or two font but it must not more than three.

2.2

TYPEFACES SELECTION 8

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. Typefaces are a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold belong to the Typeface Helvetica). Select typefaces that suit the theme of the design. Some typefaces are more legible than others on the screen. Typeface is divided into two main categories which are: i.

The Serif Font

Serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols. The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text. Times Roman is considered to be one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Some generally used Times New Roman because it produces a reasonable balance between density of information and overall legibility.

In print, most readers expect a serif font for long blocks of text and find Times New Roman comfortable to read. Three reasons a serif font should always be used for printed copy. First, the readability index for serif fonts compared to sans serif fonts is 41% higher for the average reader. Then, using a serif font with minimal disruption to readability, editors can drop from 10 points to 9 or 8 points. Third, using a serif font, longer lines are used and it didn’t causes the reader to lose their desire to read.

9

ii. The Sans Serif Font Sans serif fonts are more often used in headlines, headings, and shorter pieces of text and subject matter requiring a more casual feel than the formal look of serif font types. 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. Below is an image showing some of the san serif fonts.

There are four reasons why typographers using a sans serif font for body text when used on-screen. Firstly, it looks better because it provides the illusion of additional contrast. Secondly, the line length is typically very short because using a longer line length can drop the readability index dramatically. Next, the line spacing used for screen text is usually wide and it improves readability and comprehension for the reader. Lastly, it could be a size down, but more often it is sized up.

10

2.3

TYPESETTING

Typesetting is the arranging and composition of text. i.

Colour and Contrast Selection

When dealing with contrast and colour decisions, readability is important. Whatever design you decide on should allow for the text to be easily read. In typography, colour is the overall density of the ink on the page, determined mainly by the typeface, but also by the word spacing, leading and depth of the margins. Text layout, tone or colour of set matter, 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. The look of your site will obviously be a factor in your visitors’ first impressions. The colours of your website can have a huge impact on the overall attractiveness of the site. Choosing the right colour combinations can be difficult, but fortunately there are a number of online tools that can help. Be sure that the text on your website has enough contrast from the background that it is easy to read at length. It is important to consider what purpose the website you are designing for is surfing. 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. will enhance and not distract from the ability to read text. The image below using colour to create readability and contrast with alternate fill and stroke colours then applying drop shadows.

11

ii. 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. When line length is too long it makes it difficult for readers to follow and they become frustrated. It leaves the reader hunting for the next line and they can often lose their spot where they were reading. Anyway if the line is too short the eye will have to travel back too often, breaking the reader’s rhythm. It tend to stress people if the lines are too short and some will skipping potentially important words. It is extremely important to consider when designing for web. Designing a great web layout and utilizing a grid will aid in creating an ideal space where the content can be placed. 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. Below is an example taken from the screen for a short and good line spacing.

12

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

13

iv. Tracking (Letter spacing)

Tracking refers to the amount of space between a group of letters to affect density in a line or block. Tracking allows the user to apply a form of universal spacing between all characters. As such, it is a powerful option, and once you have found a setting that you feel is suitable, you would be well advised to leave it alone and adjust the kerning manually for further changes. Below are two examples of tracking.

According to the image below the top line is too loosely tracked, whereas the bottom line is too tight. Be sure to experiment with tracking when you need to fill in space on the screen or to make stroke text more readable. Here are some examples of tracking.

14

2.4

HIERARCHY Every typographic layout needs the essential element of hierarchy. Hierarchy defines

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

Fig.1

Fig.2 15

Fig. 3

Fig. 4

Fig. 5

Fig. 6

16

2.5

TYPE ALIGNMENTS SELECTION

It is one of the most important things to consider when you use type. The golden rule for typography is to make it readable. Be consistent all throughout the design when you use an alignment. If you use centre alignment for your headline, do that for the rest of the pages. It will confuse the readers and might not even continue reading for it is now an eye distraction if you use mixed alignment. Below are the different type of alignments: •

Flush Left

One of the biggest factors for improved readability is text that aligned to the left. This is really effective since we read from left to right.

•

Flush Right

Flush right aligns on the right margin. It is considered to be more difficult to read than flush left. This is a good alignment choice for wrapping around an image, or for displaying poetry. It can slow down one’s reading for we are used to read from left to right

17

•

Centred

Text is aligned to the centre. Centred type results in both the left and right margins being ragged, as it aligns from the centre outwards. It can make your work look elegant if used properly so make good use of this. This style is best used for headlines, titles, poetry and invitations. Do not use for large blocks of text or throughout a document. Wedding invitations use centred alignments to express elegance. It may create confusion to the readers if you do not use it well.

This text is centred. If you are going to centre text, make it obvious. In this paragraph it is difficult to tell if this text was centred purposely or perhaps accidentally. The line lengths are not the same, but they are not really different.

•

Justified

If you choose for a justified text alignment, you don’t have as much control over it because this alignment provides even margins on both sides.

18

This text is justified. Some people call it quad left and right, and some call it blocked - the text lines up on both sides. Whatever you call it, don't do it unless your line length is long enough to avoid awkward gaps between the words because the gaps are really annoying, don't you think? •

Asymmetrical

This alignment is used for a description for any other kind of arrangement. Not an option under the alignment menu on a computer. It is quite popular for print or on the web for areas of type where you want to create an original, eye-catching appearance.

19

3.0

SELECTED ONLINE ADVERTISEMENT

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

20

4.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. People were more likely to make a decision when the message was easier to read. Following that philosophy, creating call-to-actions using highly readable fonts should encourage the most engagement. For many people, if something is difficult to read, the perception is that it is more difficult to do. And in food service that means they would not paying higher prices. So, the selected ad are readable and the food product (Heinz) already get positive feedbacks from the viewers. Below are some factors why the ad was chosen: 4.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. And it only use two type of fonts and that make the ad easier and interesting to be read. One of the type font is using all capital letters and another one is using big and small letters.

( Arial Rounded MT Bold )

( Script MT Bold )

21

4.2

Font Size

The text is aesthetically pleasing but it definitely gets the point across. The ad is using two size of font. This ad deals chiefly with the readability of the body text. The body text means a long, consistent text entity where the point size is usually 9–12. Size contrast is the key when playing with font sizes. Bigger variations not only make the reader to read big sized text but it also make him to read the smaller one too. Its a psychological thing which really works. 4.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. As we know that reading takes place in small leaps so that the eye picks put 5–10 characters at a time. According to studies measuring the movement of the eye, speed reading that would record text in a photographic manner is physiologically impossible. 4.4

The Alignment

Most of the amateur designers use centre alignment for text. Well, I am not saying its a bad practice, actually it has its own use, but using it for paragraphs is not recommended. The alignment for this ad is seems like an asymmetrical 2 grid with the justified, aligned to the centre. The text in this look strong and balanced in centre alignment rather than left or right alignment.

( Centred Alignment Text and Image ) 4.5

Contrast and Colour 22

This ad is easily understood because it is the first and most basic form of contrast. Both words and the background share the red colour. The net effect is to reduce, not enhance, the contrast between the background and the words. All this does is to reduce contrast, not enhance it, and make the page very unreadable.

4.6

The Art Design and Image

Using art design in some ads will attract viewers to continue read it. An attractive art design will make the ad more successful. The selected ad is using many tomatoes (the main ingredient of the product) and some kitchen utensils to make a big tomato. Using the product itself as an image is a keen-witted so the viewers will know the product and tempted to buy it. This ad design looked “spontaneous” and “grungy”,

23

5.0

SUMMARY Typography itself is one element of a unique graphic design world, where the

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

REFERENCES 24

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

25

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

26