TYPOGRAPHY | TASK 1 - TYPE EXPRESSION AND TEXT FORMATTING

4/4/2023 - 14/5/2023 / Week 1 - Week 6
Lee Wing Kie / 0364251

Typography / Bachelor of Design (Hons) in Creative Media
Task 1 - Exercise 1 & 2

---

LECTURES

Week1: Typo_1_Development

Typography: Development / Timeline

1. Early Letterform Development: Phoenician to Roman

Fig 1.1 Phoenician to Roman

Fig 1.2 Evolution from the Phoenician letter

Writing Direction: 

Phoenician: From right to left (like Semitic peoples).

The Greeks: Developed a style writing called "boustrophedon" (how the ox ploughs), read alternately from right to left and left to right. As they change the direction of reading they also changed the orientation of the letterforms. 

( Semitic people: People in the Middle East such as Jews, Christians and Muslims etc)

Fig 1.3 Boustrophedon, the direction of the writing from the Greeks

** Like the Phoenicians, the Greeks did not use letter space or punctuation. **

Fig 1.4 Greek fragment, stone engraving

Etruscan and Roman marble carvers painted letterforms before carving them. Stroke qualities, such as changes in weight and broadening at start and finish, were transferred to the carved letters. They used a paintbrush to draw on the stone slabs before chiseling the letters on marble, and developed the strokes based on their tools.

Fig 1.5 Late 1st century B.C.E. Augustan inscription in the Roman Forum, Rome

2. Hand script from 3rd - 10th century C.E

Fig 1.6 4th or 5th century: Square Capitals

Square Capitals: Written version can be found in the Roman monuments. Serifs were added to letterforms by using a tool with a slanted edge and a broader tip, resulting in the development of thick strokes with serifs.

Fig 1.7 Late 3rd  - mid 4th century: Rustic Capitals

Rustic Capitals: A compressed version of square capitals, allowed for more words on parchment and were quicker to write, but their compressed form made them slightly harder to read.

Fig 1.8 4th century: Roman Cursive

Roman Cursive: Used for everyday transactions, form was simplified for speed and is the beginning of lowercase letterform.

Fig 1.9 4th - 5th century: Uncials

Uncials: Incorporated some aspects of Roman cursive handwriting. The broad forms of uncials are more readable at small sizes than rustic capitals. 

Fig 1.10 C.500: Half-uncials

Half-Uncials: Half-uncials mark the formal beginning of lowercase letterforms and have ascenders and descenders, dating back to 2000 years after the Phoenician alphabet's origin.

Fig 1.11 C.925: Caloline miniscule

Charlemagne: The first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. Alcuin of York has entrusted this task. The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century.

3. Blackletter to Gutenberg's type 

Fig 1.12 C.1300: Blackletter (Textura)

After Charlemagne's empire dissolved, Blackletter became popular in northern Europe due to its condensed and vertical letterform, while the south preferred a rounder style called "rotunda." The humanistic script in Italy is based on Alcuin's minuscule.

Fig 1.13 C.1455: 42 line bible, Johann Gutenberg, Mainz

Gutenberg had skills in engineering, metalsmithing, and chemistry which he used to create pages that looked like the work of the scribe's hand, specifically Blackletter from northern Europe. He created a type mold that needed a different brass matrix for each letterform.

4. Text type classification

Fig 1.14 Text type classification

Fig 1.15 Text type classification

Week 2: Typo_2_Basic

Typography: Basic / Describing letterforms

Understanding letterform components simplifies typeface identification.

Fig 2.1 Baseline, Median, X-height

Baseline: The imaginary line the visual base of the letterforms

Median: The imaginary line defining the x-height of letterforms

X-heigh: The height in any typeface of the lowercase 'x'

Fig 2.2 Stroke

Stroke: Any line that defines the basic letterform

Fig 2.3 Apex/Vertex

Apex / Vertex: The point created by joining two diagonal stems (Apex above and Vertex below)

Fig 2.4 Arm

Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upwards (K,Y)

Fig 2.5 Ascender

Ascender: The portion of the stem of a lowercase letterform that projects above the median

Fig 2.6 Barb

Barb: The half-serif finish on some curved stroke

