UNIT I

LESSON 1 - INTRODUCTION TO TYPOGRAPHY

TYPE FACES, FONTS

COMPUTER AIDED DESIGNS

LAY-OUT AND DESIGN

Structure
1.1. Introduction to Typography
1.2. Objectives
1.3. Definition
1.4 Typefaces and fonts
1.5 Classification of Typeface
1.6 Use of Ventura, CorelDraw and PageMaker
1.7 Types of layout
1.8 Principles of Design 
1.9 Summary
1.10 Suggested readings

1.1. INTRODUCTION TO TYPOGRAPHY

Typography is the art and technique of arranging type to make written language
legible, readable, and appealing when displayed. The arrangement of type involves selecting
typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and
adjusting the space between pairs of letters (kerning). The term typography is also applied to
the style, arrangement, and appearance of the letters, numbers, and symbols created by the
process. Type design is a closely related craft, sometimes considered part of typography;
most typographers do not design typefaces, and some type designers do not consider
themselves typographers. Typography also may be used as a decorative device, unrelated to
communication of information.

1
 It is, quite simply, the art and technique of arranging type. It's central to the skills of a
designer and is about much more than making the words legible. Your choice of typeface and
how you make it work with your layout, grid, colour scheme, design theme and so on will
make the difference between a good, bad and great design.

1.2. OBJECTIVES

 To apply typographic expression and visual experimentation appropriately to

the context in which it is used.
 Do typographic classification and conventions to achieve effective sequential
or structured communication for a variety of contexts.
 Study about different types of typeface and fonts
 Understand the need for an effective page design
 To study different types of layouts.

1.3. DEFINITION

Typography is the process of using type to print onto a page, or the general look of
letters and words on a page. Typography is the way in which written material is arranged and
prepared for printing.

Study of the design of typefaces, helps the way in which the type is laid out on a page
to best achieve the desired visual effect and to best convey the meaning of the reading matter.

Typography, the design, or selection, of letter forms to be organized into words and
sentences to be disposed in blocks of type as printing upon a page. Typography and the
typographer who practices it may also be concerned with other, related matters—the selection
of paper, the choice of ink, the method of printing, the design of the binding if the product at
hand is a book—but the word typography without modifier most usually denotes the
activities and concerns of those most involved in and concerned with the determination of the
appearance of the printed page.

2
1.4 TYPEFACES AND FONTS

Typeface

A typeface, like any form of design, is created by craftsmen over a substantial period
of time, using the talent they've been honing for many years. And the benefits of a
professionally designed font – various weights and styles to form a complete family, carefully
considered kerning pairs, multi-language support with international characters, expressive
alternate glyphs to add character and variety to type-setting – are not always found in a font
available for free.

Choosing a font

There's an astonishing array of paid-for and free fonts to choose from online. But with
great power comes great responsibility. Just because you can choose from a vast library
doesn't mean you have to; there's something to be said for painting with a limited palette, and
tried and tested fonts like Helvetica continue to serve us well.

Here are some of the most important typographic considerations the professional
designers needs to take into account.

Size

All typefaces are not created equally. Some are fat and wide; some are thin and
narrow. So words set in different typefaces can take up a very different amount of space on
the page.

The height of each character is known as its 'x-height' (quite simply because it's based
on the letter 'x'). When pairing typefaces – such as when using a different face to denote an
area of attention – it's generally wise to use those that share a similar x-height. The width of
each character is known as the 'set width', which spans the body of the letter plus a space that
acts as a buffer with other letter.

The most common method used to measure type is the point system, which dates back
to the 18th century. One point is 1/72 inch. 12 points make one pica, a unit used to measure
column widths. Type sizes can also be measured in inches, millimetres, or pixels.

3
Leading

Leading describes the vertical space between each line of type. It's called this because
strips of lead were originally used to separate lines of type in the days of metal typesetting.

For legible body text that's comfortable to read, a general rule is that your leading
value should be greater than the font size; anywhere from 1.25 to 1.5 times.

Tracking and kerning

Kerning describes the act of adjusting the space between characters to create a
harmonious pairing. For example, where an uppercase 'A' meets an uppercase 'V', their
diagonal strokes are usually kerned so that the top left of the 'V' sits above the bottom right of
the 'A'.

Kerning similar to, but not the same as, 'tracking'; this relates to the spacing of all
characters and is applied evenly.

Measure

