hello students welcome to the nptel online
course ah title visual communication design
for digital media today after discussing principles
and elements of design and also we have discussed
different kind of digital media platforms
in the previous lectures right now we will
start with the typography so ah today we will
discuss the usage of typography in digital
media paradigm so because in digital media
paradigm you can take web design from graphics
design animation game design everywhere typography
will be an integral part of design so with
graphics with all other information visual
informations ah typography the text will be
there will be will be present in the any kind
of a generous of visual communication design
specially in digital media paradigm
so in this ah lecture on typography this will
be divided into two module first we will discuss
about background of typography we will discuss
the evolution of typography in digital media
how it evolved and then the the morphology
of typography how we will identify a particular
typography how the different type of graphics
has a different kind of morphology and then
based on this morphology we will try to classify
different typefaces we will ah see how this
evolved different classifications of typography
evolves through ages and how their morphology
ah changed then based on that ah knowledge
of typography we will come to the design come
to a visual communication design that will
be the second module ah of under typography
there we will understand the pic to the quality
of typography of the legibility and the pictorial
quality how much legible that the typography
is how much earn it or aesthetics it has so
there is a function and form both aspects
of typography we will discuss
based on that next will be a selecting on
typography for a particular design that will
discuss and then we will discuss if we are
designing a new type spaces from some inspiration
board or some mood board how we can design
it i face which we will have some visual identity
and visual clue of a particular style so that
will discuss and then we will discuss the
functional aspects of typography that is the
how we achieve hierarchy in design so as we
discussed in the principle of design there
is the hierarchy or emphasis or there will
be a visual line when observe the user is
looking at a visual a be it web design or
be it a graphic design there will be a there
i will follow up a particular guideline and
there will be an emphasis of focal point into
that so how typography can create that so
we discuss this with shapes colours and other
things but with the different morphology of
typography with the variance in the typefaces
we can also create that so that will be the
discussion and then impact of colour because
colour is a very contrasting very colour fades
away contrasting and rustic impact on typefaces
we will also discuss that in the second module
so coming to the first module ah so we will
discuss the evolution of typography so initially
ah the typography if we go back in history
it was the we started with stone carving so
the first in ancient rom and greek we started
the lateen fonts and even in egypt and other
areas mesopotamia there were clay tiles and
on the clay tiles they used to engrave the
clay styles and then sun right so that that
was the initial phases of typography so it
was it came from that paradigm and on the
if we come back to the first inside then the
the chinese we know they used paper they invented
paper from bamboo and other things and then
they used to use ink on paper as a calligraphy
ink so that was their mode of first typography
and then after that there was a metal casting
copper letters engraved on that and then cut
using stylus on something like wood on wood
or on stone cut with chisel that was the initial
paradigm of writing paradigm of communication
so here also we have devanagari script and
the here in this photograph you can see so
its engraved on stone that is the this was
found in india this was there in ancient india
as well so these photographs are taken from
email address typography so this is a very
good book on typography you can refer to that
then we all know during rain acne europe gutenberg
are made a phase so well that was when the
there was a transition from handwritten typography
to printed media so there was a this phrase
give us a opportunity to print the same same
book in the multiple get a multiple copy of
the same book or its the mass production started
so for that it was not it was very difficult
to write a same book again and again so the
guten using the gutenbergs prays it was much
more easy so the first thing as we all know
it was the bible which was printed in gutenberg
press
so there was a paradigm shift from handwritten
or engraved communication process to print
it communication process so here we can see
some examples of handwritten typefaces where
we can see the first three rows where hand
written typefaces and the next was printed
typefaces which was created ah created in
the in that era and when we look at the first
typefaces it was evolved from the calligraphy
handwritten typefaces so here in this picture
which is placed in the middle it is actually
handwritten gothic style of typefaces that
time the good calligrapher used to write something
write the book the several these to copy the
book by their calligraphic ah ok usage of
calligraphy so this was the style of gothic
calligraphy and this is the gutenbergs bibles
first printed gutenbergs bibles one page i
have shown you so this resembles that typeface
is which was printed resembles the handwritten
calligraphy calligraphic style of that era
so in this scenario also we can discuss what
was the process of the printing the designers
of the typeface is used to a design the typefaces
they should draw the typefaces then artisans
used to curve the typefaces out of wooden
blocks then there will be a small letters
and there will be capital letters there were
two drawers on the ah prayers so one drawers
use for the small letters and the other drawers
were used for the capital letters eventually
the small letters were kept in a lower drawer
and the capital letters were kept in a higher
ah upper driver thats why uppercase the name
uppercase evolve from the that thing because
it was placed in the upper drawer and the
lowercase was placed in the lower drive for
ease of use that is how the name uppercase
and lowercase evolved and after that these
all these typefaces where will be placed on
a wax block and the first print will be done
that and after that there will be a proofreading
so if the print is proper then they will go
with the proof go with the set up or if there
is some errors they will pick up the way the
blocks wooden blocks and place it again on
the wax mold and after it is final they will
put laid on that so laid will be casted and
that will be the mold of one page that was
the process
so yeah that was a process so then we come
back to the evolution so in fifteen century
italy ah italy it was initially it was a gothic
influence so the lettera anti covers the first
ah style which was evolved from a classical
handwritten style then nicholas jensen of
french person he made another print he learned
print and printing technology from germany
gutenberg was a german and so it started with
germany and then he came to italy and italian
style of aesthetic style was little different
than german and from there ah there that typeface
is the style of typefaces changed and it became
more rounder and lighter inform so the from
that first roman typefaces generate
then there was a mini other different fonts
including demonte bimbo palatine jensen which
which was named after the printer the printer
who generated this kind of a kind of forms
with this kind of typefaces and each and every
print print has a printers has their own typefaces
and people is to recognize the book by looking
at the typefaces so each and every printer
has their own different kind of typefaces
and they used to a design their own typefaces
so these typefaces were generally called humanist
why these the the term humanist that we will
discuss under the classification when we will
discuss the classification because it has
some it has easier legibility and more abstract
in nature so if you look at the previous typefaces
there were lot of ornate decorations which
was there in the because it evolve from the
calligraphy style in humanist form because
it evolved from that renessa period that time
it was much more simplified before renessa
as we if we look at the art movement which
was also parallel to the typographic movement
there was baroque and rococo so if you look
at baroque rococo art style and architectural
style it was very ornate and from that the
typography initial typography was also very
ornate and later there was a lot of simplification
happened in art movement and as well as architecture
movement and same reflection also we can see
in typographic movement so humanist typography
movement was derived from was contemporary
and derived from that
so there was a contemporary revival of historical
fonts and it was much more simplified and
each revival was respond to a reaction against
the as we discuss the ornate style of the
old classical style so here on the right hand
side we can see a lot of juxtaposition of
different kind of styles and how the ah how
it changed there they were two more important
things one is the roman typefaces that was
evolved first and then we know the italic
typefaces which was even the same typefaces
can have an italic version which is the slanted
version which looks again more calligraphic
but it evolve later because because of the
functional use of it because if you see a
particular type faces and its italic version
italic version is much more sleek in nature
and it is easy to cast because as we discussed
the first it has to be caused it has to be
chiseled on a wood wood block to make the
first block so chiseling a straight up right
later is was difficult because the artisans
is to hold the chisel and chisel it with with
the hammer so chiseling a italic letter was
much more easier because it was it has a particular
slant and also it was light and it has less
material so it the production cost of a book
was less so italic font was derived from a
economic perspective because of its less material
and ease of use and it was definitely faster
than the creation process of creating italic
font was faster than the roman up right font
so in sixteen century printers began to integrate
roman and italic forms in to type families
so as we right now have the the italic and
as well as the roman version so some part
of highlights will be in italic or some point
of if the body is completely italic then some
part of highlight can be in roman so this
there was a mix and match of italics and roman
were there but keeping in mind that the x
size matches because if x size doesnt match
then it will look like a different type faces
or different size will be different so each
and every if you take one type face and change
it to into italic and then again start writing
it in roman in you can do that in microsoft
word then you can see that the x height is
always constant it doesnt change in italics
and in italics version as well as in roman
version so ah so that is how the integrity
of italics and roman of particular typeface
happens so right now we come back to the come
to the morphology of typefaces so how we recognize
a type face by its different part of one font
so ah now we can we can discuss what is the
difference between font and typefaces typefaces
is like times new roman is one type face but
times romans each and every alphabet will
be one font so font and typeface has a slight
difference and a while we use in design will
there is a slight difference typefaces and
fonts so here we can see in the photograph
that its different morphological parts are
described properly so here if you look at
the f thats capital or uppercase f the top
from the top to the bottom the complete this
distance is a cab height now you can see the
x height is the small letters top part to
the bottom part that is called the x height
if we type x in a particular typefaces the
x will have small x will have done this ah
this height so this is called the x the small
x height this is the base line from where
the typefaces base bases are apart from the
y p and which fonts has a lower descender
so the y p f they are lower parts are called
the descender descender starts under the baseline
and end still the lowermost point
a has a particular feature which is called
bawl and then e c these ah fonts has a particular
ending which is called finial and sometimes
we can see that some letters which comes very
close joints together and create the different
kind of different kind of form and so here
also in print media there were these fonts
get chiseled together this fonts are these
are special cases where they is to make their
for this two fonts together because if this
fonts are separate then there will be a larger
blank space between in between these two so
this is called ligature and similarly f also
has a terminal end point which is not called
finial in like c or e its called a terminal
and s as a spin which joins the upper part
and the lower part of the apes and all these
letters like h d l they have the ascender
the small letters but which goes until the
cap height that is called ascender similarly
b ah b has a cross bar even the r will also
have a cross bar ok
right now we can all the definitions are region
over here so we can go through this and this
will be also circulated you through notes
so you can read what is ah what is the definition
of exide what is the definition of baseline
capsize cap site and everything is region
over here so you can go through this so now
in height there are many other things to discuss
because in height it differentiates the visual
impact of a typefaces if we change the height
at to create more emphasis or like headings
and other things we change generally we change
the height so and then we can see in what
its denoted by p so what is that so we will
discuss that this right now so height attains
to standardize the measurement of a type design
of different fonts so this is a measurement
of a typefaces heights so ah height of a particular
eight points helvetica and eight points times
new roman so they they will be more or less
similar there will be different insets but
it will be more or less similar it will not
match with a twenty four points helvetica
will not match with eight points sentora like
that so there is there is a need of standardization
to understand what should be the height of
a particular print or digital media
so it is the pointing systems so one point
equals to one point in the typography watch
which is generally denoted by p is one seventy
ah seventy its its divided by one inch is
divided by seventy two parts and each one
part is equals to one point in typographic
measurement so it is almost equal to zero
point three five millimeter so twelve point
equals to one pica and then this is a this
is an another unit of typefaces but typefaces
can also be measured in inch millimeter or
pixels but generally the measurements used
for pixels pica and points so here is a relationship
of picas and points so eight p ah what we
see in this ah in in the word pad it is a
actually eight picas i denoted as eight p
and then points which is like twelve points
equals to one pica so two if one pica is divided
into twelve small equal parts so each one
part will be one points so it is denoted by
p eight p will come first and then eight so
in case of pica ah the pica is denoted after
after the digit how much is it so if it is
a eight pica plus four point it will be denoted
at as eight p four because p again stands
for p is after eight so it is pica and p is
before four so it is four so four point
so eight points helvetica with nine sorry
eight ah pica helvetica with nine point of
line spacing will be eight by nine helvetica
now we ah also discuss the width of typefaces
even in some cases the typefaces with without
changing its own visual style it might change
its width so in some typefaces we can see
a single typeface has a wider variation and
a single typeface can also have a narrower
or condensed variation right so these wide
narrow condensed extra black black these these
variations can can differentiate typefaces
ah visual dominance so more the wider the
wider the typefaces are it will have it will
create attract users imo and if it is condensed
and narrow it will it will blend with the
background and it will not have a visual emphasis
and then we come back to the next step stages
is kerning so right now we were discussing
about morphology of single font so how these
fonts with different parts of the font size
are and how how to change this the different
fonts
now we discuss the spacing of two different
fonts how is juxtapose to different fonts
in a word that is very important otherwise
if the spacing is more than the it it will
not be proper it will be loosely connected
and if the spacing is very tight then it will
it will seems like it will overlap so the
term kerning depicts how what is the horizontal
spacing between two pairs of letter in a particular
word so it the main motto of kerning is the
text should look homogenous and it will eventually
create increased readability of the text if
you look at the figure the first top figure
there are equal spacing between different
shapes so first let me tell you if if we look
at the english typefaces each and every typefaces
has can be depicted in a abstract geometric
form like first a v these are triangles a
is up right triangles v is a reverse triangle
o is a circle c and d their half circles h
t these things are likes squares so we can
understand a figure ground relationship with
with the typefaces and their background with
black and white combination of abstract geometric
patterns so if we look at the first series
where the where these different shapes were
juxtapose with equal spacing in between so
the endpoint and of the first form and the
starting point of the next form has a equal
spacing in all these cases in cases of triangle
to a square square to circle and so on so
forth but in this cases if you look at the
free the first series it doesnt look equally
if you look look visually that each and every
shapes juxtaposition doesnt look equally spaced
but in the other on the other side if you
look at the lower image it looks equally spaced
because the because what happens here but
in the in the next series the spacing between
them are not equal they are difference but
still it looks equal because in in the cases
of kerning also this happens because the space
in between the void between the area of the
void has to be equal not the distance so in
case of the first scenario if you look at
this the void between the triangle and the
square is this much and the void between the
the square and the circle is this much so
in the in the case of triangle it is only
having one sided void in case of circle it
has a two sided void so in case of trying
in case of circle the area the void area is
more if if we have a equal distance the void
area is becoming more because there is the
void area is distributed equally distributed
in both the sides so thats why we need to
reduce the area in between them and this space
it can be more clear so the void area increases
because there is a triangle triangle is also
shrink on the top and circle is also shrink
on the both the sides so the same thing because
of the shrinkage is more the void area is
becoming more over here and because of shrinkage
is less the void area here and here unless
thats why we need to decrease the spacing
over here similarly its happening over here
and again the similar cases are we can see
over here so that that is how the kerning
has to happen so first it has there was an
experiment by david kinders lee so he experimented
with the abstract geometric forms and idealized
what should be the spaces between different
fonts
so for kerning also we need to a look at the
spaces in between the particular fonts because
some fonts has a totally enclosed white spaces
like for example o so this is fixed but for
example for example of if we take the cases
of z this is not fixed because this is a serif
font which is serif and sensory will discuss
later but if you look at the font in the first
the z ah z has the extended end so here the
white spaces here in the z is more defined
but here in this case this is called sans
serif font which doesnt has a end its not
so defined so here the white spaces are merging
with the other white spaces so its it has
less define white spaces so if you if you
count the spacing between these two here the
spacing is more you count the great the spacing
is more because this white space is already
defined so this space what we read the background
backgrounds area is becoming lessees less
because its divided into two different part
here and here but here in case of this part
its not divided into two different parts so
if we increase that if we provide the equal
space of this what we have provided in the
first cases so the area will look more because
this is a one unified whole white space so
we have two position o and z closer in this
second cases so they had different methods
of different designers have the experimented
with kerning so three of the most three of
the examples will be a robust smash and walter
tracing method and mag wheels sources method
you can go through the their works in these
are available this will be available online
and look at their kerning process and their
experiments
so now we ah we come to the classification
of typefaces so the broader cast classifications
of typefaces while serif and sanctuaries as
i was just discussing the serif is a small
decorative extension at the end of each font
of typefaces of serif style so that was the
example of serif so this is bhaskar will which
is the serif font we can look at a look at
the the first example which a has a extended
ornate end so this is a serif font and this
is definitely an older version of typefaces
it evolve from calligraphy and evolve from
the chiseled stone because initially when
the engrave the artistes is to engrave with
a chisel creating a sharp bend was difficult
with the chisels so thats why the end use
to create a better finish of the end they
used to have a border they is to have an extension
of the end that is actually translated into
the print media and that become the serif
font of print media and also during chiseling
there is to hold the chisel and chisel has
the flat end and they is to hold a hammer
to chisel that so when they are chiseling
and they use to hold the chisel on the left
hand and use a hold the hammer on the right
hand so when chiseling this side of the a
used to become narrower because they used
to hold the chisel like this so when it comes
like this it become narrower but when it comes
like this it becomes wider so when you they
use to chisel they hold the chisel and hold
the hammer on the right hand side so eventually
this this side of all the fonts will give
a thicker stroke so this this is a transition
from stone engraving and handwritten calligraphic
thing to print media so later there was a
sans serif font which develop later on the
more usage of digital media and print media
so sans serif font doesnt have ornate end
so it is it looks more modern and looks more
minimal in style so sans serif etymological
sans means without so without the serif is
a sans serif so this is an example of future
font which is a sans serif font
so now if you come go deeper into the broader
classification so there is a basic system
of classification of typefaces which evolved
in nineteenth century because there was a
lot of different types of faces are available
in by the by the printers so first was the
humanist or old ah old style which evolved
from director calligraphy for example there
was a sabon which is the designed by type
ah type designer in nineteen sixty six which
evolved from garamond which garamond you must
seen he is a very famous old style typefaces
which has in this typefaces you can see if
you closely look look so the thickness of
each and every letter it doesnt is not constant
if you look at the a very carefully this is
thinner and when it goes towards the towards
the bottom it is becoming a little wider because
it and that shows the direct transition from
hand painted posters and hand painted calligraphy
of a typography so there is a they wanted
to mimic the handmade style of calligraphy
even in the a if you see this end is thicker
and then it goes thin and then it again becomes
thin thick so again in the bawl of the l a
this is thick to generally it is becoming
thin
so the next is a transitional so for example
of baskerville typeface is a transitional
so that there was a atom to modernize atom
to minimize this kind of variations in a particular
font to make it more minimal and has a modern
it has a modern look so here we can see the
a throughout has a similar ah distance here
from top to bottom here also which has a similar
distance and even the serif edges also is
not so drastically different if we come back
here so see serif edge is also not equal to
this main stem so even in the serif edge the
bottom part is a not not flat its curve here
we can see its absolutely flat again the there
is a less variation of thickness in the small
letter as well
so the next one is absolutely modern and this
was this is an example of bodhini typefaces
this is this was more modern than the previous
one here we can see its absolute straight
line so in in the previous one there was a
gradual transition from the top to to the
side but here there is a drastic difference
and this is absolutely modern and here also
if we say look at the top part of the edge
chiseled and here in none of the transitions
are gradual so its just some straight line
so if we also look at the art movement so
what happened is during the art movement and
architecture movement it was borrow rococo
then there was a industrial revolution and
modernization started and gradually there
was more international tour to we move towards
the international movement in national movement
we started designing a very minimalist we
adopted minimally style and very it move towards
organic to more geometric
so similar thing is happening in typefaces
so it was moving from organic style to gradual
gradually it is moving towards the geometric
more geometric fashion so the next was then
after that there was a evolution in the typefaces
so there was a change in typographic style
so people use to exclude the extra ornamentations
and that become the sans serif typefaces so
sans serif is actually more modern than all
serif fonts so all the sans serif movements
all the sans serif classifications came after
serif mostly after serif typefaces so say
the other to towards the modernization process
and towards the the decreased ornamentations
of ah visuals visual ornamentation serif fonts
evolved and another functional need of serif
font was there was a change from pleat media
to digital media so there was different digital
displace were there and depicting a serif
font was very difficult in old versions of
digital media because that time the pixels
were more so there was a larger pixels so
depicting a typefaces like this or rather
this through a larger pixels were absolutely
impossible during that time because here this
curve was very difficult to depict in a pixelated
format
so in that cases these kind of straight lines
angles were easy to depict in a pixelated
digital display so thats that was another
need to design a sans serif fonts in sans
serif movements also there was is a humanist
sans serif so here as we know that there is
a human touch and here give sans is an example
so give sans in give sans if we look at the
give san has a very different thickness if
you look at the small a more visible a is
bowl is thick over here and when it joins
with the steam its thinner then there is a
transitional its going towards the more more
and more geometric form of the sans serif
itself so sans serif transitional are also
called a grotesque and then there was new
grotesque which is the revival of modified
grotesque
so helvetica is one of the famous typefaces
design under this typographic styles design
in and around nineteen fifties so if you look
at helvetica and if we compared with the gill
sans the differences in the smaller case is
more visible the difference of thickness is
minimized and next if we go back to the more
geometric form for example are the futura
which is very the these things are very late
modern and more minimal in style and here
the paul renner futura font is if you look
at its absolutely geometric if you look at
the a resembles a triangle and even the top
age of a is appointed peak in case of helvetica
and give sans it was it was again chisels
but in case of futura its absolutely appointed
peak and if you look at the o of a futura
its a perfect circle so it doesnt the thickness
doesnt change but if you look at a its also
a similar to a circle which is which doesnt
have any slant in other fonts you can see
the some of the o s has a particular slant
it doesnt have
here there is only there is little change
in the thickness because if the thickness
is same over here on the right hand side and
in the joining point then this part will look
black so this part will have a when this is
printed in a small paper so it will be with
the small type height so this part will appear
as a black spot so to avoid that this part
is only decreased as less as possible so there
is another classification which is the egyptian
or we call it a slab serif this was derived
more on a postmodern style this is after modern
but if we look at the postmodern movements
and postmodern art and architecture movement
postmodern historicism also went back to history
so there was a repetition of history and there
was a trained in postmodern to use more ornamentation
more ornamentation and more adding more aesthetic
value more aesthetic or elements into a typefaces
so this came after modern after this sleek
design of typefaces and then we again went
back to serif styles but serif style here
are not the same as the previous one so here
we can see the equal emphasis of the serif
ends the ornamentation had a equal emphasis
on the body of the part of the fonts so it
is these are very thick and almost as equal
to the main elements of the font so this this
cross bar of the a is of main element of a
distinguishable feature of patna the font
a so here we can if we see the ornate serif
and which is also equal to the almost equal
to the thickness of this crossbar so we can
see the importance of ornamentation again
in postmodern era was growing after modern
minimalist style
so for example clarendon was one example of
egyptian slab serif font so here we have all
these fonts different fonts together so that
you can have a better look at each and every
fonts and how they are different and they
have a similar height so here the roman typefaces
are basic fonts and will discuss about the
type families you must have heard about the
types families in particular font ah for example
helvetica universe and the most of the famous
fonts has a type families so they are the
same fonts but they look different as we were
discussing the width of a font and we also
discuss the italians version and the roman
version of the font so roman version typefaces
were the designed first basic type fonts when
it was slanted and translated into italic
fonts that the font doesnt change because
the visual identity of the font was similar
but just its a slanted or italics and then
again you can make it bold you can make it
condensed you can make it extended so all
these things without disrupting the visual
identity of a particular typeface creates
the type family for example universe universe
which is a which is designed by the famous
typeface designer adrian frutiger who also
designed the time type face frutiger thats
also a very famous typeface
so here we have all the typeface family of
a universe so universe family has a normal
roman type this is this it and the second
one is the italic version then we have this
bold white versions bold and italic and then
we have condensed over here very condensed
and then the other condensation dilutes and
then we have a very thick or black versions
of a particular typefaces so they all together
create a type family so here we have discuss
the basics of typography we discuss the evolution
we discuss the classification and how to distinguish
of typeface from other typeface using the
morphology in the next part we will try to
implement that into your design through various
examples in the next module
thank you
