TYPOGRAPHY / TASK 1: Exercises

7.4.2023 - 13.5.2023   l  Week 1 ~ Week 6

Kim Seoyeong    l  0335903

Bachelor of Mass Communication [Digital Media Production]

TYPOGRAPHY

Task 1  l Exercises

LECTURES

Week 1(a): Introduction

• Typography

Typography is the art of arranging words and sentences such that the reader may read them clearly and with aesthetic appeal. It involves typeface appearance, style, and structure, all of which are intended to evoke particular feelings and deliver particular meanings. In other words, typography is what makes the text dynamic. Good typography is an art.

• Terminology 

      - Font: Refers to the individual font or weight within the typeface.

      - Typeface: Refers to the entire family of fonts or weights that share similar characteristics/styles.

Figure 1.1.1    |    Difference between font & typeface (Source: Kontra Agency)

Week 1(b): Development / Timeline

• Early letterform development: Phoenician to Roman

      - Initially writing meant scratching into wet clay with a sharpened stick or carving into stone with a chisel. 

      - Nearly 2000 years of uppercase letterforms can be seen to have evolved out of these tools and materials.

      - Uppercase forms are simple combinations of straight lines & pieces of circles.

      - The Greeks developed a style of writing called 'boustrophedon', which meant the lines of text read alternately from right to left and left to right. 

Figure 1.1.2    |    [Right pic]: 4th century B.C.E. - Phoenicians votive stele Carthage, Tunisia. [Left pic]: Evolution from Phoenician letter

 

Figure 1.1.3    |    Changes in the direction of the writing of the Greeks

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

These were found in Roman monuments. The reed pen was used to create a range of stroke widths, and it was held at an angle that was roughly 60 degrees from perpendicular. 

Figure 1.1.4    |    4th or 5th century: Square Capitals

Rustic capitals took much less time to write and could fit twice as many words on a piece of paper. A 30-degree angle was approximated when holding the pen perpendicularly.

Figure 1.1.5    |    Late 3rd - Mid 4th Century: Rustic Capitals

For writings with some intended use, both square and rustic capitals were usually used. The forms were usually simplified for quickness while writing in cursive. The start of lowercase letterforms is referred to.

Figure 1.1.6    |    4th Century: Roman Cursive

Rustic capitals are less readable at tiny sizes than the broad shapes of uncials.

Figure 1.1.7    |    4th - 5th Century: Uncials

Half-uncials, which indicate the official start of lowercase letterforms, further formalize the cursive hand. the alphabet's development occurred 2000 years ago.

Figure 1.1.8    |    C. 500: Half-uncials

The standardization of all ecclesiastical writings was mandated by the edict of 789, the first unifier of Europe since the Romans. 

Figure 1.1.9    |    C.925: Caloline Miniscule

Blackletter, often known as Textura, is a condensed, sharply vertical letterform that has grown in popularity. The term "rotunda" for a hand that is rounder and more open became popular.

Figure 1.1.10    |    C.1300: Blackletter (Textura)

Gutenberg's skills included engineering, metalsmithing, and chemistry. Blackletter of Northern Europe. His type mold required a different brass matrix, or negative impression, for each letterform.

Figure 1.1.11    |    C.1455: 42 Line Bible, Johann Gutenberg, Mainz

• Text type classification

Typeforms have evolved in reaction to current technological advancements, business demands, and aesthetic trends. Only the primary form of text type is covered by the typeform categorization that follows, which is based on one developed by Alexander Lawson.

The earliest printing type and its form were based on hand-copying styles. 

Figure 1.1.12    |    1450 Blackletter 

Based upon the lowercase forms used by Italian humanist scholars and the uppercase letterforms found inscribed on Roman ruins.

Figure 1.1.13    |    1475 Oldstyle 

Echoing contemporary Italian handwriting, the first Italics were condensed and close-set, allowing more words per page.

Figure 1.1.14    |    1500 Italic

Originally and attempt to replicate engraved calligraphic forms.

Figure 1.1.15    |    1550 Script

A refinement of old-style forms. Thick-to-thin relationships were exaggerated and brackets were lightened.

