z

ICT-Illustration
Quarter 3 - Module
TYPOGRAPHY IN ILLUSTRATION

Department of Education ● Republic of the Philippines

1
Technology and Livelihood Education (ICT) – Grade 9
Alternative Delivery Mode
Module 3 : Typography
First Edition, 2020

Republic Act 8293, Section 176 states that: No copyright shall subsist in any work of the
Government of the Philippines. However, prior approval of the government agency or office
wherein the work is created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.)
included in this module are owned by their respective copyright holders. Every effort has been
exerted to locate and seek permission to use these materials from their respective copyright
owners. The publisher and authors do not represent nor claim ownership over them.

Published by the Department of Education

Secretary: Leonor Magtolis Briones
Undersecretary: Diosdado M. San Antonio

Development Team of the Module

Writer: BERNADETTE C. CONSTANTINO

Co-Writer: VIRGINIA C. DE GUZMAN

Editors: FREDERICK JOHN A. MACALE

MADONNA R. ESTACIO
MARCO RHONEL M. EUSEBIO
MA. VICTORIA C. VIVO

Printed in the Philippines by Department of Education – Region III

Office Address: Matalino St.,Government Center, Maimpis, City of San Fernando

Telefax: (045) 598-8580 to 89
E-mail Address: region3@deped.gov.ph

2
 9
Technology
and Livelihood
Education
ICT Illustration
Quarter 3 - Module 3
TYPOGRAPHY in ILLUSTRATION

This instructional material is collaboratively developed and

reviewed by educators from public schools. We encourage teachers and
other education stakeholders to email their feedback, comments, and
recommendations to the Department of Education-Region III at
region3@deped.gov.ph

Your feedback and recommendations are highly valued.

Department of Education ● Republic of the Philippines

3
Introductory Message

For the learner:

Welcome to the Technology and Livelihood Education 9 Alternative Delivery Mode (ADM)
Module in Illustration!

This module is provided as your alternative instruction for learning in which content and activities
are based on your needs. It is a self-paced approach wherein you will work on different activities
that are interesting and challenging.

This is a project-based module focuses on encouraging you to develop skills using creative
imaging and manipulation of tools to create contemporary illustrations for publishing and design.
You will be encouraged to explore your creative potential and become image-based
communicators using freehand, thus graphic software will not be used. As the fundamental basis
for all illustration sketching and drawing will be required to provide students with the means to
develop ideas and preparatory layouts for illustration and expectedly demonstrate fluency in visual
craft.

To accomplish what is expected from you, you are encouraged to stay focused and develop a
sense of responsibility and independence in doing the different tasks provided in the module. Be
an empowered learner. Always believe that nothing is impossible, and nobody can stop you from
reaching your dreams.

This module has the following parts and corresponding icons:

What I Need to Know This will give you an idea of the skills or
competencies you are expected to learn in the
module.

What I Know This part includes an activity that aims to check

what you already know about the lesson to take. If
you get all the answers correct (100%), you may
decide to skip this module.

What’s In This is a brief drill or review to help you link the

current lesson with the previous one.

What’s New In this portion, the new lesson will be introduced to

you in various ways such as a story, a song, a
poem, a problem opener, an activity or a situation.

What is It This section provides a brief discussion of the

lesson. This aims to help you discover and
understand new concepts and skills.

What’s More This comprises activities for independent practice

to solidify your understanding and skills of the
topic. You may check the answers to the exercises
using the Answer Key at the end of the module.

What I Have Learned This includes questions or blank

sentence/paragraph to be filled in to process what
you learned from the lesson.

4
 What I Can Do This section provides an activity which will help
you transfer your new knowledge or skill into real
life situations or concerns.

Assessment This is a task which aims to evaluate your level of

mastery in achieving the learning competency.

Additional Activities In this portion, another activity will be given to you

to enrich your knowledge or skill of the lesson
learned. This also tends retention of learned
concepts.

Answer Key This contains answers to all activities in the

module.

At the end of this module, you will also find:

References This is a list of all sources used in developing this

module.

The following are some reminders in using this module:

1. Use the module with care. Do not put unnecessary mark/s on any part of the module. Use a
separate sheet of paper in answering the exercises.
2. Don’t forget to answer What I Know before moving on to the other activities included in the
module.
3. Read the instruction carefully before doing each task.
4. Observe honesty and integrity in doing the tasks and checking your answers.
5. Finish the task at hand before proceeding to the next.
6. Return this module to your teacher/facilitator once you are through with it.

If you encounter any difficulty in answering the tasks in this module, do not hesitate to consult your
teacher or facilitator. Always bear in mind that you are not alone.

We hope that through this material, you will experience meaningful learning and gain deep
understanding of the relevant competencies. You can do it!