The term 'measure' describes the width of a text block. If you're seeking to achieve the
optimum reading experience, it's clearly an important consideration.

Hierarchy and scale

If all type was the same size, it would be difficult to know which was the most
important information on the page. In order to guide the reader, then, headings are usually
large, sub-headings are smaller, and body type is smaller still.

Size is not the only way to define hierarchy – it can also be achieved with colour,
spacing and weight.

1.5 CLASSIFICATION OF TYPEFACE

There are thousands of different typefaces and fonts available to designers, printers,
publishers, artists and writers (as well as the general public) today. There are all types of

4
display and text typefaces and everything in between. Most are available in a digital format
from a variety of type foundries and can easily be used, and exploited, with modern computer
technology. The vast amount of type available makes specific classification of every one
nearly impossible and somewhat frivolous. However, it is important to have an understanding
of the basic styles of typefaces to help narrow down the research and selection of the correct
typeface.

Calligraphic

Letters associated with the art of calligraphy and the fonts

developed from their production can be classified
as calligraphic. Calligraphic letters can be, although do not
have to be, classified as Chancery, Etruscan or Uncial.
Chancery letters have slightly sloping narrow letters and were
influential in the development of serif italics. Etruscan faces
do not have lowercase letters and are based on an early form
of Roman calligraphy in which the brush was held at a steep
angle. The Celtic style, Uncial letters are created from
Courtesy:https://i.pinimg.com holding the brush at an almost
horizontal angle. There is only one case in Uncial designs, although they did become the
basis for the development of the roman lower case.

Blackletter

Blackletter typefaces are a script style of

calligraphy that were popularized in Germany,
although they were used all over Europe from the
middle ages through the Renaissance. A highly
ornamental style of typgraphy, different styles are
often associated with the different regions in which they were developed and used. The main
classifications include Textura, Schwabacher, Cursiva and Fraktur. Textura is the most
closely related to the calligraphic style and often includes a large number of ligatures.
Schwabacher typefaces have a simplified, rounded stroke and several of their lowercase
letters, including 'o', are often analogous forms. Cursiva, as the name suggests, is closely
related to cursive letters and can be recognized by the more frequent presence of descenders

5
and looped ascenders. Fraktur is the most common form of Blackletter and is characterized
by broken strokes. 

Serif

Seriftypefaces were popular much earlier than sans-serif typefaces and include semi-
structural details on many of the letters. People often refer to them as feet, although that is in
no way a proper anatomical term when referring to typography. There are many different
classifications for serif typefaces, often named for their origins, including Grecian, Latin,
Scotch, Scotch Modern, French Old Style, Spanish Old Style, Clarendon and Tuscan. Some
of these classifications can also be placed into broader classifications of typography including
the styles below.

Old Style

The Old Style or Humanist serif typefaces developed in the 15th and

16th centuries and are characterized by a low contrast in stroke weight
and angled serifs. Example: Garamond.

Transitional

The bridge for the gap between Old Style and Modern serif typefaces,
Transitional type has a more vertical axis and sharper serifs than
humanist forms. Example: Baskerville.

Modern

Modern serif typefaces developed in the late 18th and early 19th century
and were a radical break from the traditional typography of the time with high contrast of
strokes, straight serifs and a totally vertical axis. Example: Bodoni.

Egyptian

Egyptian, or slab-serif, typefaces have heavy serifs and were used for decorative purposes
and headlines because the heavy serifs impeded legibility at small point sizes.
Example: Rockwell.

Sans-Serif

6
Just exactly like what it sounds, a sans-serif typeface is a typeface without serifs. They can be
found in history as early as the 5th century, although the classical revival of the Italian
Renaissance return to old style serif typefaces made them virtually obsolete until the 20th
century. There was much development of sans-serif typefaces in Germany as a revolt against
the ornate lettering of the popular Blackletter styles which led to sans-serif typefaces based
on the purity of geometric forms. Much like serif typefaces, there are many different
classifications for sans-serif typefaces, including Gothic, Grotesque, Doric, Linear, Swiss and
Geometric. Some of the broader classifications are listed below.

Humanist

Humanist characteristics include proportions that were modeled on old

style typefaces, open strokes and a slightly higher contrast in strokes in
comparison to other sans-serif typefaces. Example: Gill Sans.

Transitional

Closely related to the characteristics of transitional serif typefaces,