Fig 2.7 Beak

Beak: The half-serif finish on some horizontal arms

Fig 2.8 Bowl

Bowl: The rounded form that describes a counter. The bowl may be either open or closed

Fig 2.9 Bracket

Bracket: The transition between the serif and the stem

 

Fig 2.10 Cross Stroke

Cross Stroke: The horizontal stroke in a letterform that joins two stems together

Fig 2.11 Crotch

Crotch: The interior space where two strokes meet

Fig 2.12 Descender

Descender: Letterform that projects below the baseline

Fig 2.13 Ear

Ear: The stroke extending out from the main stem or body of the letterform

Fig 2.14 Ligature

Ligature: The character formed by the combination of two or more letterforms

Fig 2.15 Stress

Stress: The orientation of the letterform, indicated by the thin stroke in round forms

Fig 2.16 Swash

Swash: The flourish that extends the stroke of the letterform

Typography: Basic/The font

Fig 2.17 Uppercase

Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tile, and a/e and o/e ligatures

Fig 2.18 Lowercase

Lowercase: Letters include the same characters as uppercase

Fig 2.19 Small Capitals

Small Capitals: Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set.

Most type software includes a style command that generates a small cap based on uppercase forms. Do not confuse real small caps with those artificially generated.

Fig 2.20 Uppercase Numerals 

Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters.

Fig 2.21 Lowercase Numerals

Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used when ever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif.

Fig 2.22 Italic

Italic: Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Fig 2.23 Italic vs Roman

Fig 2.24 Punctuation, miscellaneous characters

Punctuation, miscellaneous characters: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typefaces. It's important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job. 

Fig 2.25 Ornaments

Ornaments: Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro)

Typography: Basic / Describing typefaces

Fig 2.26 Roman

Roman: The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'

Fig 2.27 Italics

Italic: Named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely are based on roman form of typeface

Fig 2.28 Boldface

Boldface: Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called 'semibold', 'medium', 'black', 'extra bold', or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as 'Poster'

 

Fig 2.29 Light

Light: A lighter stroke than the roman form. Even lighter strokes are called 'thin'

Fig 2.30 List of the typefaces

Typography: Basic / Comparing typefaces

10 typefaces have survived 500 years of design, achieving easy readability and contemporary aesthetics. They continue to be used for decades, and even centuries, reflecting how we think, read, write, and print.

Fig 2.31 Comparing of letter ‘R’

The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward.

Week 3: Typo_3_Text Part 1 

Typography: Text / Tracking : Kerning and Letterspacing

Fig 3.1 Kerning and letterspacing

Kerning: Automatic adjustment of space between letters.

Tracking: The addition and removal of space in a word or sentence.

Letterspacing: To add space between letters.

Fig 3.2 Normal tracking, loose tracking and tight tracking

Fig 3.3 Differences between normal tracking(left) and loose tracking(right)

Fig 3.4 Tight tracking

Typography: Formatting Text

Fig 3.5 Flush left

Flush left: Closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Fig 3.6 Centered

Centered: Centered text format assigns equal weight to both ends of a line, creating a symmetrical and pictorial shape from non-pictorial text. To maintain this shape and avoid a jagged appearance, careful line break adjustments are necessary. 

Fig 3.7 Flush right

Flush right: Places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Fig 3.8 Justified

Justified: Imposes symmetrical shape on the text, achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem.

Typography : Text / Texture

Different typefaces suit different messages. Sensitivity to these differences in color is fundamental for creating successful layouts.

Fig 3.9 Anatomy of a typeface

Fig 3.10 Different typefaces sample

Fig 3.11 Different typefaces sample

Typography : Text / Leading and Line Length

Type size: Text type should be large enough to be read easily at arm's length.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. Type that is set too loosely creates striped patterns that cause distraction.

Line Length: Shorter lines require less leading; longer lines more. Keep the line length between 55-65 characters. Extremely long or short line lengths impair reading.

Fig 3.12 Sample of bad leading

Fig 3.13 Leading and line length sample

Typography : Text / Type Specimen Book