Table of Contents
What I Need to Know --------------------- 1
What I Know --------------------- 2

Lesson 1
What’s In --------------------- 4
What’s New --------------------- 4
What is It --------------------- 5

What’s More --------------------- 11

What I Have Learned --------------------- 12
What I Can Do --------------------- 13
Answer Key --------------------- 15
References --------------------- 16

5
 What I Need to Know

This module was designed and written with you in mind. It is here to help
you understand illustration.

This module is focused on developing illustration skills as a method

for communicating creative concepts. You will study illustration techniques
with focus on developing a distinctive personal style.

The lessons are arranged to follow the standard sequence of the course.

After going through this module, you are expected to:

1. Explain the importance of properly selected typography in illustration.

2. Use varied types of typography in illustration.
3. Layout figures and objects according to Illustration requirement

What I Know

Directions: Identify the typeface anatomy described in each number.

_____________ 1. The imaginary line that marks the upper boundary of capital
letters and some lowercase letters’ ascenders.
_____________ 2. The horizontal spacing between two consecutive characters
_____________ 3. A single linear element that forms part of a character; may be
straight or curved.
_____________ 4. A piece of a letter that extends below the baseline.
_____________ 5. The inside angle where two strokes meet.

6
 Lesson
TYPOGRAPHY in ILLUSTRATION
3

What’s In

Aside from the main lesson, this module consists of pre- and post-
assessment tests together with various activities which you are required to perform to
measure your level of understanding. Each of the activities has corresponding rubrics as
your guide.

What’s New

Whether it’s on phones, in books or on websites, digesting written words is a

constant thing. From instruction booklets to shop fronts, type is all around us. Readers
often reflect on the power of the written word, but rarely consider the designer’s role in
emulating the tone of the word or sentence.

Behind the scenes, a designer has taken the time to consider the relationship
between the look of the text and what the text says. In reality, different moods,
atmospheres and emotions can be expressed simply through the type choice. But what
actually is typography—and why is it so vital?

What is It

TYPOGRAPHY in ILLUSTRATION

Typography the art and technique of arranging type to make written

language legible, readable and appealing when displayed.

Typography is derived from the Greek words τύπος typos "form" or

"impression" and γράφειν graphein "to write".

7
 Typesetting is the composition of text by means of types. Typesetting
requires the prior process of designing a font and storing it in some manner.

Importance of Typography

1. Establish a strong visual hierarchy

2. Provide a graphic balance
3. Set the overall tone
4. Make a design look aesthetic and pleasing
5. Guide and inform users
6. Communicate with the audience
7. Facilitate audience engagement
8. Optimize readability
9. Build brand recognition
10. Hold the attention of the readers
11. Reinforce message of the text
12. Influence decision making

The Anatomy of Typography

A. Typefaces Categories and Styles

1. Font - refers to the physical embodiment (whether it’s a case of metal pieces
or a computer file)
Typeface - refers to the design (the way it looks).

A font is what you use, and a typeface is what you see.”

2. Character - An individual symbol of the full character set that makes up a

8
 typeface.

3. Alternate Character /
Glyph- A non-standard
(sometimes decorative)
variation of a character that
comes as an extra option with
a font file.

4. Serif- A short line or stroke attached to

or extending from the open ends of a
letterform; also refers to the general
category of typefaces that have been
designed with this feature.

5. Sans-Serif / Sans- Literally

“without line”; the general
category of typefaces (or an
individual typeface)
designed without serifs.

6. Italic- A slanted version

of a typeface (slants from left to
right); a true italic is uniquely
designed, more than a tilted
version of the upright (a.k.a.
“roman”) typeface.

B. Foundation: Positioning and Spacing

1. Baseline- The
imaginary line on which
most letters and other
characters sit.

9
 2. Cap line- The
imaginary line that
marks the upper
boundary of capital
letters and some
lowercase letters’ ascenders (see Ascender definition in the next section).

3. X-height- The height of

a typeface’s lowercase
letters(disregarding
ascenders and
descenders).

4. Tracking / Letter-
Spacing- The uniform
amount of spacing
between characters in a
complete section of text
(sentence, line,
paragraph, page, etc.).

5. Kerning- The horizontal spacing

between two consecutive characters;
adjusting the kerning creates the
appearance of uniformity and reduces
gaps of white space between certain
letter combinations.

6. Leading / Line-Spacing- The vertical spacing between lines of text (from

baseline to baseline).

C. Anatomy of a Letter

1. Stroke- A single linear element that forms part

of a character; may be straight or curved.

2. Stem- The main (usually vertical) stroke of a

letterform.

10
3. Arc of Stem- A curved stroke that is continuous with
a stem.

4. Foot- The part of the

stem that rests on the
baseline.

5. Descender- A piece of a letter that

