Typography Principle

TYPOGRAPHY P R I N C I P L E

Lê Khoa

S u b j e c t : Ty p o g r a p h y

SE 62340

Instruc tor: Nguyễn Long

TABLE OF CONTENT INTRODUCTION 03

1. ANATOMY OF TYPE

06

2. TYPEFACE VS FONT

10

3. TYPE FAMILY

12

4. X – HEIGHT

14

5 . KERNING – TRACKING - LEADING

18

6 . TYPE SIZE

20

7. ALIGNMENT

Typography Principle 3 // 22

INTRODUCTION

Typography is a central component of design. It gives us an understanding of the heritage behind our craft. It’s one of the primary ways we, as a society, pass on information to others. Imagine a website, a magazine or even TV without text.

Typography is a subject that raises passions and it can become a consuming obsession. If this subject is relatively new to you, or perhaps something you want to know more about, then this guide can start you on that journey.

Typography Principle 4 // 22

01

ANATOMY OF TYPE

Typography Principle 5 // 22

Baseline

Descender line

Typography X-height

Baseline: is the line upon which most letters “sit� and below which descenders extend Descender line: The invisible line marking the lowest point of the descenders within a font

X-height: This shows the height of lowercase letters (excluding ascenders and descenders). It is t ypically measured using the height of the letter.

Cap height

Mean line: al so called the midline, is half the distance from the baseline to the cap height.

A scender line: This line shows where the top of letters such as k and h touch. Strangely, in a lot of cases, this line is slightly Cap height: This marks the top of capital letters.

A scender line

Meanline

Typography Principle 6 // 22

02

A font is what you use A typeface is what you see.

TYPEFACE &FONT

Typography Principle 7 // 22

T YPE FACE In t ypography, a t ypeface is a set of one or more fonts each composed of glyphs that share common design features.

Each font of a t ypeface has a specific weight, st yle, condensation, width, slant, italicization, ornamentation, and designer or foundr y.

FONT

In metal t ypesetting, a font is a par ticular size, weight and st yle of a t ypeface. Each font was a matched set of t ype, one piece for each glyph, and a t ypeface consisting of a range of fonts that shared an overall design.

In modern usage, with the advent of digital t ypography, “font” is frequently synonymous with “t ypeface”, although the t wo terms do not necessarily mean the same thing. In par ticular, the use of “vector” or “outline” fonts means that dif ferent sizes of a t ypeface can be dynamically generated from one design.

Typography Principle 8 // 22

TYPOGRAPHIC STYLES

Typography Principle 9 // 22

SERIF Old st yle Transitional Modern Slab serif

G

SANS SERIF

A GA Humanist Geometric

DISPL AY Script Blackletter

“Flowers

Typography Principle 10 // 22

03

TYPE FAMILY

A t ype family consists of a group of related t ypefaces, unified by a set of similar design characteristics. Each face in the family is individual, and each has been created by changing visual aspects of the parent font. In general, t ype families consisted of three fonts: the regular roman face, a bolder version, and an italic.

Typography Principle 11 // 22

Helvetica Light Helvetica Light Oblique Helvetica Rounded Helvetica Rounded Black

FAMILY OF HELVETICA

Helvetica Neue Helvetica Neue Condensed Bold Helvetica Compressed Helvetica Ultra Compressed

Typography Principle 12 // 22

04

X-HEIGHT

The height of lowercase letters reach based on height of lowercase x; does not include ascenders or descenders. In t ypography, x-height is the distance bet ween the baseline of a line of t ype and tops of the main body of lower case letters

Typography Principle 13 // 22

X-Height

X-Height

Times New Roman

Helvetica World

The height of lowercase letters reach based on height of lowercase x; does not include ascenders or descenders. In typography, x-height is the distance between the baseline of a line of type and tops of the main body of lower case letters

The height of lowercase letters reach based on height of lowercase x; does not include ascenders or descenders. In typography, x-height is the distance between the baseline of a line of type and tops of the main body of lower case letters

Typography Principle 14 // 22

05

KERNING TRACKING LEADING

Typography Principle 15 // 22

KERNING

describes the amount of space bet ween t wo characters.

KERN Kerning al so is the ar t of adjusting the space bet ween characters so that the eye can flow easily across the copy without being distracted by discrepancies.

Typography Principle 16 // 22

TR ACKING

(letter-spacing)

Is the space bet ween groups of characters. Tracking can be described as being loose or tight. Loose tracking is when the letters have a larger distance bet ween them.

Tight tracking is when the letters are closer.

Tracking has similar guidelines as leading, and all of these best practices are tied to readabilit y.

TR ACKING SET

-75 0 75

Typography Principle Typography Principle Typography Principle

Typography Principle 17 // 22

LEADING

Describes the amount of space bet ween lines of text. You can measure leading by obtaining the distance bet ween t wo baselines. Leading is power ful. It can af fect how readable long blocks of text are.

L E ADING

Leading

When you decrease leading, lines get closer to each other, making a block of text appear more compacted. Lowering the amount of leading can cause descenders and ascenders to collide, and this could have an adverse ef fect on readabilit y.

But as a visual st yle, low amounts of leading can increase the pace of the reader and invoke the feeling of cramped conditions and claustrophobia, which can be desired when you are using t ype in this expressive manner.

Increasing leading can reduce the pace of a piece of text; it can slow the reader by introducing more white space. It can display a more relaxed feel in text blocks. Too much leading can cause continuit y problems, as the eyes of the reader is required to travel a greater distance bet ween lines of text.

Typography Principle 18 // 22

06

TYPE SIZE

Typography Principle 19 // 22

The point system is the standard unit of measurement for t ype.

Since each size of a t ypeface had to be cut individually, point size was determined by the distance from the height of the tallest ascender to the tip of the longest descender, plus a wee bit more.

In general, 8pts – 12 pts is the good for text reading, from over 14pts is the size for title.

Typography Principle 20 // 22

07

In t ypesetting and page layout, alignment or range, is the setting of text flow or image placement relative to page, column (measure), table cell or tab. The t ype alignment setting is sometimes referred to as text alignment, text justification or t ype justification.

ALIGNMENT

Typography Principle 21 // 22

FLUSH LEFT

FLUSH RIGHT

The text is aligned along the lef t margin or gutter, al so known as lef taligned, ragged right or ranged lef t

The text is aligned along the right margin or gutter, al so known as rightaligned, ragged lef t or ranged right

JUSTIFIED Text is aligned along the lef t margin, and letter- and wordspacing is adjusted so that the text fall s flush with both margins, al so known as fully justified or full justification

CENTERED Text is aligned to neither the lef t nor right margin; there is an even gap on each side of each line.

THANK YOU FOR INTEREST