A type specimen book (or eBook for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.

Fig 3.14 Sample Type Specimen Sheet

Week 4: Typo_4_Text Part2

Typography : Text / Indicating Paragraphs

For indicate paragraphs space, we will see the 'pilcrow' (¶), a holdover from medieval manuscripts seldom use today

Fig 4.1 'Pilcrow'

Fig 4.2 Line Space (leading)

'Line Space': Between the paragraphs, if the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text

Fig 4.3 Line Space vs Leading

Typography : Text / Widows and Orphans

Fig 4.4 Widows and Orphans

Window: A short line of type left alone at the end of a column of text

Orphan: A short line of type left alone at the start of new column

Typography : Text / Highlighting Text

Fig 4.5 Examples of highlighting text within a column of text
different kinds of emphasis require different kinds of contract

Fig 4.6 Highlighting text with quotation marks

Fig 4.7 Quotation marks

Quotation marks: Like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom

Typography : Text / Headline within Text

There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled (A, B and C) according to the level of importance

Fig 4.8 A head

A head indicates a clear break between the topics within a section

Fig 4.9 B head

B head here is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif

Fig 4.10 C head

C heads highlight specific facets of material within B head text. They don't interrupt the flow of reading.  C heads in this configuration are followed by at least an em space for visual separation

Fig 4.11 Hierarchy in a sequence of subheads

Putting together a sequence of subheads = Hierarchy 

There is no single way to express hierarchy within text

Typography : Text / Cross Alignment

Fig 4.12 Cross alignment

 
Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms. 

Week 5: Typo_5_Understanding

Typography : Letters / Understanding letterforms

Fig 5.1 Uppercase letterform

The uppercase letterforms suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc

Fig 5.2 Helvetica and Univers

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Typography : Letters / Maintaining x-height

Fig 5.3 x-height razors

X-height: The size of the lowercase letterforms. 

Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig 5.4 Median and Baseline

Typography : Letters / Form / Counterform

Fig 5.5 Form / Counterform

Counterform (or counter): The space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well are the counters handled determines how well the words hang together—how easily we can read what’s been set.

Typography : Letters / Contrast

Fig 5.6 Contrast

The simple contrasts produce numerous variations : small + organic/large + machined; small + dark/large + light

Week 6: Typo_6_Screen&Print

Typography In Different Medium

Print Type VS Screen Type

Type was designed for reading from print long before screen. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.

Fig 6.1 Example: Type for print

Good typefaces for print: Caslon, Garamond, Baskerville. 

Because of their characteristics which are elegant and intellectual but also highly readable when set at small font size.

Fig 6.2 Example: Type for screen

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.

Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

Hyperactive Link/hyperlink

A word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Found in nearly all Web pages. Text hyperlinks are normally blue and underlined by default.

Font size for screen
16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

System Fonts for Screen/Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Fig 6.3 Pixel differential between devices

Pixel Differential Between Devices: The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because they have different sized pixels.

Static VS Motion

Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Fig 6.4 Billboard showing static typography

Motion

Film title credits present typographic information over time, often bringing it to life through animation/motion graphics. Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of the music. It establishes the tone of associated content or expresses a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

---

INSTRUCTION

Task 1: Exercises 1 - Type Expression

For Exercise 1 , we are given a set of words to pick which are then used to create the type of expression. Those words are Rain, Fire, Crush, Water, Dissipate, Freedom, and Sick.

1. Sketches

The 4 words that I choose from the list are "Rain", "Fire", "Freedom" and "Sick".

Fig 7.1 Sketches of my Type Expression (Week 1: 4/4/2023)

2. Digitization 

After feedback from Mr. Vinod on the class, I rework with the words and choose 4 sketches converted into digital with using Adobe Illustrator.

There are only 10 typefaces allowed to used in the entire exercise:

1. Adobe Caslon Pro

2. Bembo Std

3. Bodoni Std

4. Futura Std

5. Gill Sans Std

6. ITC Garamond Std

7. ITC New Baskerville Std

8. Janson Text LT Std

9. Serifa Std

10. Univers LT.

Fig 7.2 First attempt at digitalizing word "Rain" (Week 2: 11/4/2023)

Fig 7.3 Digitized version of the 4 words (Week 2: 11/4/2023)

3. Final Digitalize version

After feedback given by Mr.Vinod, I retouch the word "Sick" and "Freedom"

Fig 7.4 Final digitized sketches of "Rain" "Fire" "Sick" and "Freedom" (Week 3: 18/4/2023)

Fig 7.5 Final Digitized sketches in PDF (Week 3: 18/4/2023)

4. Animation

We were told to animate one of our type expressions from our sketches with using Adobe Illustrator and Photoshop. I choose the words "Rain" and "Freedom" for the first try as I like the design of these two word.

Fig 7.6 Progress of "Rain" in Illustrator (Week 4: 25/4/2023)

Fig 7.7 Progress of "Freedom" in Illustrator (Week 4: 25/4/2023) 

The first attempt, the results of "Rain" and "Freedom" were:

Fig 7.8 Animation of word "Rain" ( Week 4: 25/4/2023)

Fig 7.9 Animation of word "Freedom" ( Week 4: 25/4/2023)

After response by Mr. Vinod's feedback, I made a little adjustment of "Rain" , fill the white gap and make the "Rain" no more gap.

Fig 7.10 Progress of word "Rain" in Photoshop 

( Week 4: 25/4/2023)

It took me 14 frames to make the final Gif. The idea behind my design was to let the effects of storm and wind appear in font.

5. Final Animated Type Expression

Fig 7.11 Final Version Animated Type Expression of "Rain" ( Week 4: 25/04/2023)

Task 1 : Exercise 2 : Text Formatting
For exercise 2, we need to design a final layout that manages different areas of text formatting, including as kerning, letter spacing, alignment, leading and paragraph spacing. We are using Adobe InDesign to complete this exercise.

Lecture 1:4 - Text formatting : Kerning and Tracking

Fig 7.12 Text Formatting without Kerning (Week 5: 02/05/2023) 

Fig 7.13 Text Formatting with Kerning (Week 5: 02/05/2023)

I created each text and changed the kerning and tracking as necessary by using the 10 typefaces that Mr. Vinod provided. The spacing between each letter in the text seems to be better after kerning than when there is no kerning. 

Task 1: Exercise 2 - Text Formatting

Lecture 2:4 - Lecture 4:4A_Text formatting

Notes from lecture videos:

- Font size 8-12pt

- Line length 55-65 characters

- Leading (2, 2.5, 3pt) larger than the font size

- No widows and orphans

- Adjust the kerning and tracking so each paragraph looks smoother / not rough

- No exceed +3/-3 for tracking to reduce ragging 

- Force line space = shift + enter

Fig 7.14 Overall pages progress of text formatting (Week 5: 02/05/2023)

After adjusting the technicalities, I explored different layouts:

Fig 7.15 Layout 1 (Week 6: 09/05/2023)

Fig 7.16 Layout 2 (Week 6: 09/05/2023)

Fig 7.17 Layout 3 (Week 6: 09/05/2023)

Fig 7.18 Layout 4 (Week 6: 09/05/2023)

Fig 7.19 Layout 5 (Week 6: 09/05/2023)

I use the left justify & justify with last line aligned left the body of my text, which makes it look more tidy. I try to use different font sizes until I am satisfied with 10 and leading with 13. The main purpose of these layout is to let me try the context arrangement to get final design idea I want.

Of these five layouts, I liked layout 2 and layout 3 best, because they looked more comfortable and tidy.

Final Text Formatting

Fig 7.20 Final progress of Layout 2 (Week 6: 09/05/2023)

After Mr. Vinoid's feedback, I modified the picture and moved the title to the top.
Layout 2 is the layout I choose for the final outcome of my text format because I think it is more cleaner.

Fig 7.21 Final Text Formatting - Layout 2 (Week 6: 09/05/2023)

    

Fig7.22 Final Text Formatting Layout in PDF ( Week 6:09/05/2023)

Fig7.23 Final Text Formatting with Grids in PDF  ( Week 6:09/05/2023)

Font: Futura Std Medium

Type Size: 10pt

Leading: 13pt

Paragraph spacing: 13pt

Characters per-line: 51 ~ 61 

Alignment: Justify with last line aligned left

Margins: 12.7mm (top), 40mm (bottom), 12.7mm (left, right)

Columns: 4

Gutter: 5mm

---

FEEDBACK

Week 2:

Question

1. Are the explorations sufficient?

2. Does the expression match the meaning of the word?
3. On a scale of 1–5, how strong is the idea?
4. How can the work be improved?

Specific Feedback: 3rd option of "Rain" is acceptable. 

General Feedback: Attempts are overly distorted with the exception of "Rain". 

Week 3:

Question

1. Do the expressions match the meaning of the words?

2. Are the expression well crafted (crafting/lines/shapes)?

 2a. Do they sit well on the art-board

 2b. Are the composition engaging? Impactful?

3. Are there unnecessary non-objective elements present? 

4. How can the work be improved?

Specific Feedback: 'Sick' and 'Freedom' are unacceptable and need to be modified.

General Feedback: The 'Rain' and 'Fire' can be acceptable, but make it bigger a bit.

Week 4:

Specific Feedback: The blank space needs to be modified, it doesn't work when the rain drops down.

General Feedback: Let the rain and wind continue, but fill in the gap.

Week 5:

Question

1. Is kerning and tracking appropriately done?

2. Does the font size correspond to the line-length, leading & paragraph spacing

3. Is the alignment choice conducive to reading?

4. Has the ragging been controlled well?

5. Has cross-alignment been established using base-line grids?

6. Are widows and orphans present?

Specific Feedback: The overall layout looks cleaner, but I suggest putting the title at the top. Smaller pictures can be placed in the upper left corner, and the big picture needs to replaced to a picture that looks similar to the small picture.

General Feedback: Okay, looks clean.

---

REFLECTIONS

Experience: As a novice blogger, I initially felt overwhelmed by the task of creating my own e-portfolio. However, I quickly realized that this was an exciting opportunity to challenge myself and showcase my work in a new format. Although I have struggled with word expression exercises in the past, I have invested considerable time and effort into improving my skills through research and revision. Word expression exercise that I have found particularly enjoyable is creating GIFs of text, which add a dynamic and captivating element to the word expression. I must admit that text formatting exercises have been a bit more challenging, especially when it comes to ragging and kerning. Despite the difficulties I have encountered, I remain determined to perfect my technique, create cleaner, and visually appealing content for these exercises.

Observation: Throughout the course, we will have the opportunity to receive the review and feedback on our work under the guidance of our lecturer, Mr. Vinoid. This collaborative process will provide invaluable insight into areas such as word expression, paragraph spacing, ragging, fonts, kerning & tracking etc. By observing the work of my classmates and their feedback given by Mr. Vinoid, I can gain a deeper understanding of these concepts and refine my own skills accordingly.

Findings: During Task 1, I found it difficult for me to sketch at first because I didn't have much inspiration to create them. But I really appreciate this task, it taught me a lot about expressive words. In particular, I find that making GIFs for expressive words both attractive and enjoyable. Task 1 of the second exercise, introduced me to the technical details of typography, which allowed me to become more detail-oriented and precise in my work. This experience helped me to better understand the nuances of typography, such as kerning and tracking, and apply them in my own work.

---

FUTHER READING

Fig 8.1 Typographic design: Form and Communication

Fig 8.2 Page34: Proportions of the letterform

The importance of the proportions of individual letterforms in typography.
There are four major variables that affect the visual appearance of a typeface are described: stroke-to-height ratio, contrast in stroke weight, expanded & condensed styles, and x-height & proportion.
The impact of each variable is illustrated with examples and comparisons of different typefaces. The proportional relationship between x-height and capital, ascender, and descender heights is particularly significant in determining the optical qualities of typography. 

Fig 8.3 Page 42: Typographic measurement

The measurement system was originally developed for the handset metal type invented by Johann Gutenberg in 1450.
The system has two basic units: the point and the pica.
One inch contains approximately 72 points and six picas. The depth of the type is measured in points, and the height is always uniform, which is called type-high. The width of a piece of type is called the set width, which varies with the design of each individual letter. Before the development of the point and pica system, various sizes of type were identified by names. Type that is 12 point or less is called body type, and sizes above 14 point are called display type. The measurement of point size is a measurement of the metal block of type, including space above and below the letters.