Pamantasan ng Lungsod ng Maynila

Gen. Luna Street, Intramuros, Manila

College of Humanities, Arts and Social Sciences

Written Report

Typeface

Submitted by:
Group 6 | BAC 3-2
Baui, Carla Jane
Dumlao, Michaella Adriannah
Guardiano, Raine Nicolette R.
Jonas, Kelly Isabelle O.

Submitted to:
Prof. Alfred Gabot

October 25, 2021

 What is Typography and Typeface?

Type is everywhere – street signs, magazines, the web. Every typeface you see
around you has been painstakingly and carefully planned out, and each has its own
personality and vibe. But, before we start let us first explain these two known
terminologies.

We typically hear typography, typeface and font being used and talk about
together, so let’s try to define and differentiate these three. Typography is the art of
creating the letters we use everyday. It’s the process of designing them and creating
them and making them real. A Font is a collection or set of letters – they’re the
mechanism you use to get your message across to your reader. Every letter and dash
and semicolon would be considered part of a specific font. And a Typeface is the
design you see – the style and look of a specific font.

Typography

In essence, typography is the art of arranging letters and text in a way that
makes the copy legible, clear, and visually appealing to the reader. Typography
involves font style, appearance, and structure, which aims to elicit certain emotions
and convey specific messages. In short, typography is what brings the text to life.

Typeface

A typeface is a set of characters of the same design. These characters include

letters, numbers, punctuation marks, and symbols. Some popular typefaces include
Arial, Helvetica, Times, and Verdana. While most computers come with a few dozen
typefaces installed, there are thousands of typefaces available. Because they are
vector-based (not bitmaps), typefaces can be scaled very large and still look sharp.
The term "typeface" is often confused with "font," which is a specific size and style of a
typeface. For example, Verdana is a typeface, while Verdana 10 pt bold is a font. It's a
small difference, but it is good to know.

A Brief History of Typography and Typeface

Throughout history, typefaces have been influenced by technological advances,

culture shifts, and just general boredom with the state of typography. Here’s how it all
went down:
1400’s: Johannes Guttenberg invented the printing press, giving the world a cheaper
way to obtain the written word. Up until this point, all written materials were done by
hand, and were very costly to purchase. Guttenburg also created the first ever
typeface, blackletter – it was dark, fairly practical, and intense, but not very legible.
But before Guttenberg there was a Chinese peasant named Bi Sheng, who invented
movable type way back in the 1000s.

1470: Nicolas Jenson created Roman Type based on Blackletter and Italian Humanist
lettering, it is inspired by the text on ancient roman buildings. It was far more readable
than blackletter, and caught on quickly.

1501: Aldus Manutius created italics – a way to fit more words onto a page, saving the
printer money. Today, we use italics as a design detail or for emphasis when writing.

1734: William Caslon created a typeface which features straighter serifs and much
more obvious contrasts between thin and bold strokes. Today, we call this type of
style ‘old style’.

1757: John Baskerville created what we now call Transitional type, a Roman-style
type, with very sharp serifs and lots of drastic contrast between thick and thin lines.

1780: Firmin Didot and Giambattista Bodoni created the first ‘modern’ Roman
typefaces (Didot, and Bodoni). The contrasts were more extreme than ever before,
and created a very cool, fresh look.

1815: Vincent Figgins created Egyptian, or Slab Serif The first commercially available
slab serif – the first time a typeface had serifs that were squares or boxes.

1816: William Caslon IV created the first typeface without any serifs at all. It was
widely rebuked at the time. This was the start of what we now consider Sans Serif
typefaces. During this time, type exploded, and many, many variations were being
created to accommodate advertising.

1920’s: Frederic Goudy became the world’s first full time type designer,
developing numerous groundbreaking typefaces, such as Copperplate Gothic,
Kennerly, and Goudy Old Style.
1957: Swiss designer Max Miedinger created Helvetica, the most loved typeface of
our time. This was a return to minimalism, and many other simplistic typefaces such as
Futura surfaced around this time period.

