Submitted By:

Tehreem Asim
5th Semester
Subject: Commercial Art
Submitted to:
Ma’am Guljana
 TYPOGRAPHY

Q. What is Typography (writing style)?

Ans: 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, and letter-spacing, and adjusting the space between pairs of letters.

Use for:
Typography has long been a vital part of promotional material and advertising. Designers often use
typefaces to set a theme and mood in an advertisement (for example, using bold, large text to convey a
particular message to the reader).

ORIGIN of TYPOGRAPHY
The word, typography, is derived from the Greek words typos "form" or "impression" and graphein "to
write", traces its origins to the first punches and dies used to make seals and currency in ancient times,
which ties the concept to printing.

EVOLUTION OF TYPOGRAPHY
Writing is one of the most fundamental forms of communication, and it traces its roots back to
hieroglyphs or pictograms. Used by ancient civilizations of the world to represent ideas, these images
soon evolved into alphabets and phonographic writing, which led to the development of
various typographic systems.

Term ‘TYPOGRAPHY’ was first used by Moho-Nagy in 1923. Jan Tschichold helped create and
popularize the new typography. He had two publications "Typographic News" that were widely read.

CREATION OF THE FIRST FONT

Guttenberg also created the first typeface, blackletter – it was dark, fairly practical, and intense, but
not very legible. 1470: Nicolas Jenson created Roman Type, inspired by the text on ancient roman buildings.
It was far more readable than blackletter, and caught on quickly

COMPONENTS of TYPOGRAPHY
COLOUR CONTRAST
Contrast is not achieved simply by finding two very different colours. Just because two colours are different
doesn’t mean they will provide good contrast if their value is the same.

In the image below, even though the colours are very different, once they are converted to grey scale, you
can see that their values are so close the words become almost impossible to read.

FONT SIZE
Print design and web design differ here – mainly due their respective mediums. In print design, 10pt font for
body copy is generally accepted, but on the web, we deal in pixels. The equivalent of 10pt is 13px Anything
smaller than these sizes will be too small for the average viewer to read.

LEADING
Leading is the space between lines of text – what web designers refer to as line height. The word leading
originated when type was set by hand in printing presses. Lead strips were put between lines of type to add
space. In print design, standard leading is 120% the point size of the font (10-point type/12 point leading,
12-point type/14.4 point leading). In web design, a good line height is also about 120%.
KERNING
Kerning is the process of adjusting the space between individual characters. The goal of kerning is to
achieve more balanced type – equalizing the appearance of whitespace between characters. This is
especially important in headers and large type.

HIERARCHY
Hierarchy isn’t size alone, but has more to do with the prominence of your typographic elements relative to
each other.
This could be achieved by using a different typeface, a contrasting color, white space or size.

Achieving good hierarchy should generally start with a sketch where you layout what your most important
visual element is down to your least important element.

The most important element doesn’t have to be larger, it just needs to take more prominence over the other
elements.

WHITESPACE
“White space is to be regarded as an active element, not a passive background.”
White space, or negative space, is the space between elements in a composition.
If the typography and other design elements are dense and too close together, the content will become
difficult to read. This is where whitespace comes in.

Whitespace can be used to create balance or lead the viewers eye from one part of the composition to the
next. It can invoke a feeling of elegance or add a level of communication to a typographic treatment.

SERIF VS. SANS SERIF

Print designers have always debated which font is easier to read – serif or sans serif.
The truth is, there is no evidence to support that either one is more legible than the other in print.

However, when dealing with web design or any kind of on-screen design, it is generally agreed upon that
sans serif fonts are easier to read on screen. They should be used for the majority of text on screen while
serif fonts should be primarily used for small sections of copy such as titles and headers.

ALIGNMENT
Alignment refers to the “line,” that the text orients towards. It can apply to a whole body of text, individual
words, or even images.

Alignment should be as consistent as possible and every element of your design is meant to align to one of
the other elements in some way, to create equal sizes and distances between objects.

TYPES of TYPOGRAPHY

