welcome students to the online in nptel course
visual communication design for digital media
so in the previous module we were we started
discussion discussing about typography and
so we are discussing usage of typography in
digital media in the previous module we covered
the introduction part of typography we have
gone through the evolution of typography and
then morphology how we understand how we identify
a particular typefaces and distinguish a particulate
typefaces from the other typefaces so after
that we went into the classification of typefaces
based on the morphology how we classify different
typefaces
so now we will come to the design aspect of
our typography so how typography can be used
in design so to do that first we will discuss
the ah the aesthetics and functional attributes
of typographic that is the pictorial quality
of a typography of a particular typefaces
and eligibility that is the functions so typefaces
function is to communicate and ah so its mode
of its a very strong mode of visual communications
so when there is a typeface if we can read
it so it communicates a message so that the
juxtaposition of typefaces with ah pictures
and the ah other design elements gives us
a meaning so that is the functional aspect
of typo typefaces so that is a the the the
moon through which it can communicate with
the legibility of typefaces we have to read
the typefaces
the other quality is the pictorial so each
and every typefaces as we discuss the mor
based on the morphology has a particular visual
style so each the style of helvetica and style
of bodhini which is a serif font and helvetica
which is sans serif font is very different
even there are a larger variations which we
will discuss in the design part so that is
there and the next part is the selection of
a typeface so there is a large variety of
typefaces available in ah available today
by the designer so we can pick from a large
range of typefaces so which one to to pick
for a particular design that we will discuss
and then in some ah some cases for logo design
for brand identity design we cannot pick up
an existing typefaces we have to design our
own typefaces in some cases
so how do we design our own typefaces from
a particular mood board so that we will touch
upon and then we will come to the again to
the functional part of the typefaces that
is achieving hierarchy as we were discussing
in the previous module that hierarchy is a
very important ah important perspective of
a important aspect of a visual design so in
visual design there has to be emphasis there
has to be a to balance the emphasized area
there has to be some redundant spaces some
ah some typography should just be legible
and without any ornate features and some typography
has to be very bold to catch our eyes so these
will come under hierarchy and then there is
a impact of colour as we were discussing earlier
which adds to the legibility and creates creates
the drastical visual impact
so selection of typefaces for design that
depends on a pictorial quality and legibility
of a typeface so these are two different things
if we increase a pictorial quality so if we
add ornamentations to a particular typeface
and add on to the ornamentation the pictorial
quality will increase so it will go towards
this side of the diagram and if we reduce
the pictorial quality or if you if we use
the ornamentations and if we change the typography
towards the basic abstract and minimal quality
that then the legibility of the typeface will
increase but pictorial quality will decrease
so based on that we can have in broader three
categories so one is very graphical typography
another can can be the display typography
so the for ah the display of a logo sorry
display of a shop front or some heating is
a display typography so which catches our
eye which catches users eye and creates a
mental models so which remains in our model
so we remember the typography
so there has to be some pictorial quality
by which we will identify the typography if
the typography is very minimal we might not
remember the typography it will not create
a image into our mind so that is the display
typography which will come somewhere in between
so there is some pictorial quality and some
kind of has to be there has it has to be legible
otherwise we cannot read the what is the message
and then there is a typography for the text
so typography for the text is like for in
a book the body of the text is ah is the typography
of the text when the in a newspaper the typography
used is typography for that text so we dont
pay a larger attention for the typo what kind
of typography they are using so we just hardly
notice that whether its sans serif or serif
but we dont go into detail because in ah in
this context so the in content matters more
and the message what they are giving the text
is giving that matters more than the acidic
quality of a typeface selected in case of
newspaper or in case of book or pamphlet which
is more informative than its acetic need so
these three classifications are not based
on the classification which we discussed the
classification what we discussed is base based
on morphology in the previous module and that
was the serif sans serif and all these humanist
grotesque and geo geometric fonts were based
on its morphology but its this classification
is based on its pictorial quality and legibility
so in the first category we have the graphical
typography for example in a graffiti wall
so the message is definitely important but
the message the typography doesnt standalone
it goes with the graphics so the colour usage
of the typography the line quality the shapes
textures the colour scheme and line and everything
all the elements of design should blend with
the visuals of of of a graffiti wall in case
of graffiti because thats more important and
when we look at a at a graffiti if it attracts
our eye then we will stand and read start
reading that so we will give more time to
interpret that its not just we will just read
and go away that is not the intern intention
of a graffiti works so its a visual its a
composition and more has the more aesthetic
importance than giving a message because giving
a message its not in graffiti wall its not
just a typography because its all the pictures
and everything together holistically gives
the message so here in this case it has a
higher pictorial quality and less legibility
even in some cases the legibility might not
matter for example if we look at these two
examples one is example of kalamkari a traditional
print media technique of andhra pradesh so
here we see ah vegetable dye a printed on
kalamkari style and there are telugu scripts
in scribe in this so for many of us it might
not be possible to read at telugu script
if we dont know the language for example in
the same way in tajmahal this is the gate
of tajmahal front gate so in tajmahals front
gate there is a urdu script written inscribed
on top of the tajmahal script but this goes
as a graphical and its because of its aesthetic
value it enhances the work architecture or
the traditional ah craft craft style by its
visual quality so if we mentally replace the
tajmahals urdu script with telugu typefaces
and the in the in the kalamkari here with
urdu typeface typefaces it will not go with
the picture because we have certain visual
each and every typefaces has its own visual
identity for example urdu urdu typefaces with
its kashidas and all these dots and linear
visual quality it goes with the saracenic
style of architecture saracenic style of design
so if you look at the gates in lay work and
this kind of typefaces urdu typefaces this
goes hand in hand and they create a visual
integrity in the typefaces
similarly that the curvilinear telugu script
also has a curvy which brings with the curvilinear
features of kalamkari style so here we read
these typefaces as pattern not as a text so
that pattern as we all know is again elements
of design so its creating as a pattern so
if there is a blank patch it might not the
composition might looked blank here so this
pattern that typeface is which acts as a pattern
for the people who doesnt who cannot read
the time what is written acts as a pattern
and balance the comp complete composition
the next will be the display typography which
is much easier to read than the previous one
but has certain kind of aesthetic ornamentation
so this these are not flat typography is like
the body of a text of or of a newspaper so
it has certain kind of ornamentation to it
because the need of a display typography is
to create a brand so if the coco we understand
the coco colas logo and and recognize the
coca colas logo by its defiantly by its colour
but also by its font but if we create some
font series which resembles coca cola we can
easily identify this is some font which goes
with the coco cola brand because this has
created a widely accepted brand and we understand
the curvilinear feature of the coca cola brand
which glows goes with the fluidity and has
the liquidity into the typefaces
similarly if we look at the link in logo which
is the rock band has the solid and angular
and masculine corner and which is this is
actually a blended under distorted format
of thick bold font and some parts are modified
visually and a modified with changes and made
more angular to go with the which goes with
the ah music bands song even the pink floyd
if you look at this the fluidity of pink floyd
which ah which is there joiner of the song
also a reflected in the typography so there
is a ornate ornamentation there in the typography
but still it easy to read and we can i recognize
the pink floyds ah pink floyd band by its
logo as well
similarly we all know that bow house was the
movement in modern era so bow house movement
is more is also a derivative of us is the
de stijl movement movement so the de stijl
movement movement and bauhaus movement has
the minimalist approach and usage of primary
colours for example red yellow and blue and
the black and white combination was more so
here in the bauhaus color a bauhaus poster
we can see that and from that bauhaus style
there was a bauhaus font derived from that
so if we look at the font used over here thats
a bauhaus font and it also uses the pure geometric
ah shapes for example if you look at the architectures
a its a it starts with the pure circle and
then similar in the c h and t e we can see
the circular pure circular format and the
pure rectangular i think because if you look
at this closely the thickness of each and
every typeface is same so that it also a goes
with the minimalist bauhaus approach
next the for more example we can have habulance
the famous logo designers usage of this display
typography with little ornamentation and definitely
more here than the previous graffiti works
so here we can see and intelligent way of
depicting mother and child so child is written
in a small type of type fonts so we need to
have some give some effort to read that but
still the complete composition explains the
relationship between mother and child to give
a shape of a womb and child in a womb and
even in the marriage the letter marriage the
r is blend it together and creates form and
in family also we are ah its the similar ah
it shows the concept of family and we can
create with justice principal there is different
kind of peoples image comes out of this typefaces
so there is a r kind of different ornamentation
added to it so this l become looks like an
i but still it doesnt create any problem to
read the word because of its meaning together
the pictorial quality of typefaces and the
ah higher legibility it doesnt create a problem
then we have the simplest form of typography
without with least ornamentation least tricking
so thats the typography for the text which
is the which is used for the regular text
which has least cognitive load on users mind
cognitive load for on the users minds has
to be minimized so that we can read it fluently
and quickly if there are more ornamentation
people will start recognizing ah recognizing
that and it will create it will take more
time and it will increase the cognitive load
in your mind to read that so that should not
happen in case of cases of typography which
is used in book and newspaper and as i discuss
its more most suitable for body of test and
even in the poster if there are the poster
is heavy on typography there are lot of informations
on text we should not use typography with
a lot of ornamentation we should use basic
minimal less ornate typography so that people
can devote their time on reading and read
quickly and get the information most effect
effectively
next we come ah come to the design of a typography
so here till now we were discussing how to
select a typography for some cases for designer
we have to design our own typography for particular
situation for example if you are disc designing
for a shop fronts ah shops frontage and we
are discussing ah and we are creating a brand
identity for a particular brand or particular
shop so we need to design their own typography
so for example we can take a case of chinese
typefaces so here there was a example of a
chinese restaurant so that should give a ah
image of that there is a chinese quizens are
served over here so it should have a chinese
theme in the interior it should have a time
chinese looking out outside and the typography
should blend with that so holistically you
should give a give a theme of chinese quizzing
so fo for that designers can used in many
chinese restaurant we can see there is a definitely
the it has to be written in english otherwise
it will not be communicative to the larger
english speaking audience but it should also
have a chinese look so what we see here is
a chinese typefaces the visual quality line
qualities are translated into then english
typeface and the a new kind of english typefaces
is derived which clearly gives the chinese
identity so how is it happening so we can
have a closer look so this is a chinese original
chinese typefaces chinese as we already discussed
in the previous module they used to draw with
they used to write with a calligraphy pen
on paper because they have invented paper
as we all know quite before probably the first
in the world so on a white paper they is to
use the black ink which they used to ink with
the pink pen which they used to make from
a bamboo
so here in the calligraphy pen has a thickness
variation here in each and every chinese font
is like that so its has a triangular shape
and it has the linearity and it crosses so
if we see each and every fonts doesnt match
with each other either it doesnt join or it
either it crosses from each other so there
is a there is no join like this there is either
like overlapping joints or it doesnt touch
so here the similar thing is achieved over
here so here in the w if you are look see
it passes through each other and also here
thats the same thing follows so nothing is
properly matched so so that it gives a look
of carrier somebody have gone it through the
calligraphic pen and also here we can see
the triangular shapes so here this part is
thicker and it gradually becomes thin to mimic
the brush stroke which chinese used to use
so if we generalize the process ah so the
first process is the adopting a mood board
so what we will put in our mood board that
matters so that from that our visual identity
will be generated so here in this case the
chinese typefaces the visual quality of a
chinese typefaces was the mood board to create
a chinese font and give or which will go with
the chinese restaurant and the interior design
and exterior lighting and everything of the
restaurant so next process is the visual analysis
we need to understand what is there in the
chinese typefaces that is there in the that
that is a mood board in this case so the visual
analysis will be identifying the element of
design like we discussed they the designer
here must have identified the characteristics
of the font which is triangular characteristics
and the overlapping features so that is the
visual analysis and the line quality the shapes
used for particular designing a particular
font
then the visual adaptation now we have to
change the chinese font into english font
because we are not finally designing a chines
font it has to be in english so we will take
an english font each and every english font
has to be again derived into its morphology
based on its morphology each and every part
has to be segregated or deconstructed and
each and every part then can be translated
into the chinese chinese style of visual identity
for example ah here if you take the case of
w w has four different strokes the four different
strokes were translated into the style of
chinese strokes and then we create a w which
looks like a chinese script thats an english
a english w which looks like chinese script
so similarly ah in case of other typefaces
we can translate that into the different typefaces
which will go with the thing so these are
important in bilingual sign signages and bilingual
posters as well so if we are designing some
signages which should communicate with people
speaking or reading different language here
for example chinese and english or devanagari
and english so we should both the signages
should have some visual identity otherwise
complete come composition will not be holistic
and even if for a poster which for the poster
which should communicate in two different
languages the written text part of the poster
should communicate in two different languages
the selection of font has to be so that it
blends with each other in some cases we might
not have this kind of fonts which goes with
each other so so that we have to create our
own fonts based on the other keeping the other
fonts characteristic visual characteristics
in mind
so here in arabic typefaces arabic typeface
has its own characteristics of kashidhas ah
an arabic seems to write from the other side
from right to left so they used to join each
and every words with a elongated kashida these
these parts of the letters are called kashidas
and they have lot of dots on top of the main
body of the text so these are translated into
then english font so english font a the joins
join of the joining of two stem of the a is
dot which which is similar to the arabic dot
which has its squeriesh form of the dot because
again of the they are usage of the calligraphic
pen when they use the calligraphic pen with
ah on a paper so the dot might appear like
ah because of the thickness of the pen it
might appear squeriesh so similar things are
translated into these two typefaces designed
from arabic style of arabic original arabic
typefaces similarly in the from devanagri
the this font which we are seeing here is
samarkan samarkan is designed from from a
devanagari visual identity this is the digital
typeface which is available online and there
is a project called hinglish project which
is done to communicate in a with uses a speaking
two different of two different target uses
speaking to different language for english
people who can only read english and people
who can only read devanagari this they they
are target audience mainly was the people
who are the tourist so they only can read
english and try to learn devanagari so they
can relate the english counterpart of the
devanagari scripts for example we can see
here a is a in devanagari so a and a is superimposed
on each other so this is the ah hinglish project
it is designed from a similar aspect
so again from typography we can diversify
we can shift the paradigm and create product
create posters and have a meaningful communication
through the usage of typography for example
we have this ah lights coming out from a candle
stand where we have a saracenic urdu or arabic
script with lot of kashidas and that kind
of visual style is there and the arabic fonts
are translated into a different forms of visual
identity here again the picture pictorial
quality has more emphasis on the readability
definitely readability is not compromised
here again the devanagari own is translated
into ganapatis painting
now we will come to the functional part of
the typography previously we were discussing
the visual attributes of typography the functional
part of the typography is meaning convey meaning
typography will convey those messages and
in this messages for a visual design its important
to understand important to create a hierarchy
of this messages for example in a newspaper
the newspaper headings will have the highest
hierarchy of message then the body of the
text and even in the newspapers heading there
will be more important newses and then the
less important newses so each and every heading
can also will also be of different hierarchy
even similarly in a poster so posters might
be more posters for example for a movie poster
the movies name can be the most of of are
more hierarchical stage and then the other
informations venues and other things can be
of a less hierarchy of a importance and other
detailing of the detailed informations can
be a of less hierarchy of importance so the
people for the user who are who are in hurry
who can devote less amount of time looking
at the visual will only read only concentrate
on the highest hierarchy of information and
for the people who are who has who can devote
more time and gradually will attracted towards
the ah visual can gradually go in to the highest
hierarchy towards the least hierarchy of the
message it will not be the other way around
so first it should not be the least hierarchy
of message then the highest hierarchy of the
message
if that happens in that serve visual design
fault so in that achieving hierarchy a typographic
hierarchy expresses a organizational system
or content emphasizing some data and diminishing
the other so each level of hierarchy should
be signaled by one or more cues ah so the
cues can be like line spacing it can be the
special arrangement it can be the size of
the of the font it can be the style of the
font it can be the colour more contrasting
colour has can have a higher highest hierarchy
least less contrasting colour can have a lesser
amount diminished amount of hierarchy
so there can be a permutation even there can
be a permutation combination of all these
visual cues so here there are some examples
of the creating different kind of hierarchy
there can be many more so one is creating
italics if the all these typefaces are in
roman and some part is italics so italics
definitely because because of its anomaly
it has it will go towards the higher higher
level of hierarchy even for bold typefaces
bold typefaces because of its a visual impact
it again goes into the higher hierarchy even
in the body of the text some part of the most
important parts can be either bold or can
be italics and which then the peep it will
come to the users eye faster than the other
words even we can change the colour which
again be based on the principle of anomaly
it will again attracts users mind and then
we can have small caps and the variation in
font and serif and by changing the serifs
into sans serifs or vice versa we can also
create hierarchy so there are all actually
a process of creating anomaly and creating
an emphasis
so while discussing serifs and sans serifs
we should more disk we should go into deep
of serif and sans serifs usage so legibility
comprisence of serif and sans serif is important
because it has a very different criteria so
if you can do this experiment in your with
the word pad so if in print media we are using
print media serif we can use serif fonts smaller
serif fonts than sans serif fonts which without
destroying the legibility because serif fonts
has its distinguishable serif ends if we reduce
the font size still it will be readable because
of its ends are very prominent so we can read
it in print media but for sans serif fonts
it might be it might be difficult for reading
in a in a very small typefaces because the
ends of sensory fonts are not very prominent
but in case of digital media its completely
the rivers because digital display media so
in digital display there are light rays coming
from behind and the background generally if
the background is white white we all know
that white in has more elimination more higher
value so there are more light rays coming
from the white region and black doesnt emit
much light rays
so here the end point of the serifs might
be difficult to read if we difficult to read
in cases of display typography even as we
discussed in the previous module serif ends
were difficult to trans translate into a typographic
with in a display medium with larger pixels
so the end of the serifs and the modulations
of the thickness of a serif font might be
pixelated in a larger pics in a display system
with large pixels i mean low resolution pixels
with where the each and every pixel units
are larger in area so here also in this for
this exam cases there were some pixelated
fonts designed for display typography for
example emperor which is easy to display with
low resolution ah system for example doesnt
come is not a proper curve its some pixels
juxtapose and it gives us a image of m so
here also we can read that side this is new
alphabets written with minimum pixels involved
so now we come to the exa examples of hierarchy
so here there are two famous posters designed
first is the us armies poster designed in
the during the world war this by james gumery
ah so here we can see the us s national colour
coding is a blue and red which is created
there which is repeated there and there are
there is a hierarchy in typographic letters
so first if you read the first line i want
you you has more importance than the first
two letters so and if you look at the picture
look at the painting as well so the person
is looking pointing at you so you creating
a highest emphasis on the first ah in the
first line and then here with its written
for the which has which has some kind of redundant
meaning so you and us army in list us army
is has more important
so us army has a is a bigger and ah thicker
font and enlist now that what you have to
do thats written in a thicker font and again
on the right hand side we have the famous
are deco posters which is also informative
and which talks about the cruise so it invites
people to book the cruise and ah it tells
the cruisers name which has the highest importance
and the colour contrast and because of the
dark background and the light font it comes
out and its also the height is more and then
the next contrasting level is the verities
and the other next level of information is
this and these are the next hierarchy or the
least hierarchy of the information which is
presented
next we have some of the posters designed
by satyajit ray he himself designed the posters
so in the first ah poster we can look the
first hierarchy in the previous cases the
first hierarchy was on the top that is the
general convention but it might not happen
because poster is a holistic composer visual
composition if we look at a poster a photograph
attracts our eye first not that typefaces
because in the similar if the photograph and
the typefaces are taking similar area on a
poster the photographs are easy to recognize
and so it will attract peoples eye first than
the typefaces for typefaces we have to read
the typeface and understand the meaning which
takes more time than understanding a photograph
so photograph will definitely attract our
eye first so that that is why the [FL] over
here the toppled king is attracting our eye
first this is the first focal point and first
entry of users eye into the visual composition
from here there is actually a visual cue of
similar typefaces into the posters name thats
[FL] which is written over here has a similar
shapes so each and every typefaces shapes
are similar to the form of each and every
chase ah chase or [FL] so here we have a visual
connection so from here we have next hierarchy
is the name of the movie and these informations
has a lesser and these are subdued and has
the least amount least level of hierarchy
in this poster
similarly in this poster the post the movies
name is has the first hierarchy and also you
can see its his own designed typefaces bengali
typefaces here this has a similar visual identity
visual align quality and shapes matches with
the ghost photograph the funny ghost painting
which he have done has a similar ah colour
similar angularity in the typefaces and the
next level of informations are on top and
the bottom of the typefaces and also it creates
the balance in the typefaces
so here in the first most hierarchy level
is in the in the middle and then it decreases
on the top and bottom and here also because
of the colour contrast and it also has a three
d effect and though it is flat but it also
has a three d affect because of its one sided
colour stroke it creates a contrast because
thats the most of the pictures are red the
photo the poster is red and this part is blue
and yellow which is to other primary colours
so because of its colour contrast its having
higher hierarchy also its bolded on size and
colour gives is adding towards this hierarchical
level and similar thing we can look at into
the newspaper as we were discussing different
newspapers heading can also have a different
impact so for a first example this is a normal
every day is new york times so in most of
the newspapers newspapers heading is the most
important thing because that is the brand
identity of the newspaper and each and every
newspaper we can distinguish by its name so
it should have the most hierarchy in the ah
in the first page so it is there in the daily
newspaper in new york times newspaper then
the and which is definitely more ornate you
can see and which is by this time you know
this is the old style and it also resembles
that gutenberg bibles which derived from directly
a calligraphy gothic style of handwriting
so that is there and the next hierarchy is
then head line and the body of the text the
first line is again highlighted because its
bold and longer and then the body of the text
is has the least hierarchy in this cases but
in the cases of nine eleven definitely it
was a striking event so this is exceptional
case here you can see the us attacked this
news was so much more important
so this dominates the newspapers name so hearing
this case the newspapers names has a lesser
height and this the main heading has a larger
height because that was so striking and that
was so important the message was so important
and this was a definitely a different case
and in the general scenario you will not see
there is a blank white space on both both
of the sides left in front of a on the both
the sides of a type headline because newspaper
for each and every area newspaper can generate
a money and they can even the they sell these
areas for advertisements so leaving a space
is actually not economic but as we all know
that leaving a blank space augments the hierarchy
of a particular message so if there is a negative
white space around informative areas so it
in enhances the legibility and attracts users
mind so that principle is also used and here
we can see all centrally aligned ah headlines
so generally that also doesnt happen its right
aligned to centrally aliened also creates
anomaly and we try to read that first and
the next is the colour contrast so how how
we change the colour and create more legibility
or decrease the legibility of a particular
typefaces
so here we have different we can have a different
permutation combination of background and
foreground colour and they will impact the
hierarchy they will impact the legibility
of a particular text for that we have ah arthur
and passini in nineteen ninety two have created
of visibility chart based on the colour contrast
index of a background and foreground text
colour so he had have given a mathematical
formula we will discuss the formula but before
that we can see which has the highest colour
contrast so yellow on black has the highest
colour contrast and these gradual gradually
comes to the low least colour contrast but
all of these has a most legible colour contrast
there are other colour contrast colour schemes
like green and red has less visibility and
other examples like grey and black might also
have a least visibility so for this we can
from this diagram we can see that we also
have seen that airports text and informations
are generally written on black letters on
yellow so they use yellow black combination
because it has the highest legibility of if
we consider the colour combination
so the arthur person is formula ah creating
to identify the colour contrast mathematically
is like this so he have assigned the colour
light reflectancy ratio of each and every
colour so ray for example grey has thirteen
yellow has seventy one and blue he have assigned
fifteen in terms of light reflectancy so also
we can see the more the value of the colour
is that is the lighter the colour is its life
reflectancy will be more so white has eighty
five which has the highest and black has a
eight which is the lowest so his formula of
readability is k one minus k two k one is
the highest l r or the light light reflectancy
minus the lowest l r or the lowest l r thats
the k two whichever will be there in the foreground
or background for example in the in this example
k one and k two will be reads thirty one and
black is eight so thirty one minus eight divided
by k one or the highest colour value that
is the reds colour value that is thirteen
over here multiplied by hundred that will
be the contrast value h and by its study he
have done several ethnographic study and he
have conducted many ah questionnaires with
users and he have done several he have served
many people and he identified that if the
h value of h is less than seventy its very
difficult for users to read it should be at
least seventy or more than that for for its
legibility more the value is more the value
of contrast value or h is the more legibility
the the colour combination the the background
and the text colour combination will be so
this is it for the typography ah segment and
thank you
