Data Center College of the Philippines of Laoag City, Inc.

A.G. Tupaz cor. M.V. Farinas Streets, Brgy. 8 San Vicente, Laoag City

DEPARTMENT OF INFORMATION TECHNOLOGY

Lesson 4: Typography

Typography is the art of arranging texts that makes it readable and appealing to the viewer. It involves
font style, typeface, and text structure.

Some people often misuse the term “font” as typeface. So, let us explain first the difference between font
and typeface.

Font refers to the variation of weights of a typeface, while typeface refers to the text style. Font also refers
to the format or storage mechanism of a text like .otf and .ttf. For example, Arial Narrow, Arial Black, and
Arial Rounded are fonts under the Arial typeface.

“Typeface is to font as song is to .mp3” – Nick Sherman Table 1

shows the difference between a font and a typeface.

Table 1 – Difference between font and typeface

Font Typeface

Types of Fonts
Fonts can be categorized into three:
• Serif
• San Serif
• Display
Serif

Serif fonts are fonts that have little strokes called serif on each end of the letter. They are typically
used in formal or traditional projects. Examples of typefaces with serifs are Times New Roman, Baskerville
Old Face, and Californian FB.

Figure 14 Serif in letter T (in circles).

Sans Serif

Sans serif are fonts with no extra strokes. Sans serif simple means “without serifs” as sans is a
French word for without. These fonts are normally found in mobile phones, and computer screens. Examples
of this type are Calibri, Arial, and Roboto.

Display

Display fonts are sometimes called as fancy or decorative fonts. It can be script, blackletter or all
caps. These type of fonts are used in special occasions like invitations, titles, or posters. Examples of display
fonts are Advertising Script, Bangers, and Forte.

RACHELLE T. OAL
GELECT 1-LIVING IN IT ERA
 Data Center College of the Philippines of Laoag City, Inc.
A.G. Tupaz cor. M.V. Farinas Streets, Brgy. 8 San Vicente, Laoag City

DEPARTMENT OF INFORMATION TECHNOLOGY

Choosing a font or typeface

Whether you are new or old in graphic design, one dilemma that most graphic designers experienced is on
what fonts or typefaces are they going to use. One mistake that beginners commit is the misuse of fonts or
typefaces. In choosing a font/typeface, it should portray the message that you want to say to your viewers.
In design, fonts and typefaces do matter.

Figure 15 shows the different interpretations of these notes with the same message but using different
typefaces.

Figure 14 Serif in letter T (in circles).

Credits: digitalsynopsis.com

There are typefaces are that overused and outdated like Comic Sans, Papyrus, Jokerman, and Curlz MT.
Though there is nothing wrong in using them, these typefaces are being discouraged to use.

In choosing typefaces on your design, limit yourself to one or two per project, and you may play with their
family of fonts for emphasis or contrast. You may combine serifs and sans serifs, display and serifs, or display
and sans serifs.

RACHELLE T. OAL
GELECT 1-LIVING IN IT ERA
 Data Center College of the Philippines of Laoag City, Inc.
A.G. Tupaz cor. M.V. Farinas Streets, Brgy. 8 San Vicente, Laoag City

DEPARTMENT OF INFORMATION TECHNOLOGY

Lesson 5: Color

Colors are very essential to your compositions. One may use a combination or one or more colors. It may
be our instinct to choose color but there is a science behind it, called Color Theory. Color Theory
describes how different colors contribute to each other and how they appear as they are mixed into other
color schemes. Before we proceed to different color schemes, let us go over some terminologies used in
color.

• Hue. Refers to pure, vibrant colors.

• Saturation. Refers to the intensity of the color. It ranges from black and white (or grayscale) to
vibrant color.
• Value. Refers to the lightness or darkness of a color. For example, from light blue to dark blue.

Color Schemes

Of course, we can still remember the lessons about color during art lessons. We have primary colors, then
secondary colors and tertiary colors. A circular diagram of these colors is called a color wheel (Figure
15). Using this wheel, we can create our own color scheme or combination.

Figure 15 The color wheel Credits: aekikuis – Color Wheel Worksheet

Monochromatic Color Scheme

This color scheme only focuses on one color, and often using variations by incorporating
saturations or values. For example, if you chose the color blue, then you may have other colors under the
same color family like sky blue, baby blue, navy blue, or dark blue.

Figure 16 Example of monochromatic color scheme

Credits: Patiwat Sariya

RACHELLE T. OAL
GELECT 1-LIVING IN IT ERA
 Data Center College of the Philippines of Laoag City, Inc.
A.G. Tupaz cor. M.V. Farinas Streets, Brgy. 8 San Vicente, Laoag City

DEPARTMENT OF INFORMATION TECHNOLOGY

Achromatic Color Scheme

• This color scheme only revolves on using desaturated colors like black, gray, and white.

Analogous Color Scheme

• Analogous color scheme selects a group of three colors that are adjacent in the color wheel.

Figure 17 The analogous color scheme Credits:

aekikuis – Color Wheel Worksheet

Complementary Color Scheme

These are colors that are direct opposite to each other in the color wheel. Usually, a combination
of a primary and secondary colors.

Figure 18 The complementary color scheme

Credits: aekikuis – Color Wheel Worksheet

Split-Complementary Color Scheme

Split-complementary color scheme uses the colors on both sides of the opposite color.

Figure 18 The split-complementary color scheme

Credits: aekikuis – Color Wheel Worksheet

RACHELLE T. OAL
GELECT 1-LIVING IN IT ERA
 Data Center College of the Philippines of Laoag City, Inc.