TYPOGRAPHY BASICS
There are five basic classifications of typefaces:

 Serif
 Sans serif
 Script
 Monospaced and
 Display.
As a general rule, serif and sans serif typefaces are used for either body copy or headlines (including titles,
logos, etc.), while script and display typefaces are only used for headlines.

Monospaced typefaces are generally used for displaying code, though they can also be used for body and
headline copy, and were originally used on typewriters.

CLASSIFICATION OF TYPEFACES
 SERIF
Serif typefaces include a slight projection finishing off the strokes of its letterforms (called serifs).
 1.OLD STYLE SERIF
 Diagonal stress (the thin parts are on the diagonal rather than horizontal or vertical
axis).
 Bracketed serifs (where there’s a curve attaching the stem and head).
 Minimal contrast
 Wedge-shaped serifs
 Angled heads serifs.
Example: Adobe Jensen, Garamond, Goudy Old Style

1. TRANSITIONAL SERIF

 Usually vertical strokes
 Vertical stress
 More pronounced contrast then in old style designs
 Oblique and bracketed serifs.
Example: Baskerville, Perpetua.

2. MODERN SERIF

 Little or no bracketing on the serifs.
 Vertical axis on curved strokes
 Dramatic contrast between thick and thin strokes
 Ball-shaped stroke terminals.
Example: Didot, Bodoni

3. SLAB SERIF
 Heavy serifs with very little or no bracketing
 Virtually no contrast in stroke weight
Example: Museo Slab, Rockwell, American Typewriter.

5.GLYPHIC SERIF
  Emulate lapidary inscriptions rather than pen drawn text.
 Have minimal stroke weight contrast
 Use triangular serif shapes
Example: Albertus, Cartler Book, Newtext

 SANS SERIF
San serif typefaces do not include any projection at the end of the strokes of its letterforms.

1. GROTESQUE SAN SERIFS

 A spurred uppercase G.
 Minimal contrast on the strokes, Older versions include
 Some of the curves were more square
 A double story lowercase g.
Example: Franklin Gothic, News Gothic.

2. NEO-GROTESQUE SAN SERIF

 More legible
 Plainer (otherwise have similar features to the older Grotesques).
Example: Helvetica, Arial, Univers.

3. GEOMETRIC SANS SERIF

 Have round Os.
 Based on simple geometric shapes
 Have no contrast between strokes
Example: Futura, Avenir.

4. HUMANISTIC SANS SERIF

  Based on the proportions of Roman-style capitals
 Created to be more legible
 Have more contrast than other san serifs
 Have a calligraphic influence.
Example: Gill Sans, Verdana, Lucida Grande.

 SCRIPT
Script typefaces are based on the fluid strokes of hand writing, and can range from formal to very casual,
they are suitable for display use.

1.FORMAL SCRIPTS

 Flowing loops and flourishes

 Letterforms that are generally connected.
Example: Bickham Script, Snell Roundhand, Kuenstler Script.

2.CASUAL SCRIPTS
 A brush like appearance with stronger strokes
 Letterforms that are sometimes connected.
Example: Brush script, Bianca, Mahogany Script.

3.CALLIGRAPHIC SCRIPTS

 Emulate hand-lettered calligraphy

 Generally, have high contrast
Example: Mistral, Vivaldi, Ballerino
4.BLACKLETTER SCRIPTS

 Very formal
 Based on handwritten calligraphy
 Strong contrast on strokes
Example: Goudy Text, Monmouth, Engravers Old English

5.HANDWRITING SCRIPTS

 Casual
 Mimic modern handwriting
Example: Blog Script, Pacifico, Cedarville Curslve.

 MONOSPACED
Monospaced typefaces are non-proportional, every letter takes up the same amount of horizontal space on
the page or screen There are serifs and san serif varieties: Courier New, Consolas, Source Code Pro.

 DISPLAY
Display typefaces vary widely in their appearance, and include both practical and novelty fonts suitable for
headlines and titles.
Example: Broadway, Cooper Black, Curlz.