Figure 1.1.16    |    1750 Transitional 

This represents a further rationalization of old-style letterforms. Serifs were unbracketed and the contrast between thick and thin strokes was extreme.

Figure 1.1.17    |    1775 Modern 

Originally heavily bracketed serif, with little variation between thick and thin strokes.

Figure 1.1.18    |    1825 Square Serif / Slab Serif 

As their name implies, these typefaces eliminated serifs all together. This was first introduced by William Caslon IV in 1816. Sans Serif is referred to as grotesque and Gothic.

Figure 1.1.19    |    1900 Sans Serif

A recent development, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.

Figure 1.1.20    |    1990 Serif / Sans Serif 

Week 2: Basic

Typography uses a variety of technical words, much like any craft that has developed over the course of 500 years. The majority of them describe certain aspects of the letterforms. Knowing a letterform's component parts make it much easier to identify specific typefaces.

• Baseline: The imaginary line is the visual base of the letterforms.
• Median: The imaginary line defining the x-height of letterforms.
• X-height: The height in any typeface of the lowercase 'x'.
• Stroke: Any line that defines the basic letterform.
• Apex/Vertex: The point created by joining two diagonal stems (apex above and vertex below)
• Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
• Ascender: The portion of the stem of a lowercase letterform that projects above the median. 
• Barb: The half-serif finish on some curved stroke.
• Beak: The half-serif finish on some horizontal arms.
• Bowl: The rounded form that describes a counter. The bowl may be either open or closed.
• Bracket: The transition between the serif and the stem.
• Cross Bar: The horizontal stroke in a letterform that joins two stems together.
• Cross Stroke: The horizontal stroke in a letterform that joins two stems together.
• Crotch: The interior space where two strokes meet.
• Descender: The portion of the stem of a lowercase letterform that projects below the baseline. 
• Ear: The stroke extending out from the main stem or body of the letterform.
• Em/en: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.
• Finial: The rounded non-serif terminal to a stroke.
• Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).
• Ligature: The character formed by the combination of two or more letterforms.
• Link: The stroke that connects the bowl and the loop of a lowercase G.
• Loop: In some typefaces, the bowl is created in the descender of the lowercase G.
• Serif: The right-angled or oblique foot at the end of the stroke.
• Shoulder: The curved stroke that is not part of a bowl.
• Spine: The curved stem of the S.
• Spur: The extension articulates the junction of the curved and rectilinear stroke.
• Stem: The significant vertical or oblique stroke.
• Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
• Swash: The flourish that extends the stroke of the letterform.
• Tail: The curved diagonal stroke at the finish of certain letterforms.
• Terminal: The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat ('T' above), flared, acute, ('t' above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

Figure 1.2.1    |    Typography Basics 1 (Source: Creative Market)

• Uppercase: Capital letters, including certain accented vowels, the c cedilla. and n tilde, and the a/e and o/e ligatures.
• Lowercase: Lowercase letters include the same characters as uppercase.
• Small Capitals: Uppercase letterforms drawn to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called an expert set.
• Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.
• Lowercase Numerals: Also known as old-style figures or text figures, these numerals are set to x-height with ascenders and descenders.
• Italic: Most fonts today are produced with a matching italic. Small caps, however, are almost always only Roman. The forms in Italic refer back to fifteenth-century Italian cursive handwriting.

Figure 1.2.2    |    Typography Basics 2 (Source: Havain)

Week 3: Text_Part 1

• Text/Tracking: Kerning and Letterspacing

The term 'kerning' refers to the automatic adjustment of space between letters. It is often mistakenly referred to as 'letterspacing'. Letterspacing means adding space between the letters. The addition and removal of space in a word of sentence is referred to as 'tracking'.

Figure 1.3.1    |    Examples of Kerning

Normal tracking, loose tracking, and tight tracking. 

Figure 1.3.2    |    Examples of Tracking

Flush left: This most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends.
Centered: This imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to the material that is non-pictorial by nature.
Flush right: This format places emphasis on the end of a line as opposed to its start. It can be useful in situations where the relationship between text and image might be ambiguous without a strong orientation to the right.
Justified: Like centering, this imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and between letters.

• Text/Leading and Line Length

Allowing for simple, extended reading is the aim of text typesetting. A field of type should take up the same amount of space on the page as photography does at the same moment.

Type size: It should be large enough to be read easily at arm's length

Leading: Text that is set too tightly encourages vertical eye movement.

Line length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading/ A good rule of thumb is to keep line length between 35-65 characters.

Week 4: Text_Part 2

• Text/Indicating Paragraphs

Pilcrow: The handwritten or typographical mark known as the "pilcrow" is used to designate a paragraph. It is also known as the blind P, paraph, or sign (or symbol) for a paragraph. The pilcrow can be used to indicate a new paragraph in a lengthy piece of writing, as Eric Gill did in his 1931 book An Essay on Typography, or it can be used to start individual paragraphs. Before the concept of visibly distinct paragraphs became prevalent, the pilcrow was a sort of rubrication employed in the Middle Ages to indicate a new train of thought. It denoted a new sentence in several writings from the Middle Ages. 

Line spacing: The distance between text lines in a paragraph is known as line spacing. Lines are usually single-spaced by default, which means that there is a little bit of additional space added to accommodate the largest font that can fit in a line. The amount of space above or below a paragraph is determined by the spacing between paragraphs.

• Text/Widows and Orphans

In traditional typesetting, there are two unpardonable gaffes- widows and orphans. A widow is a short line of type left alone at the end of a column of text. An orphan is a short line of the type left alone at the start of the new column. In justified text, both widows and orphans are considered serious gaffes. Flush right and ragged left text is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable. 

Figure 1.4.1    |    Widow & Orphan

• Text/Highlighting text 

Highlighting text allows a user to move, copy, or cut that selected text. Highlighting an object, such as an icon, also allows it to be cut, copied, deleted, moved, viewed, opened, or otherwise manipulated.

• Headline within text

A Head: It indicates a clear break between topics within a section.

B Head: It indicates new supporting arguments or examples for the topic.

C Head: It is shown in small caps, italics, serif bold, and sans serif bold, and followed by at least an em space for visual separation.

Week 5: Understanding

• Letters/Understading letterforms

The uppercase letterforms below suggest symmetry, but it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form. The uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. 

Figure 1.5.1    |    Non-symmetrical letterforms

• Letters/Maintaining x-height

The x-height generally describes the size of the lowercase letterforms. However, 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.

Figure 1.5.2    |    Maintaing x-height

• Letters/Form/Counterform

Equally crucial to understanding letterforms is the counterform, or the space between each stroke. It becomes even more crucial when working with letterforms without counters, such as the letter 'r'. The way the counters are handled when establishing type affects how nicely words flow together and how simple they are to read.

Figure 1.5.3    |    Counterform

• Letters/Contrast

The basic principles of Graphic Design apply directly to typography. 

Figure 1.5.4    |    Contrast

Week 6: Screen & Print

• Print type VS Screen type

Type for Print: 

- Primarily, the type was designed intended for reading from print long before we read from the screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read. 

- A good typeface for print-Caslon, Garamond, and Baskerville are the most common typefaces that are used for print. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size. 

- They are versatile, easy-to-digest classic typeface, which has neutrality and versatility that makes typesetting with them a breeze.

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 higher x-height, broader letterforms, more open counters, thicker serifs and strokes, less contrast between the strokes, as well as altered curves and angles for some designs.

- Another important adjustment, especially for typefaces intended for smaller sizes is more open spacing.  

Font size for screen: 16 pixels on a screen is about the same size as text printed in a book or magazine.  

Figure 1.6.1    |    Screen VS Print

System Fonts for Screen/Web Safe Fonts: Each device comes with its own pre-installed font selection. 

- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

• Static VS Motion

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

Motion: Temporal media offer typographers opportunities to dramatize type, for letterforms to become fluid and kinetic. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

INSTRUCTIONS

Task 1: Exercises 1 (Type Expression)

 

For the first exercise of task 1, 7 words are chosen during the class. We started to come out and sketch our ideas for at least 3 other designs with my chosen words before we design them digitally using Adobe Illustrator. 

The 7 words given are : 

1. Destroy

2. Split

3. Surprise

4. Love

5. Silence

6. Party

7. Pause

The words that I choose are 'Love', 'Split', 'Destroy', and 'Party' for the first time. Then, we showed the word's expression as typography and it should have each type expression. Below are my idea sketches with the first try-out.

Figure 2.1.1    |    Idea Sketch 1 (Week 2, 14/4/2023)

Figure 2.1.2    |    Idea Sketch 2 (Week 2, 14/4/2023)

After Mr. Vinod's feedback based on our sketches, I choose only 1st draft of 'party' to do digital design because I thought that the others of mine are not unique and not satisfied as well. So I struggled to come out with other designs and started to do digitization my newly chosen 4 words, which are 'Love', 'Split', 'Surprise', and 'Party'. And below is my first try-out digital type expression draft.  

Figure 2.2.1    |    Digital Design Draft for 4 Words (Week 3, 21/4/2023)

In Week 3, I completed an animated word expression using Adobe Illustration and Adobe Photoshop as my first try-out. I decided to choose 'Surprise' among my 4 digital design drafts and started to do animation with it. I tried to make as many frames as much as I can for a smoother and better quality of animation. 

Figure 2.2.2    |    Frame of 'Surprise' Animation (Week 3, 22/4/2023)

And below are my first try-out for the animation of type expression.

Figure 2.3.1    |    First Animated 'Surprise' Try-out, GIF (Week 4, 28/4/2023)

After I showed my work for an animated 'surprise' type expression to Mr. Vinod, I realized that most of my first try-out for 4-word expressions and animation is going wrong and he gave me some feedback on my work. I reworked some of my word expressions and these are my final try-outs with idea sketches and digitalization of my type expressions.

Figure 2.3.2    |    Final Idea Sketch for Type Expression (Week 4, 28/4/2023)

Figure 2.3.3    |    Progress of Type Expression (Week 4, 28/4/2023)

I finally choose 'Party' as my final animated type expression as Mr.Vinod suggests to me to do animation. I thought that 'party' needs some light and dancing objects and I tried to research for a visual reference.

Figure 2.3.4    |    Reference for Animation (Source: Unsplash) 

Then, I tried to apply the reference to my animation and my idea was the glittering and dancing 'party' on the ground without colors. I created about 25 frames in order to look like dancing and then glittering.

Figure 2.3.5    |    Background Layout for Animation (Week 4, 29/4/2023)

After that, I set the timeline with Adobe Photoshop as a frame video to make the animation moves smoother.

Figure 2.3.6    |    Frame of 'Party' Animation  (Week 4, 29/4/2023)

So, below are my final outcomes for type expressions and an animation for each.

Final Type Expression

Figure 2.4.1    |    Final outcome of Type Expression_JPEG (Week 4, 29/4/2023)

Figure 2.4.2    |    Final outcome of Type Expression_PDF (Week 4, 29/4/2023)

Final Animation of Type Expression

Figure 2.4.3    |    Final outcome of Animation_Type Expression_GIF (Week 4, 29/4/2023)

Task 1: Exercises 2 (Text Formatting)

 

For our 2nd exercise, we are given incremental amounts of text that cover various aspects of text formatting, such as font selection, type size, leading, line length, paragraph spacing, forced line breaks, alignment, kerning, widows and orphans, and cross-alignment. Firstly, we tried to edit our name with the given fonts to try kerning and tracking. 

Figure 2.5.1    |    Kerning & Tracking Exercises  (Week 4, 28/4/2023)

For the text formatting layout, I created my first try-out with the given script and fonts.  

Figure 2.6.1    |    First Text formatting Layout_JPEG  (Week 5, 5/5/2023)

After some feedback, I realized that I need to change the overall design and layout.

I tried to search for a visual reference for text formatting.

Figure 2.6.2    |    Reference for text formatting  (Week 5, 5/5/2023)

I struggled with having a well-balanced layout and rhythmic flow. I set my layout formatting with the below:

Figure 2.6.3    |    Setting for the layout  (Week 5, 5/5/2023)

• Final Text Formatting

HEAD 

Font: ITC Garamond Std (Ultra Condensed)

Type size: 72 pt

Leading: 86.4 pt

Paragraph spacing: 0

AUTHOR NAME

Font: Univers LT Std (57 Condensed)

Type size: 20 pt

Leading: 24 pt

Paragraph spacing: 0

IMAGE DESCRIPTIONS 

Font: Serifa Std (46 Light Italic)

Type size: 8 pt

Leading: 9.6 pt

Paragraph spacing: 0

BODY 

Font: Futura Std (Medium)

Type size: 10 pt

Leading: 12 pt

Paragraph spacing: 12.5 pt

Characters per line: 59

Alignment: Left justified

MARGINS: 13 mm: Top + Left + Right, 18 mm: Bottom 

COLUMNS: 4

GUTTER: 5 mm

I set all the elements as my design layout and then I tried to organize it with some minor changes. I opted for left-justified alignment and adjusted the kerning and tracking of the text. 

Figure 2.7.1    |    Progress of Kerning & Tracking (Week 5, 6/5/2023)

Figure 2.7.2    |    Progress of Kerning & Tracking  (Week 5, 6/5/2023)

After all, these are my final outcomes: text formatting as JPEG & text formatting with grid/guideline.

Final Text Formatting

Figure 2.8.1    |    Final outcome of Text formatting_JPEG  (Week 5, 6/5/2023)

Figure 2.8.2    |    Final outcome of Text formatting_PDF  (Week 5, 6/5/2023)

Final Text Formatting With Grid/Guidelines

Figure 2.8.3    |    Final outcome of Text formatting_JPEG  (Week 5, 6/5/2023)

Figure 2.8.4    |    Final outcome of Text formatting with Grid/Guideline_PDF  (Week 5, 6/5/2023)

FEEDBACK

Week 2: 

General Feedback We should use fewer graphic elements because most of the sketches are too illustrated and each letter(alphabet) shouldn't disturb each other. We are not allowed to color the letter and avoid changing an overall graphical shape instead of the letter.

Specific Feedback Most of my sketches aren't suitable since it is too illustrated and disturb each alphabet. And some of my word expression ideas don't match the meaning of the word either.

4 Questions to ask myself:

 1. Are the explorations sufficient?
 Yes, I did some visual research on the exact meaning of the typography compared to the illustration. 

 2. Does the expression match the meaning of the word? 
 Love: Half yes, there is expression but it is too illustrated.
 Split: Yes, it matches but needs to express one point.
 Destroy: No, most of the expressions are not matched to the word's meaning. 
 Party: Yes, it matches well with an improvement.

 3. On a scale of 1-5, how strong is the idea?
 Love: 3
 Split: 4
 Destroy: 2
 Party: 4.5

 4. How can the work be improved? 

 I can improve my design following the given specific feedback.

Week 3: 

General Feedback We need to focus on using the typeface for expression and try to use fewer graphical elements. We need to watch the video for type animation for a better understanding.

Specific Feedback I should rework 'Split' and 'Surprise' because it is not suitable at all to convey their own word's meaning with my expression For 'Surprise', face emotion on the word can't be the expression as an expression animation. 'Love' is allowable since the shape is created as a heart with the given font. 'Party' can be the easiest one to go with frame animation to express the word's meaning.

Week 4: 

General Feedback We need to pause for 2-3 seconds to show the final word expression at the end of the animation. The more frames I create, the better quality will be shown as animation to make it smoother.

Specific feedback The word 'Surprise' as an animation doesn't work well for the word expression. The facial emotion that I created isn't enough to express and it is not approved. And I should change my word expression to act out itself.

Week 5: 

General Feedback For type formatting, We can't size the headline differently for the title design, and I should follow the column that I set. Moreover, the headline, the byline, and of course, the text should not be the same size because it looks like the same line when we see it.

Specific feedback Text should be bounded in each format(column) but the images can be freely designed. Each word of the title should be the same size and it is better to have 55-65 words as each line length as a paragraph. Furthermore, try not to make too many blanks as per words and for the suggestion, crossline is a good line setting for the formatting.

REFLECTIONS

Experience

When I started taking typography classes, I thought this module would be easy, but it wasn't thorough. I had to study quite a few things and after learning more about it, I learned and learned a lot. While listening to various references and videos of the professor's lecture, I found that this was quite helpful in the assignment, and through that, I was able to carry out the assignment and develop myself little by little. In exercise 1: Type Expression, we had to design to convey and express the meaning of the text on the condition that limited fonts and text could not be distorted. In addition, Excellise 2: Type formatting had to create a page layout design with various elements. This was a pretty difficult activity and it required a lot of references and visual references to carry out this task. Creating original designs was also difficult, but I think I did a good job with fun.

Observations

During this assignment, I learned that there are a lot of terms and information that I have to familiarize myself with in order to create a single typography. Also, I got to know what I should be careful about when I make one design. Through the lecture video, I learned about the history of typefaces, the specific contents of font, tracking, kerning, and changes in font and typeface. Every week we had to show the progress of the assignment to the teacher and change or improve my design according to his specific feedback. I can say that it has certainly helped me improve, confirming that I am doing well on my assignment.

Findings

Through this task, I found that it takes a lot of time and effort to create 1 great typography, and I have to follow a lot of details when I create a single design. And I have to create it with a lot of rules and factors. Through this activity, I have acquired information about typography, which I believe will be helpful while doing other design works. 

FURTHER READING

1

Typography can be an intimidating subject but it doesn't have to be. And it is the style or appearance of the text. 

Figure 3.1.1    |    What is typography?  (Article)

• Display Fonts

Display fonts come in many different styles, like script, blackletter, all caps, and just plain fancy. Display typefaces are ideal for short amounts of text, such as titles and headers, as well as more graphic-heavy designs because of their decorative character.

Figure 3.1.2    |    Display fonts  (Source: GCFGlobal)

• Hierarchy

It is used to guide the reader's eye to whatever is most important. It shows them where to begin and where to go next using different levels of emphasis. 

Decide the components you want the reader to focus on first, then make those elements stand out. This is how hierarchy is established. Larger, bolder, or otherwise distinctive things are typically used for high-level items. Recall to keep things straightforward and to stay with a limited number of complementary styles.

2

Figure 3.2.1    |    Typographic design: Form and communication, Rob Carter (2015) 

• Typography on Screen

The need of maintaining typographic integrity in this environment grows as more designers get involved in the on-screen design. Screen sizes, screen resolutions, and new forms of interactivity are all undergoing rapid change, which makes it difficult to do so.

• Antialiasing

Antialiasing is the process of reducing the sharpness of drawn text and visuals' edges in order to enhance their look or readability. You can render both low- and high-quality antialiased text using the managed GDI+ classes.

• Hinting

Hinting is the procedure of putting programmatic data in a font file to assist text rendering software depict a typeface readable at small sizes, on low-resolution screens. Hinting was a major difficulty while working with type on screen up until recently, with the introduction of high-resolution displays.

• Line length and interline spacing

Line length: It is the breadth of a block of typeset text in typography. It is typically measured in length units like inches, points, or characters per line (in which case it is a measure). There is a maximum line length for a block of text or a paragraph that works with a specific design. 

Interline Spacing: The amount of vertical space between text lines in a paragraph is determined by line spacing. Lines are typically single-spaced, which allows for the largest font on that line plus a modest amount of extra space.

Figure 3.2.2    |    Line Length & Interline Spacing (p.142) 

• Legibility Factors

"The legibility of a typeface is related to the qualities inherent in its design, which relate to the ability to distinguish one letter from the other," "X-height, character shapes, stroke contrast, the size of its counters, serifs or lack of serifs, and weight" are some aspects of type design that have an impact on legibility. Font selection, angular size (point size vs. viewing distance), kerning, cases utilized, tracking, line length, leading, and justification are further typographic characteristics that influence legibility.

Figure 3.2.3    |    Legibility factors (p.167)