1968: The first digital typeface—Digi Grotesk—was designed by Rudolf Hell.

Late 1980s: TrueType fonts were created, which allowed for both computer displays
and output devices like printers to use a single file.

1997: OpenType fonts were invented, which allowed both Mac and PC platforms to
use a single font file.

Present: With the internet, we have such a vast variety of old and new typefaces
available for us to peruse and use. All these typefaces give us an abundance of
options and looks for our designs today, and we’re not limited by just one or two
typefaces like we would have been a few hundred years ago.

Typeface Evolution on the Web

The 21st century brought considerable advances in web fonts. In 2009, the
Web Open Font Format (WOFF) was developed and added to the W3C open web
standard. This development paved the way for widespread adoption of web fonts in
2011 when all major browsers finally adopted support for WOFF.

Widespread support for web fonts revolutionized digital design, allowing

designers practically unlimited options in web typography and ushering in trends,
including big typography and the use of outline fonts.

The introduction of variable fonts within the OpenType standard in 2016

strengthened the web typography revolution. Variable fonts can change size and
weight based on where they’re used in a design, within a single font file. This flexibility
means using fewer font files, resulting in faster page load times.
Typography Elements

● They are methods for presenting your thoughts to visitors and making the
most of each word.
● Each of these components is addressed by a set of rules that center around
one fundamental idea: effective communication. Any circumstance when you
wish to communicate a concept to another person via text — such as a website,
blog post, magazine ad, interface, billboard, or newsletter – good typography
is essential.

Hierarchy
● One of the most important functions of hierarchy is to keep your thoughts
structured so that visitors can always tell which type of material they're reading.
● (e.g., Website - where the site's title is shown in a huge header at the top of the
page, and the key navigation pages are listed below the header in a smaller
type.)

(A design that lacks

hierarchy.)

(A design with a good

hierarchy.)
 ● This is a visual signal that allows readers to recognize the text's context without
having to think about it. Notice how all of the text on the webpage below has
the same size, font, weight, and color, with little variation. Nothing stands out
from the rest of the text... This is a horrendous design!

Contrast
● The contrast adds interest to the text and might aid in communicating the
points you want to stress. Varying the size, typeface, weight, color, and style of
your designs may create a huge effect while also organizing your thoughts.

(Lots of contrast, and thus, impact!)

(No contrast = boring!)

Consistency
● All typography is based on the concept of consistency. Consistent typefaces
are especially crucial since employing too many might result in a jumbled and
disorganized appearance, therefore utilize the same font style for the same
material every time.
 ● With only two font faces, two colors, and three font sizes, the "Chapter One"
page below has a pleasant look. Despite the usage of only two font faces,
hierarchy is established via the use of size and color. Except for the page
number, all of the text is left-aligned, resulting in neat, uniform lines. On the
"Chapter Two" page, however, there are four different font faces, four colors,
four font sizes, and each piece is aligned differently, resulting in a cluttered,
unappealing design.

Alignment
● The "line" that the text orients towards is referred to as alignment. It can be
applied to a whole text body, specific words, or even pictures. Every piece of
your design should align to one of the other elements in some way to produce
equal sizes and distances between items, and alignment should be as
consistent as feasible.
● For example, you could want your logo to have the same size as your header,
and your body content to be aligned with the same margins as the header.

Whitespace
● Whitespace is the empty space surrounding objects or writing that can be in
the shape of margins, padding, or just a clear area. It provides a nice aesthetic
experience and may even help words stand out.

● The text in the first box is jammed against the enclosing box, making it difficult
to read. The text has more breathing area in the second box, and the style is
much more attractive.
Color
● Color may help create the tone for your design, and getting it just right can
make your content pop. Color is made up of three primary elements:
1. Hue - is the tint of a color.
2. Saturation - the intensity of the color
3. Color value refers to how bright or dark a color is.

● Keep in mind that hue, saturation, and value should all be contrasted in a way
that makes your text simple to read.

