Typography

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.
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, ArialBlack, and Arial Rounded are
fonts under the Arial typeface.
Difference between font and typeface
Font Typeface
Arial Black
Arial Narrow Arial
Arial Rounded MT Bold
Arial Unicode MS
Types of Fonts
Fonts can be categorized into three:
 Serif
 San Serif
 Display

T
Serif
Serif fonts are fonts that have little strokes called serif on each
end of the letter. Examples of typefaces with serifs are Times
New Roman, Baskerville Old Face, and Californian FB.

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.
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.

The picture above shows the different interpretations of these

notes with the same message but using different typefaces.
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.

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.

Using this wheel, we can create our own color

scheme or combination.
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.

Example of monochromatic color scheme

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.
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.
Split-Complementary Color Scheme
Split-complementary color scheme uses the colors on both sides of the opposite
color.
Triadic Color Scheme
This color scheme uses colors that form an equilateral triangle. It may be a
combination of primary, secondary, or tertiary colors.
Tetradic Color Scheme
Also known as double complementary. This color scheme uses two pairs of
complementary colors .
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. 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
Image
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.

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. 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.

Example of a stock image site

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
ascan load quickly due to its reduced file size