these typefaces include a more upright axis and a uniform stroke.
Example: Helvetica.

Geometric

Geometric sans-serif typefaces, as their name implies, are based on geometric forms. In some
cases letters, such as the lower case 'o', are perfect geometric forms. Example: Futura.

Script

Script typefaces are based on the forms made

with a flexible brush or pen and often have varied
strokes reminiscent of handwriting. There are many
different classifications including Brush Script,
English Roundhand and Rationalized Script.
However, the broadest forms of classification are
Formal Script and Casual Script. Formal Scripts are based on the developments and writings
of 17th and 18th century handwriting masters such as George Bickham, George Shelley and
George Snell. Casual scripts developed in the 20th century as a result of photo-typesetting

7
and are more varied and the inconsistencies appear to have been a result of using a wet pen
rather than a pen nib.

Pixel

Pixel fonts developed from the

invention of the computer and were based
on the on-screen display format of pixels.
They are based on an array of pixels, are
often called Bitmap fonts and are often
designed only for a specific point size.
Many type foundries offer a selection of
bitmap fonts and some, like Fonts For
Flash create only bitmap fonts.

Decorative

While serif and sans-serif typefaces can

often be used for text typesetting, there are a
vast majority of fonts and typefaces whose
legibility wanes when used in smaller point
sizes. These typefaces are often developed
with a specific use in mind and are designed
for larger point size use in headlines, posters
and billboards. Decorative is less of a classification
and can include a wide variety of typefaces underneath the umbrella of the term.

1.6 USE OF VENTURA, CORELDRAW AND PAGEMAKER

Computer Typography and Composition

8
 Individuals who major in computer typography and composition acquire computer
and design skills. They can go into graphic design, desktop publishing or print publication.
Read on to learn about typography and composition as well as relevant careers.

Inside Computer Typography and Composition

Computer typography and composition influence how designs, letters and words are
set up on a page as well as how the space is used for any design. Professionals with technical
skills in computer typography and composition format page content and use different styles
of layouts. They utilize computer-assisted design tools to help them produce a beautiful,
finished product. Programs in this field train students to use typography and composition for
print production, advertisements, Web design and other forms visual media.
The five most popular desktop publishing packages — Adobe PageMaker, Adobe InDesign,
QuarkXPress, Adobe FrameMaker, and Corel VENTURA.
The evaluation below categorizes the publishing layout programs by key features needed for
different types of publications:
 Basic desktop publishing: tools to control type, graphics, and the layout and design
of pages; ability to create master pages and stylesheets that are used to automate and
structure documents; and utilities to check files for technical compliance with the
printing industry's standards (also known as "preflighting") before sending them to a
service bureau.
 Special design effects: graphic tools that allow you to create drop shadows and text
on curves; image-editing tools; and other design tools.
 Support for books, multi-chapter publications, and long technical documents: the
ability to create footnotes and endnotes, to generate tables of contents and indexes, to
cross reference, to manage multiple chapter files, and to handle centralized
stylesheets.
 Tabular material: the ability to import from various data sources, control the layout
of tabular material, and create equations.
 Support for electronic distribution: exporting to various file formats, including
Adobe PDF and XML.

Adobe PageMaker version 7

9
 Adobe PageMaker has a full set of basic tools for creating general publications, flyers,
brochures, and other items. It has tools for generating simple tables of contents and indexes.
Those tools are adequate for reports and office documents but miss the needs of book
publishers. Version 7 added tools for corporate publishing, including pre-designed templates
and "data merge" functions for direct mail and catalogs. The software's built-in "Story Editor"
shows only the text in a word-processing format and has basic editing tools. Adobe
PageMaker can import a wide range of file formats, including data and images from
databases and spreadsheets. The software can export in Adobe PDF, HTML and various text-
file formats. It can convert existing files from QuarkXPress and Microsoft Publisher.

Adobe InDesign version 2

InDesign has a full set of basic tools for creating magazines, newsletters, newspapers,
flyers, brochures, advertisements, large format posters, and other items. It also has good tools
for book publishers, including multi-chapter and stylesheet management, tables of contents,
indexes, and endnotes (but not footnotes). Version 2 added a moderate set of table features
that allows importing from Microsoft Word tables, Excel spreadsheets, and tab-delimited text
files such as those commonly created from databases. Tabbed data in InDesign can be laid
out in a cell-based table quickly. InDesign's table features are slightly more robust than
QuarkXPress 5's, but lack several key features that FrameMaker and Ventura have. InDesign
can import a wide range of file formats, including spreadsheets and XML. It can export in
PDF, HTML, XML, SVG, EPS, and text file formats such as TXT, RTF and tagged text files
for automated publishing. It can convert existing files from QuarkXPress and PageMaker.