● Asking yourself these three questions when creating any design can help you
remember the aforementioned standards and principles:
1. Is it possible to read my text?
2. Is my personal style consistent?
3. Is there any contrast in my styling?

Basic Classifications of Typefaces:

● Serif and Sans Serif are two types of typefaces that are used for body content
and headings, respectively (including titles, logos, etc.).
● The typefaces Script and Display are exclusively used for headlines.

● Monospaced typefaces were first used on typewriters and are commonly

employed for displaying code, however they may also be used for body and
headline content.
What are the uses of Typefaces?

1) Typefaces can set a theme or mood and draw attention.

Designers often use typefaces to set a theme and mood in an advertisement

(for example, using bold, large text to convey a particular message to the reader).
Choice of typeface is often used to draw attention to a particular advertisement,
combined with efficient use of color, shapes, and images. When created in the right
way, a typeface should deliver the right emotions to the reader and set the tone that
will bring the words to life, whilst reflecting the industry it is intended for.

2) Typefaces can be used to effectively deliver a message.

We also need to think of the importance of the message we are trying to get
across and therefore a typeface which is bold and in your face may be the most
appropriate. When we design and need to pick a font or typeface to use, we should
ask ourselves what message we are trying to portray. Is it a fun event? Therefore
should the typeface style be a bit childlike and silly? Visually does the character of the
font reflect the message? To the other extreme if we take the slogan ‘tough as nails’,
we instantly have an image in our head of what this message is saying and should also
look like. To get across the tone of these words we need something bold and chunky,
maybe a little rugged with sharp edges and in a solid block colour? This would reflect
power and also masculinity, whereas if we use a nice script font that looks pretty in a
soft pink, the opposite is illustrated with it appearing feminine and delicate.

3) Typefaces are used to catch readers' interest.

We view a font on a piece of work and make a judgement of it, therefore if the
font is just right then it makes the work seem more professional and help gain the trust
of the reader. A good font can also help when the subject matter is uninteresting and
might be just what is needed to help the reader want to read what is written.
The Importance of Typefaces

A typeface is a very important aspect of the design process and can either
make or break the effectiveness of your design. It is just as important to the visual
effect as images.

A good typeface engages the audience and influences their perception

of the message. It is important to choose a typeface that will link the text with the
graphics to achieve the objective of your design. The effectiveness of the message
on the page is greatly influenced by the choice of typeface.

A good typeface enhances the reading pleasure of the viewer. Even the
best typefaces can’t be used effectively in every situation, which is why it is important
to choose the right typeface that is best suited in a particular situation.
References

Becky Taylor (2018) | The Importance of Choosing the Right Font

M3.Agency. (n.d.). M3.Agency.

https://www.m3.agency/news-insights/the-importance-of-choosing-the-right

-font

CareerFoundry. (2021, July 15). What Is Typography, And Why Is It Important?

[2021 Guide].

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

y/

Chapman, C. (2020). Lines of Communication – A Typeface History (with

Infographic). Toptal Design Blog; Toptal.

https://www.toptal.com/designers/ui/typeface-history

Choosing the right font for your design project. (n.d.). Designer Daily.

https://www.designer-daily.com/choosing-the-right-font-for-your-design-pro

ject-64062?fbclid=IwAR3q-UQ_xIXPpWfsi5iYGh9cfhKZmD5isRCCNXhnZKzs

hp40C_-i7QvKCys

Martin, L. (2017, August 29). Typography Elements Everyone Needs to Understand -

Gravit Designer. Medium.

https://medium.com/gravitdesigner/typography-elements-everyone-needs-t

o-understand-5fdea82f470d

Typeface. (2020). Techterms.com.

https://techterms.com/definition/typeface
Tracy. (2014, July 3). A Brief History of Typography & Typefaces - Ashworth Creative.

Ashworth Creative.

https://www.ashworthcreative.com/blog/2014/07/brief-typography-typeface

s/ ‌