extends below the baseline.

6. Ascender- A part of a lowercase

letter that rises above the main body
of the letter (above the x-height).

7. Joint- The point where a stroke connects

to a stem.

8. Apex- The uppermost connecting point of a

letterform where two strokes meet; may be
rounded, sharp/pointed, flat/blunt, etc.

9. Vertex- The point at the bottom of a

character where two strokes meet.

10. Crotch- The inside angle where two strokes

meet.

11. Arm- A horizontal stroke that does

not connect to a stem on one or both
ends.

12. Leg- A short, descending stroke on a

letterform.

11
 13. Shoulder- A curved stroke
extending down from a stem.

14. Bar / Crossbar- An enclosed horizontal stroke.

15. Cross Stroke- A line that extends

across/through the stem of a letter.

16. Bowl- The closed, round or oval

curve of a letter.

17. Counter- An enclosed or partially

enclosed area of white space within a
letter; could be bounded by curves,
strokes, or stems. The opening or
partially enclosed negative space
created by an open counter.

18. Aperture- The opening or partially

enclosed negative space created
by an open counter.

19. Double-Story- A type of letter that

has two counters (as opposed to
the single-story version, which has
only one counter).

20. Terminal- The end of any stroke

that doesn’t include a serif;
includes ball terminals (circular in
shape) and finials (curved or
tapered in shape).

21. Swash- A decorative

extension or stroke on a
letterform; may be part of a
letter by design or
available either as an
additional glyph or as an
add-on to the standard
character.

12
 22. Ligature- Two or more letters
that are connected to form one
character; primarily decorative

Typography Design Principles

1. Font Choice

1.1 Serif fonts are the ones with the extra bits on the end of the letters
1.2 Sans serif fonts are the ones without the extra bits.
1.3 Script fonts are those that imitate handwriting
1.4 Monospaced fonts are fixed width, with each character being of equal width.

- Serif fonts are more readable when it comes to print

- Both serifs and sans serifs can be used for body text
- Serifs, Sans Serifs and even Script fonts can be extremely effective in
headlines and logos

2. Size

- Consider the purpose of the text to determine the size of the font
- Smaller text can encourage the reader to focus more on the text, rather that
scanning it.
- Consider the audience
- Hierarchy of importance should be formed

13
3. Letter Spacing and Line Height

- Rule of thumb : the larger the text, the lower the letter-spacing value.
- reduced line-height can cause problems with readability
- text harder to scan and requires more effort from the reader

14
4. Alignment and Proximity

- Align the text with the other elements on the page to create a structured,
organized feel.

5. Readability

- Make sure the people will want to read the text.

- The text should be broken up into paragraphs of a sensible length
- Images may be used to break up the text and make it easier on the eye.
- This principle is a combination of all the other principles

What I Have Learned

Directions: Label the following typeset anatomy correctly.

1. 1. 6. 6.

2. 7.

3. 8.

4. 9.

5. 10.

15
 What I Can Do

Activity 1. Copy the following typeface on any ruled pad of paper.

16
 Activity 2.
Instructions: 1. From the typefaces given in Activity 1, choose any three which
you think would look good together.
2. 2. Use them in a campaign poster on mental health.
3. 3. The poster should measure 24”x 18”
4. 4. The poster material is of your preference but should be white.

ILLUSTRATION TASK RUBRIC

BELOW AVERAGE PROFICIENT ADVANCED

CRITERIA AVERAGE
2 points 4 points 6 points 10 points

Principles and Principles and Principles and Principles and

guidelines in guidelines in guidelines in guidelines
typesetting were typesetting were typesetting were typesetting were
Drawing Technique not observed applied but needs observed observed and
further practice mastered

Drawings are Drawings are neat Drawings are neat Drawings are very
Craftsmanship messy and show but show marks of and show very neat and show no
marks of rips, rips, tears and/or little evidence of evidence of rips,
tears, and folds folds rips, tears and/or tears, and folds
folds

Outputs were not Outputs were Outputs were Outputs exceeded

Effort turned in by turned in by turned in by requirements for
deadline deadline deadline but could this deadline
have had more
details

17
 Answer Key

crotch 5. 10. finial

Ascender 4. 9. descender
Stroke 3. 8. bar / crossbar
Kerning 2. 7. counter
Cap line 1. 6. Loop
What I Know 5. Bowl
4. Baseline
3. Ascender
2. Arm
1. Foot
What I Have Learned

References

• https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/

• https://en.wikipedia.org/wiki/Typography

• https://www.canva.com/learn/typography-terms/

• https://designmodo.com/letterform/

• https://99designs.com/blog/tips/typeface-vs-font/

• https://www.crazyegg.com/blog/typography-design-elements/

• http://tangledindesign.com/5-basic-principles