IT1905

Typography
Anatomy of a Letter
Typography inspires by reminding the world of a simpler time without connection. For graphics designers, they can carry that
fascination into the work by studying the makeup of letters. These are the following:
• Baseline – This is the invisible line that letters on a typography rest on. It is considered the most important of the guide
lines used in the text. The other guide lines are the capline (determines the maximum height of the text) and the meanline
(determines the height of the other parts of a letter, such as the shoulders, ears, and the maximum height of some
lowercase letters).
• Body Height and Width – A letter’s height, also known as x-height, contains the main body of a letter and excludes the
other parts. A letter’s width is simply the length of the letter including all other parts.
• Ascenders and Descenders – Ascenders are strokes that are written upward and away from a letter’s main body, while
descenders are strokes that are written downward, extending past the baseline.
• Serif – This a part of a letter that is considered as stroke details, known as feet. Conversely, letters without serif are
commonly known as sans serif, which means “without serif.”
• Bowl and Shoulder – A bowl is a downward and forward stroke usually written from the capline down to the meanline;
this is common on uppercase letters such as R and B. A shoulder, on the other hand, is a downward and forward stroke but
is written from the meanline down to the baseline, such as the one on the lowercase b.
• Stem and Arm – Stems are letter strokes that usually span the body of the letter, while arms are horizontal strokes that
extend from the stem.
• Leg and Foot – A letter stroke that extends from a shoulder down to the baseline is called a leg, while the foot is the lowest
point of a letter that resides on the baseline, where serifs are also usually written.
• Spine and Counters – Spines are like curved stems that comprise the main body of a letter, such as the one in the uppercase
letter S. If a letter is written with a close space in it, such as the letter O, then the closed space is called a counter or counter
space. Some letters may also contain open counters if the letter isn’t fully closed, such as the one found in the letter U.
• Ear, Tail, and Jot – The ear is a decorative horizontal detail that pokes out of the upper section of some letters, such as the
lowercase g. The tail is the same, except it pokes out of the lower section of some letters, such as the one on the uppercase
letter Q. The jot is simply the dots present in some letters, such as those seen in the lowercase letters of i and j.
• Crossbar and Cross Stroke – Both are horizontal strokes that run on the meanline; the difference is that the crossbar
connects two (2) parts of a letter such as the one on the uppercase A, while the cross stroke intersects the stem or other
parts of a letter, such as the one on the lowercase f.
• Ligatures – Formally known as typographic ligatures, these are whole letters joined together to form a single glyph. A
common example of this is the character æ as used in English, in which the letters a and e are joined. Do note that not all
letters can be joined to form ligatures.

Typefaces
What is Typeface?
Typeface is commonly known as the design used for characters (letters, numbers, and symbols). The design incorporates varying
forms and values in the anatomy of characters to create a specific style or theme. This allows graphic designers to choose specific
typefaces for their projects.

What is Font?
A Font is a representation of a typeface and is essentially the collection of all the characters of a typeface that can be set on a
specific size or style (usually either bold or italic). Such styles for a typeface is collectively known as the typeface’s font family.

Font Family Style Classifications

A typeface (or its font) can have different styles, which can be classified into which part of the characters’ anatomy is designed:
• Weight – This refers to the “heaviness” of each stroke in the characters. Light styles usually have thinner weight (such as

04 Handout 1 *Property of STI

 student.feedback@sti.edu Page 1 of 3
 IT1905
the stem, spine, or arms), while those with heavier weight are usually classified as bold or boldface styles.
• Spacing – This refers to the spacing set between each character, as well as the amount of space set for whitespace (which
is equivalent to hitting the spacebar). Condensed styles have very minimal spacing, bunching characters together and using
little space for whitespace, while monospaced styles have abundant spacing with even, adjacent characters being
seemingly far apart.
• Orientation – Commonly associated with serif/sans serif, styles that prioritize how the characters sit on the guide lines
(meanline, baseline, and capline) and how details associated with the font’s characters—for example, its feet—are
designed. For example, a roundface style rounds the edges of a typeface’s details, making it look like it was written with a
marker with only a portion of the details of the characters touching the guide lines.
• Script – This usually refers to styles that use varied and/or fluid strokes similar to handwriting or calligraphy. This can be
commonly seen on cursive typefaces.

Typographic Measurement
The measurements people use every day—whether they’re inches and feet or centimeters and meters—are fixed, or absolute,
measurements. That is, an inch is always an inch, and a meter is always a meter. Type has its equivalents, which are the pica and
its subdivision, the point, often abbreviated as pt.
The modern point used as a standard today in almost all typesetting systems is relatively new, having been created by Adobe
Systems in the course of developing the PostScript page description language.

Parts Used in Typographic Measurement