A.G. Tupaz cor. M.V. Farinas Streets, Brgy. 8 San Vicente, Laoag City

DEPARTMENT OF INFORMATION TECHNOLOGY

Triadic Color Scheme

This color scheme uses colors that form an equilateral triangle. It may be a combination of primary,
secondary, or tertiary colors.

Figure 19 The triadic color scheme

Credits: aekikuis – Color Wheel Worksheet

Tetradic Color Scheme

Figure 20 The tetradic color scheme

Credits: aekikuis – Color Wheel Worksheet

Understanding Color Profiles

Whenever we open an image editing application or buy a printer ink at the store, we may
observe labels like RGB or CMYK. So, what are they? They are color profiles that we need to
consider if we create designs.

• RGB. This color profile consists of Red, Green, and Blue. You should use this
profile for design that are intended for screen displays.

• CMYK. This color profile consists of Cyan, Magenta, Yellow, and Key (Black). If
you have a printer in your house, you probably see these colors as inks. This
profile is intended for designs that are to be printed.

RACHELLE T. OAL
GELECT 1-LIVING IN IT ERA
 Data Center College of the Philippines of Laoag City, Inc.
A.G. Tupaz cor. M.V. Farinas Streets, Brgy. 8 San Vicente, Laoag City

DEPARTMENT OF INFORMATION TECHNOLOGY

Lesson 6: Image

Images are not just limited to photographs, it also includes graphics, and other illustrations. Having images
on your composition makes it appealing to the eyes of your viewer. Take magazine as an example,
imagine that your favorite magazine contains no image. You do not want to read it right? That is the power
of images – they are not just decorations on your composition.

Finding and placing the right image is not a difficult thing as long as you know what kind of image you are
going to use in your composition. Do you remember using clip arts on your project designs? If yes, then I
encourage you to not use it today as we are over with the clip art era. Stock photos are now popular in
any project.

Most people are now relying on stock photos as they are free or sometimes cost less. There are various
stock image websites all over the internet. The only thing that you need to do is to choose pictures/images
for your composition.

Figure 21 A screen grab of Pexels – A stock image site

Credits: pexels.com

Image File Types

There are different file types of images, and they are grouped into two categories: vector and
raster.

• Vector -It is a type of image that does not lose its quality when zoomed in. Your image will not
be pixelated when enlarged.
• Raster - Opposite to vector, raster images become pixelated when enlarged.
• Vector Image File Extensions
• Encapsulated Postscript (EPS)- This vector format are designed to produce high-
resolution graphics for print. Being a universal file type, EPS files can be opened in any
design editor.
• Adobe Illustrator Document (AI)- Most preferable and commonly used image file type by
designers. If you want to create a vector image, AI is one of the best tool for you.

Raster Image File Extensions

• Joint Photographic Experts Group (JPG or JPEG). This file type is the most commonly used
image file type. Since this is a raster type of image, JPEG images are known for their “lossy”
compression. Meaning, the image quality decreases when being enlarged.
• Portable Network Graphics (PNG). This file type is known for having a transparent background.
Images in this type are commonly used in web documents.
• Graphics Interchange Format. This file type is known in its animated form. You can find them in
social networking sites as posts or comments. GIFs are often used in web pages as can load
quickly due to its reduced file size.

RACHELLE T. OAL
GELECT 1-LIVING IN IT ERA
 Data Center College of the Philippines of Laoag City, Inc.
A.G. Tupaz cor. M.V. Farinas Streets, Brgy. 8 San Vicente, Laoag City

DEPARTMENT OF INFORMATION TECHNOLOGY

Online Videos to Watch:

• https://youtu.be/YqQx75OPRa0
• https://www.youtube.com/watch?v=n8KoAHCwnMQ
• https://youtu.be/sByzHoiYFX0
• https://youtu.be/MELKuexR3sQ
• https://www.youtube.com/watch?v=65WjYDEzi88
• https://www.youtube.com/watch?v=ZK86XQ1iFVs
• https://www.youtube.com/watch?v=EFf9jBs2yfU

References / Sources:

• https://www.slideshare.net/LeahLewman/elements-of-art-shape-88242623
• https://visme.co/blog/wp-content/uploads/2015/09/designelements.jpg
• https://99designs.com/blog/tips/graphic-design-basics/#4
• https://faculty.washington.edu/farkas/dfpubs/Farkas-Farkas-Graphic%20Design-
Ch11Principles%20of%20Web%20Design.pdf
• https://www.interaction-design.org/literature/topics/graphic-design
• http://www.wcs.k12.mi.us/cousino/wcsart/art%20foundatons%20site/texture.html#:~:text=T
exture%20refers%20to%20the%20surface%20quality%20in%20a%20work%20of%20art.&t
ext=Some%20things%20feel%20just%20as,called%20visual%20or%20implied%20texture.
• https://www.thoughtco.com/definition-of-balance-in-art-
182423#:~:text=Balance%20refers%20to%20how%20the,not%20seem%20heavier%20tha
n%20another.
• https://writingexplained.org/layout-or-lay-out-difference
• https://www.edgee.net/the-principles-of-graphic-design-how-to-use-proximity-
effectively/#:~:text=The%20principle%20of%20proximity%20is,give%20structure%20to%20
a%20layout.
• https://www.portlandlocalist.com/blog/how-to-improve-the-design-of-your-email-newsletter
• https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/
• https://www.shutterstock.com/blog/complete-guide-color-in-design
• https://blog.hubspot.com/insiders/different-types-of-image-files

RACHELLE T. OAL
GELECT 1-LIVING IN IT ERA