QuarkXPress version 5

It is the most widely used program by professionals in the design and publishing
industries, with the bulk of its user base on the Macintosh platform. Version 5, which was
released in spring of 2002, added features for tables, layers, basic Web design, and XML
export to accommodate the needs of cross-media designers. It is targeted to design,
publishing, and advertising professionals who demand stable, powerful tools to produce the
highest quality design. Considered the leading design software, Quark produces files that are
readily accepted by service bureaus. It is available for Macintosh and Windows.
"It's the industry standard for professional designers and publishers"

10
 QuarkXPress has a full set of basic tools for creating magazines, newsletters,
newspapers, flyers, brochures, advertisements, large-format posters, and other items. The
program has a few tools for book publishers, including the ability to create tables of contents,
and multi-chapter and stylesheet management. (Features for indexes, endnotes, and footnotes
are available with additional third-party extensions.)

Adobe FrameMaker version 7

Framemaker has an extensive set of tools for creating scientific, academic, or

technical books and other multi-chapter documents. It handles footnotes and complex tables
that run over several pages superbly, and can generate tables of contents, indices, interactive
cross-references, and dynamic running headers and footers. Its book-management feature is
quite good, and its built-in equation editor lets scientific publishers control the appearance of
every component of equations and formulae. FrameMaker can import spreadsheets and word-
processing files with tables, maintaining the table structure in both cases. Version 7 adds
extensive support for round-trip XML, where XML files can be imported into FrameMaker,
formatted and published, and exported back out in XML. 

Corel VENTURA version 8

Ventura is geared to book, catalog, technical, and academic publishing rather than
general publishing. Ventura files are accepted by some service bureaus, but because it's a
highly technical program, not all service bureaus have the ability to output its files.
"This program is not for traditional graphics designers"
Ventura has extensive tools for creating books, catalogs, journals, scientific,
academic, technical, and other multi-chapter documents. It handles footnotes and complex
tables that run over several pages superbly, and can generate tables of contents, indices,
interactive cross-references, and dynamic running headers and footers. Its book-management
features are excellent. The Navigator palette shows not only every chapter in a book, but
expands to show every text and graphic file that is in each chapter. This feature makes it
much easier to find and manage all the components of large publications. 

11
CorelDraw

With CorelDraw, users can add special effects to images, alter their contrast and
colour and manage multipage documents. The software can help users develop anything from
business cards to invitations.
The first CorelDraw version was designed for the Windows 2.1 platform. The Corel
Corporation has since released 18 CorelDraw versions, with X8 the latest version released.
Most CorelDraw versions were designed for the Windows platform. There was a time when a
CorelDraw for the Mac platform was designed, but the project was eventually scrapped
because of poor sales. CorelDraw X8 is compatible with Windows versions 7, 8, and 10.
As a vector graphics editor, CorelDraw is used primarily for marketing and
advertising businesses, particularly those that specialize in print advertising development.
Outside of logos, CorelDraw is a program used in the professional space to create brochures,
newsletters and various other printable documents using its page layout features. Furthermore
users use the program to create complex drawings.

1.7 TYPES OF LAYOUT

When talking about a page layout, designers often employee distinguished layouts
according to their preferences. Types of layout can be classified as magazine layout,
advertising layout, static, dynamic, adaptive or responsive. In case you’re a graphic or web
artist, developer or a project stakeholder or a client, then you ought to have sound
understanding of these terms i.e.  what they mean and when each type of layout should be
used. 
Types of Page Layout 
Broadly page layout can be classified as:

Graphic Layout
1. Mondrian Layout
2. Circus Layout
3. Multipanel layout
4. Silhouette Layout
5. Big-Type Layout

12
 6. Alphabet-Inspired Layout
Now let us discuss these different types of graphic layouts in detail.    

Commonly used Page Layouts in Graphic Design