The height of type is measured in points, and the width of a letter or a line of type is measured in picas. Point size is the height
of the body of a letter in a typeface. Originating in metal type, it was a slug of lead the typeface was set upon. The width of a
typeface is measured in characters per pica.

Tips to Consider for Typographic Measurement

• Most type is available in sizes ranging from 5 points to 72 points. Type that is 14 points or less is used for setting text and
is called text type or body copy. Sizes above 14 points are used for display type.
• Line length, which is the horizontal length of a line of type, is measured in picas. Approximately, 6 picas = 1 inch;
12 points = 1 pica; and 72 points = 1 inch.
• Determining a suitable line length for readability depends on the design of the specific typeface, type size, line spacing,
and length of the content.

Typographic Standard
What is Typographic Standard?
A typographic standard is a set of rules set by a company or organization when it comes to using typography to represent them.
These rules may concern different aspects of typographic output, such as size, typeface, usage of serif, etc. Different rules may
also be made for different aspects of a text-bearing medium, such as headers and footers, text bodies, and titles. This allows
them to manage a brand (for companies) or identity (for organizations) through typography alone.

Typographic Guidelines
What are Typographic Guidelines?
While typographic standards are rules set for a company or organization, typographic guidelines are considered as the “best
practice” for typography; they are used by designers to adhere to design principles, typographic standards, and other factors
concerning text (readability, theme/mood, alignment, line breaks, etc.).

04 Handout 1 *Property of STI

 student.feedback@sti.edu Page 2 of 3
 IT1905
Common Typographic Guidelines
1. Choose a readable typeface. If it isn’t readable, don’t use it. People will be less likely to read the text if they have to work
hard to read it. As such, consider the following guidelines:
• The most readable type is black text on a white background. This applies to print on paper as well as on a computer
screen. However, this may appear as monotonous to some, so consider other factors before using black or white colors
for text.
• The contrast between the background and the text must be strong. Be knowledgeable about color contrast to facilitate
this.
• The busier the background, the harder it will be to read the text. A solid color is better than a photo with lots of contrast,
texture, and details.
2. Choose a typeface by its “voice” or “theme.” Ask questions on how you want the viewer to feel when reading the text (is it
comical, serious, modern, antique, frivolous, pompous, dignified, sloppy, loud, soft, or elegant?).
3. Consider other visual elements in the graphic design that may affect a typeface’s readability, such as:
• The visual elements’ texture
• The color value/s used
• Any other variances, mostly about the background (changes in shapes, content, color, patterns, etc.)
4. Readability also depends on how the block of text is treated—for example, how the text is aligned. These are the following:
• Left alignment/Flush left is the most common for longer or larger blocks of smaller text (such as text bodies).
• Centered is usually used for larger headlines.
• Justified alignment is common in books, magazines, and newspapers. This is not often used except if the nature of the
contents for the text is professional (such as those related to business).
• Right alignment/Flush right is used in special circumstances usually to correspond to a graphic element on the page.
5. The edges of the block of text (especially the left edge) should have an adequate amount of space between it and the edge
of the image or the edge of a graphic element on the page.
6. The line breaks in the text should follow the meaning of the text. If the text is from a poem or other form of writing that has
line breaks defined by the writer, make sure not to change these line breaks.
7. When placing text on a photograph or other strong visual graphic, it shouldn’t be larger than what is necessary to allow the
visual element to attract the eye first, leading the viewer to read the text then.
8. If text is intended to be read, distort it only when it is strongly called for by the meaning of the text or the nature of the other
graphic elements in the image. Use minimal distortion to maintain readability.
9. Be very careful when mixing typefaces. There must be a strong reason for doing so, such as the subject matter of the text.
To keep the unity of the design when using multiple fonts, carefully design all the typographic elements to work as closely
together as possible.

REFERENCES:
Adobe Photoshop (n.d.). In Techopedia. Retrieved from https://www.techopedia.com/definition/32364/adobe-photoshop
Sherin, A. (2017). Introduction to graphic design. A guide to thinking, processes and style. Retrieved from
https://books.google.com.ph/books?id=VcpBDwAAQBAJ&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=fal
se
Lynda.com (2013). Typography Tutorial: Anatomy: Parts and shapes of type [Video file]. Retrieved from
https://www.youtube.com/watch?v=UPCIdtrDagc
Typographic Guidelines (n.d.). In South Seattle College. Retrieved from https://canvas.southseattle.edu/courses/1332307/pages/typographic-
guidelines
Typographic Measurement (n.d.). In Love of Graphics. Retrieved from https://www.loveofgraphics.com/typography/typographic-measurement/
Designmatic (2018). One Minute Design: What is Font Family? [Video file]. Retrieved from https://www.youtube.com/watch?v=VhoDZfaZrVs

04 Handout 1 *Property of STI

 student.feedback@sti.edu Page 3 of 3