a.Mondrian Layout
Mondrian layout refers to the forms: square, landscape or portrait, where every field is
parallel to the presentation field and loads the image in order to form a composition that is
conceptual. 
b. Circus Layout
Circus Layout doesn’t imply standard layout. It refers to the irregular composition of
elements.
c. Multipanel Layout
Multipanel layout is divided into various sections or theme in same shape such as
rectangle, square, cube, etc.  
d. Silhouette Layout
Silhouette layout refers to the layouts in the form of illustration or photographic
technique, highlighted only through shadow. Presentations can be shaped text-rap or spot
colour illustration or refracted smooth image pickup along- with photographic techniques. 
e. Big-Type Layout
Big-Type layout lay emphasize on the font styles and big font sizes so as to grab the
attention of the audience. Big-type layouts are usually used for creating headline. 
f. Alphabet-Inspired Layout
Alphabet- Inspired Layout focuses on the arrangement of letters or numbers in an
appropriate sequence or forms a word or enhanced to give an impression of story or an idea
for the advertisement.

1.8 PRINCIPLES OF DESIGN 

The 6 major page layout principles are alignment, balance, contrast, proximity, repetition and
white space. 

Alignment

13
 Aligning text, objects, and images on a page instantly classes it up. Choose an
alignment and a rag and stick to it. If some of the text is left-aligned and some is center-
aligned, the page's layout looks messy. Align images with text wherever possible as well. Not
just on left or right, but on top or bottom as well. The more you can align text, objects, and
images harmoniously with one another, the more readable your piece will be.

Balance

When we speak of balance, think of heaviness and lightness. Technically balance

comes in three general flavors: symmetrical, asymmetrical, and radial. The heaviness and
lightness come in, in my eyes, because we're balancing page elements as if they were on a
scale. Symmetrical, or evenly balanced, page layouts are aesthetically relaxing. The human
mind loves symmetry. As a designer, you might add interest to a balanced design that, say,
divides the page into equal blocks, by using bright splashy colours

Asymmetrical balance, with one area of the page "heavier," or containing more
information than the other, is lively and visually stimulating. It keeps the reader on their toes
and interested.

Radial balance is as it sounds: with elements placed on the page as if radiating from a
central core.

Contrast

Contrasting elements add vibrancy to designs as well as help to organize information.

The more different elements are, the more they contrast. Colours that oppose one another add
contrast, as does using reverse type. Using very big elements or very small elements adds
contrast.

Proximity

Information that is related, like a name and a phone number on a business card,
should be placed in proximity. Unrelated information, like a slogan on a business card,
should be separated. You can reduce proximity, or separate items, using rules, white space, or
borders. The rule of proximity helps to organize information and make it easily absorbed by
the viewer.

Repetition

14
 In graphic design, consistency is not a hobgoblin. Consistency creates trust with the
viewer. If one headline is in ITC Garamond, make sure all headlines are ITC Garamond. Pick
a colour palette and fonts and stick to them. Rules, boxes, and other page elements should be
placed and used uniformly from page to page. This goes for photos too. If you're doing sepia
tone images on one page, sepia should be repeated elsewhere as well.

White Space

White space is breathing room. It's also excitement, interest, and often it's the design
principles of balance or contrast in action. Be bold in your use of white space. Try some
designs with one-third of your page filled with simply…nothing. That's the use of white
space in large ways. In small ways, use white space to delineate between paragraphs or
sections; to add breathing room between photos, rules, or other page elements; even to add
the design principle of balance to a page layout.

1.9 SUMMARY

The high-level page layout involves deciding on the overall arrangement of text and
images, and possibly on the size or shape of the medium. It requires intelligence, sentience,
and creativity, and is informed by culture, psychology, and what the document authors and
editors wish to communicate and emphasize. Low-level pagination and typesetting are more
mechanical processes. Given certain parameters - boundaries of text areas, the typeface, font
size, and justification preference can be done in a straightforward way. Until desktop
publishing became dominant, these processes were still done by people, but in modern
publishing they are almost always automated.

Questions for discussion

1. Define and write the importance of typography.

2. Explain the classification of a typeface.
3. Write the significance of types of layout.
4. Write in detail the principles of design.
5. Discuss the types of software used for designing.

1.10 SUGGESTED READINGS

15
http://www.creativebloq.com/typography/what-is-typography
http://www.designishistory.com
https://i.pinimg.com
http://study.com/directory/category/Communications_and_Journalism/Graphic_Communications
https://quod.lib.umich.edu
https://www.techwalla.com
http://www.graphic-design-institute.com
http://www.brighthub.com

16