Typography - Task 1 : Exercise

26.9.2023 - 27.10.2023 ( Week 1 - Week 5 )

Angel Tan Xin Kei / 0356117 / Bachelor of Design in Creative Media

Typography / GCD60104

TASK 1 

---

Table of Contents 

• Lectures
• Instructions
• Task 1: Exercise
• Feedback
• Reflection
• Further Reading

---

LECTURES

Week 1 Introduction to the module

Typo_0_Eportfolio Briefing

At the very beginning week, Mr Vinod and Ms Low started the lessons by briefly explaining the overall modules and all the important notices regarding learning platforms. By watching the recordings, we were taught how to create a personal blog to compile art projects and jot down the learnings throughout our design journey.

Typo_0_Introduction 

From this lecture, I have gained an insight into the development and timeline of typography and learned how the art of typography has been democratised from calligraphy →lettering, and typography over the 50 decades. Simply fast forward to nowadays, where typography is mainly associated with both the digital design world and print. By kicking off with the basics, I understand that :

• Font: individual fonts or weight within the typeface  
• i.e. Roboto Regular , Roboto Italic & Roboto Bold

• Typeface: an entire family of fonts or weights that share similar characteristics or styles
• i.e. Roboto, Arial, Helvetica, Times New Roman, Comic Sans, Futura, etc.

      

Figure 1.1.1 Difference between typeface and font

1.2 Typo_1_Developement

In earlier years of Phoenician to Roman, 

• letterforms were meant to be scratched out from wet clay and sharpened stick through carving into stone with a chisel, the main forms were simple combinations of lines and circles.

Figure 1.2.1 Phoenician votive stele Carthage & Evolution from Phoenician letter

• Then, the Greeks changed the direction of writing from left to right, originally Phoenicians, like other Semitic people wrote invertedly from right to left. As they changed the direction of reading, the orientation of letterforms changed alternately.

Figure 1.2.2 Greek's left-to-right handwriting

• Etruscan carvers inscribed the letterforms with certain quality changes in weight from vertical to horizontal, broadening strokes at start and finish.

Figure 1.2.3 Augustan inscription in Rome,Forum at late 1st Century B.C.E.

Figure 1.2.4 Early letterform development

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

• Square capitals are a more compressed version of square capitals which allowed twice as many words on a sheet of parchment and then reduced writing time.

• The pen and brush were held at an angle of 30 °. Although rustic capitals were faster and easier but slightly harder to read due to their compressed nature.

• Both square and rustic capitals are mostly for intended performance. 

• Everyday transactions were typically written in cursive, simplified for speed.

• Uncials originated from the Latin word 'Uncia' which means a twelfth of anything which means small letters. Broader forms of uncials are more readable than rustic capitals

• Half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders.

• Charlemagne was the first unifier of Europe since the Romans. The monks rewrote the texts using both majuscules, minuscule, capitalization,             and punctuation which set the standard for calligraphy for a century. 

Figure 1.2.5 Rustic Capitals

Figure 1.2.6 Roman Cursive

Figure 1.2.7 Uncials

Figure 1.2.8 C500 Half-uncials

Figure 1.2.9 C295 Caloline miniscule

Blackletter to Gutenberg's type

• With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script.
• In northern Europe, a condensed strongly vertical letterform gained popularity 
• In southern Europe, rounder more open hand gained popularity
• Gutenberg's skills included engineering, metalsmithing, and chemistry. His type mold required a different brass matrix or negative impression

                  

                Figure 1.2.10 C1300 Blackletter (Textura)                                  Figure 1.2.9 C1455: 42 line bible, Johann Gutenberg & Mainz

 

Figure 1.2.10 Text Type  Classification: Timeline / Development

Week 2 The evolution of typography

Lecture: Typo_3_Text_P1

Tracking refers to the addition and removal of space in a word or sentence. 

• Kerning refers to automatic adjustment of space between letters ; 
• Letter spacing refers to adding space between letters.

Figure 2.1.1 Application of Kerning and Without Kerning

Figure 2.1.2 Normal tracking, loose tracking, and tight tracking

Designers always letter space uppercase letters to be able to stand on their own whereas lowercase letterforms require a counter form created between letters to maintain a line of reading. 

Figure 2.1.3 The difference between normal, loose, and tight tracking

Flush Left: Each line starts at the same points but ends wherever the last word ends ( ragged right). Spaces between words are consistent throughout the text which creates an even grey value.

Figure 2.1.4 Left-flushed text

Centered: This format symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms the field into shape, thereby adding a pictorial quality material. It is essential to amend line breaks so it does not jagged.

Figure 2.1.5 Centered-text

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

 

Figure 2.1.6 Right-flushed text

Justified: Like centering but imposes expanding or reducing spaces between words between letters, which results in the openness of lines, sometimes a river of white space running vertically through the text.Required careful attention to line breaks and hyphenation.

Figure 2.1.7 Justified-text

A typographer's first job is to have a clear, appropriate presentation of the author's message. Avoid a type that calls attention to itself before the reader can read the word.

Figure 2.1.8 Types that are interference and expressed clearly

It is vital to know which typeface best suits the message at hand and sensitive to the differences in color is fundamental for creating successful layouts.

• Generous x-height or relatively heavy strokes produce darker mass
• Type size: The text type should be large enough to be read easily at arm's length.
• Leading: text type should be large enough to be read easily at arm's length.
• Line length: appropriate leading for text is as much a function of line length as it is a question type size for leading. A good rule of thumb is to keep the line length between 55-65 characters.

Figure 2.1.9 Introduction to Parts of Text

Figure 2.2.1 Text Type in Paragraph

Figure 2.2.2 Text Type in Paragraph

A type specimen book is to provide an accurate reference for type, type size, type leading, type line length,                                           etc.

Figure 2.2.3 Sample Type Specimen Sheet

Compositional Requirement: Text should create a field that can occupy a page or a screen. Think of the ideal text as having a middle gray value not a series of stripes.

Figure 2.2.4 10 fonts

Figure 2.2.5 Sample of Compositional Requirement in Book

Week 3 Type structure, family, and anatomy

Lecture: Typo_4_Text P2

The ‘pilcrow’ (¶), is a holdover from medieval manuscripts that can be used to indicate paragraphs.

 ‘Line space’ (leading*) is between the paragraphs to ensure cross-alignment across columns of text. Hence if the line space is 12pt, then the paragraph space is 12pt. 

 

                Figure 3.1.1 Sample of   ‘pilcrow’  used                     Figure 3.1.2 Sample of   ‘pilcrow’  used

Figure 3.1.3 line space vs leading

The standard indentation is seen in this sample. In this case, the indent is often the same size as the line spacing or the text's point size.

Figure 3.1.4 Sample of standard indentation

Below are some examples of extended paragraphs that produce abnormally wide text columns. There may be compelling compositional or functional arguments to select it despite these issues.

Figure 3.1.5 Sample of extended paragraph

There are two mistakes in classical typesetting (the kind that is still used by ethical commercial publishers): widows and orphans. To prevent the occurrence of the aforementioned, designers (particularly those who work with extensive amounts of text in websites, books, printed magazines, online journals, or online magazines) must take considerable care.

Widow: is a short line of type left alone at the end of a column of text. 

Orphan: is a short line of type left alone at the start of a new column.

Figure 3.1.5 Sample of extended paragraph

Both widows and orphans are regarded as major errors in the justified text. Text with ragged left and flush right edges is slightly more understanding of widows. Orphans are still impermissible. 

The only way to avoid widows is to rebreak all of your line endings such that no paragraph's final line stands out as noticeably shorter.

You could anticipate that orphans need greater attention. Typographers take great care to ensure that no text column begins with the final line of the paragraph before it.

Following are some simple examples of how to highlight text within a column of text. Different kinds of emphasis require different kinds of contrast.

Figure 3.1.6 Sample of different kinds of emphasis

In this example, the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5

Figure 3.1.7  example of the sans serif font (Univers) has been reduced

I reduce aligned figures (numbers) or All Capital acronyms embedded in text by .5 as well, to ensure visual cohesion of the text.

Figure 3.1.8 8 text = 8 points numbers

It is important that preserving the left reading axis (right example) of the text ensures that readability is at its optimum when highlighting text by inserting a field of color at the back of the text. 

Figure 3.1.9  Preserving the left reading axis (right example) of the text

It is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis.

Figure 3.1.10 Preserving typographic elements outside the left margin (right example) of the text

Similar to bullets, quotation marks can produce a noticeable indent, breaking the left reading axis. The full quotation is at the bottom; contrast it with the indented quote at the top.

Figure 3.1.11 Sample of  indent

Note that a prime is not a quotation. The prime is an acronym for both feet and inches. They were substituted since a typewriter only had so many keys. Later, they came to be known as "dumb quotes." They are not merely stupid but also unlawful when used as quotes in typesetting nowadays.

Figure 3.1.12 Lists of typographic elements

A head indicates a clear break between the topics within a section. In the following examples ‘A’ heads are set larger than the text, in small caps and in bold. The fourth example shows an A head ‘extended’ to the left of the text.

Figure 3.1.12 Lists of typographic elements

The B head here is subordinate to the A head. 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.

Figure 3.1.13 Samples of  head topi8c

The C heads highlight specific facets of material within the B head text. They do not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold, and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.

Figure 3.1.14 Lists of typographic elements

Putting together a sequence of subheads = hierarchy.

Obviously, there is no single way to express hierarchy within text; in fact, the possibilities are virtually limitless.

Figure 3.1.15 Lists of express hierarchy within the text

Cross-aligning headlines and captions with text type reinforce the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms. In this example, four lines of caption type (led to 9 pts.) cross-aligned with three lines of text type (led to 13.5 pts).

Figure 3.1.16 Cross-aligning headlines and captions 

Below, one line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.

Figure 3.1.17 Headline type cross-aligns

Week 4 Type application

Lecture: Typo_2_Basic

It is benificial to familiarise with texicon and knowing the letterform's component parts to make it 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'

Figure 4.1.1

Stroke: Any line that defines the basic letterform

Figure 4.1.2

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

Figure 4.1.3

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

Figure 4.1.4

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

Figure 4.1.5

Barb: The half-serif finish on some curved stroke.

Figure 4.1.6

Beak: The half-serif finish on some horizontal arms.

Figure 4.1.7

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

Figure 4.1.8

Bracket: The transition between the serif and the stem.

Figure 4.1.9

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

Figure 4.1.10

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

Figure 4.1.11

Crotch: The interior space where two strokes meet.

Figure 4.1.12

Descender: The portion of the stem of a lowercase letterform that projects below the baseline.

Figure 4.1.13

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

Figure 4.1.14

Em/en: Originally referred 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.

Figure 4.1.15

Finial: The rounded non-serif terminal to a stroke.

Figure 4.1.16

Leg Short: stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R)

Figure 4.1.17

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

Figure 4.1.18

Link: The stroke that connects the bowl and the loop of a lowercase G.

Figure 4.1.19

Loop: In some typefaces, the bowl is created in the descender of the lowercase G

Figure 4.1.20

Serif: The right-angled or oblique foot at the end of the stroke.

Figure 4.1.21

Shoulder: The curved stroke that is not part of a bowl.

Figure 4.1.22

Spine: The curved stem of the S.

Figure 4.1.23

Spur: The extension articulates the junction of the curved and rectilinear stroke.

Figure 4.1.24

Stem: The significant vertical or oblique stroke.

Figure 4.1.25

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

Figure 4.1.26

Swash: The flourish that extends the stroke of the letterform.

Figure 4.1.27

Tail: The curved diagonal stroke at the finish of certain letterforms

Figure 4.1.28

Terminal: The self-contained finish of a stroke without a serif

Figure 4.1.29

Uppercase:

Figure 4.2.1

Lowercase:

Figure 4.2.2

Small Capitals: 

Figure 4.2.3

Uppercase Numerals :

Figure 4.2.4

Lowercase Numerals :

Figure 4.2.5

Italic:

Figure 4.2.6

Italic vs Roman:

Figure 4.2.7

Punctuation, miscellaneous characters:

Figure 4.2.8

Ornaments:

Figure 4.2.9

Roman: A slightly lighter stroke will be known as Book

Figure 4.2.10

Italic: 

Figure 4.2.11

Boldface: Depending upon the relative stroke widths within the typeface, it can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super

Figure 4.2.12

Light: 

Figure 4.2.13

Compressed: often called ‘compressed’.  

Figure 4.2.14

Extended: 

Figure 4.2.15

Describing typefaces: 

Figure 4.2.16

The 10 typefaces: 

Figure 4.2.17

Comparing typefaces :

Figure 4.2.18

Week 5 Principles of Typography

Typo_5_Understanding

From this lecture, I have gained

• Comparison of letterform
• Maintaining the x-height
• Form / Counterform
• Contrast in various variations: small+organic / large+machined

Fig 5.1.1. Contrast in Text

INSTRUCTIONS

Task 1 Exercise ( 20% ) - Individual Assignment

Exercise : 

1. Type Expression
2. Text Formatting

Marking Criteria : 

• Each expression has been explored with a great variety of ideas. All the expressions are perfectly matched in meaning. The typographic solutions are extremely well-composed and balanced. The expression is excellently crafted (technical), memorable and engaging. The textual information is extremely well formatted (font size, line length, leading, alignment, cross alignment, reading rhythm, information hierarchy, sans widows and orphans).

Learning Goals : 

• To be able to compose and express using textual information.
• To be able to format text for effective communication

Timeframe : 

• Week 1 – Week 5 (Deadline on Week 6)

Find out more info below...

<iframe src="https://drive.google.com/file/d/1Ag6NhSDF7acm8IrbpptXZl1gdWf31tSa/preview" width="640" height="480" allow="autoplay"></iframe>

---

Exercise

Type Expression

Compose and express the given 4 words. To begin with, sketch out the idea's own creativity. During digitization, will be given a selection of ten typefaces to work with after the concepts have been chosen. Through iteration, compose the letters in a way that becomes visible — still and in motion. 

Software: Adobe Illustrator and Adobe Photoshop.   

1. Research

Given variety of words : Chaos; Spring; Dive; Bounce; Float; Crush 

The words that I have chosen are Float, Bounce, Spring, and Crush. Therefore, I started getting my idea by searching the keywords given mainly from Pinterest, Behance, TikTok, and Google. Below are my words and inspiration ( image link provided inside the file below ) :

2. Sketches

As instructed, I first began to portray my ideation digitally using Adobe Illustrator : 

Figure 1.3.1 Sketches of my idea

Figure 1.3.2 Sketches of my idea

                      

                          

Figure 1.3.3 Sketches of my idea

Specific Feedback from Lecturers: 

Crush: #1 and #4 were quite good but the others contained a little bit of graphic elements and distortion.

Bounce: #1 and #2 were fine but the third was too distorted and the first one was too common and can be refined for a better outcome.

Spring: #1 was creative as expressed in terms of seasons spring with a flower pattern but should be re-examined without transformation of font whereas #2 is 3D and couldn't be accepted and #3 was pictorial.

Float: #1 and #4 were great but #2 was distorted and #3 3D couldn't be accepted with pictorial.

3. Digitisation

After listening to the feedback from Ms Low and Mr. Vinod, I have amended several times and modified the expression of words, refraining from over-distorting and pictorial elements like previous work. 

Float 

  

Figure 1.4.1 Digitisation for Float, Week 2 (4/10/2023)

To begin with, I used the font Univers LT Std 75 Black for the word float. I enlarged the font size to align with the margin of the box. Instead of flattening it in 3D, I made it 2D but made the alphabet upward and downward like there is buoyancy on water. In addition, I input multiple O's as if it is bubbling and floating in the water.

Bounce

    Figure 1.4.2 Digitisation for Bounce, Week 2 (5/10/2023)

In terms of the word "Bounce," I employed the Gill Sans Semi Bold font. I proceeded to rotate the letters 'B,' 'U,' 'N,' 'C,' and 'E,' while the letter 'O' retained its original orientation, essentially creating the visual impression of a bouncing ball. Also, added some curve lines to make it compatible.

Spring

Figure 1.4.3 Digitisation for Spring, Week 2 (6/10/2023)

Concerning the term "spring," I opted for the utilization of the Futura Condensed Medium typeface. Subsequently, I embarked on a creative journey where I duplicated and arranged the letters radially, resulting in a configuration reminiscent of a blossoming flower.

Crush

Figure 1.4.4 Digitisation for Crush,, Week 2 (7/10/2023)

In the context of the term "crush," my choice leaned toward the utilization of the ITC Garamond Std Ultra Narrow typeface. This design journey then led me to employ an intriguing technique involving the path feature. I divided the words into several distinct slices and orchestrated their arrangement in a manner that initiated a striking breakout effect, thereby adding an element of visual intrigue to the composition.

Finish Attempt

Figure 2.5.1 Final Digitisation of Type Expression, Week 2 (9/10/2023)

In my opinion, spring has two meanings which are the season and the metallic thing, to bring out the effect of both meanings, I made the word 'spring' pop out as a bouncing metallic and then rotate in a radial way to express it as a petal of flowers. Afterwards, replicate it in a different degree to show that it actually rotates in a clockwise direction which is similar to a flower falling in a spring season.

To bring out the effect of the words spinning, I repeated more layers to it. For each layer, I rotated the word clockwise then imported the frames into Photoshop and made each screen 0.1s. 

Figure 3.3.1 Spring Frame, Week 3 (9/10/2023)

Figure 3.3.2 Spring Final, Week 3 (9/10/2023)

Figure 3.3.3 Spring Final, Week 3 (9/10/2023)

Text Formatting

In Exercise 2, we will need to develop a final layout of text formatting by working with typefaces, kerning , type size, leading, line length, etc. To precede this task, we first need to learn to apply the concepts of kerning and tracking for our name as a practise, then apply it throughout our design process.

Software: Adobe InDesign 

1. Kerning and Tracking Exercise

Figure 4.2.1 Without Kerning, Week 4 (20/10/2023)

Figure 4.2.2 With Kerning, Week 4 (20/10/2023)

Figure 4.2.3 Comparison of With and Without Kerning, Week 4 (20/10/2023)

2. Layout Exercise

For this "Helvetica" exercise, I have roughly created four different layouts and chose a few pictures to input into the layout then gave the caption. Before beginning to kern the words, I tried altering the font size several times before settling on 11pt in order to prevent widows and orphans.

                                #1                                                             #2

    

                                #3                                                                 #4

    

Figure 4.2.4  Different Digital Layouts, Week 4 (22/10/2023)

Process: 

After finalizing the layout design, I made the decision to carry out further enhancements, taking into account the guidance provided in Mr. Vinod's instructional video lecture.

1. I was refined by kerning and tracking processes to ensure the uniformity of line widths.

Figure 4.2.5  Kerning and Tracking Process, Week 4 (22/10/2023)

2. Then I also input the grid of baseline, aligning all words with this baseline, and adjusting text boxes within the margins.

  

Figure 4.2.6  Adjusting the Baseline, Week 4 (22/10/2023)

Among the four options presented, Ms. Low also commented that my #1, #2, and #3 are good to go even though the fourth layout was creative but it did not meet the requirement that each line is less than 54 characters. My preference leans towards #1 and #2 following a careful adjustment of the spacings and alignment grids, then Ms.Low also suggested that #2 is more creative, I ultimately settled on the design configuration.

Final Text Formatting Layout

Head

Font/s: Bodoni 72 Bold, ITC New Baskerville Std 

Type Size: 48pt (headline), 18pt (byline)

Leading: 60pt (headline), 36pt (byline)

Paragraph Spacing: 0pt

Body

Font/s: Bembo Std Regular (body text), Adobe Caslon Pro (caption)

Type Size: 11pt (body text), 9pt (caption)

Leading: 12pt (body text), 10.8pt (caption)

Paragraph Spacing: 12pt (body text)

Characters per line: 58

Alignment: Left Justified

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

Columns: 4

Gutter: 5mm

Figure 4.2.7  Final of My Exercise 2, Week 5 (24/10/2023)

Figure 4.2.8  Final of My Exercise 2 with Margin, Week 5 (24/10/2023)

Figure 4.2.9  PDF of My Exercise 2 with Margin, Week 5 (24/10/2023)

Figure 4.2.10  PDF of My Exercise 2 with Margin, Week 5 (24/10/2023)

---

FEEDBACK

Week 1 

General Feedback :

Set up an e-portfolio and paste the permalink to the Google sheet provided. Familiarise yourself with the module's information and important things such as the specific 10 fonts, feedback form, and in terms of how the lesson is conducted. 

Week 2 

General Feedback : 

One vital thing to take note of is always to paste the link address of the image reference aside. In fact, it would be more reader-friendly and efficient for future access. To add on, noticed that improvement in terms of ideation could have actually input the elaboration of description in researching ideas to help readers clarify my thought process and rationale behind my ideas.  

Specific Feedback :

In terms of my artwork, we are actually restrained from distorting the words too exaggerated and adding extra graphics, thus trying to simplify my type expressions to obtain a clearer version of typography and make it relatable to the audience.

Week 3 

General Feedback : 

Each image should be labeled, essentially on track

Specific Feedback :

Overall, the animation of "spring" is creative but the animation could be edited either slower or duplicated so repeating the motion of bouncing and blossoming can be seen clearly.

Week 4 

General Feedback : 

It is important to export the files into 4 types of versions according to the format that Mr. Vinod has shown in class which is PDFs with and without margins and JPEGs with and without margins.

Specific Feedback :

The task has well-accomplished.

Week 5 

General Feedback: 

All the words should be easy to read and should be properly aligned with the baseline. The text should flow continuously without unnecessary separation into different text boxes, making iteasy to make adjustments.

Specific Feedback :

I've created three layouts and four designs,but Ms. Low expressed a preference for the second one, as it offers good readability for the audience. Additionally, we should ensure that the images are aligned appropriately.

---

REFLECTION

Experience

In my opinion, the beginning weeks of school have been rewarding for me. We gradually finished tasks each week to ensure our progress, and we received comments and suggestions from Ms Low and Mr. Vinod each week to modify and make refinement towards our work. We also reviewed our classmates' works and I gained insight and was inspired by everyone's creativity. To master the fundamentals of typography, we also watched the pre-recorded lecture films. I have learned variations of features in Adobe Illustrator and Indesign.

Observation

By completing our work incrementally each week, we got to receive complete direction and unqualified feedback, which is highly efficient and beneficial for the learning process. After this module, I noticed that typography is literally everywhere in our lives and essential for consumers, customers, and readers to read something.         

Findings

In typography, letters and words are our tools in daily lives, they seem to be the sole forms of communication. It's true that beautiful typography involves a great deal of meticulous labor and can have an impact on viewers visually. I noticed that I started to pay closer attention to the letters and words utilized in my surroundings. 

---

FURTHER READING

Computer Typography Basics by I.d.e.a.s. 

Font Categories 

There are some fundamental concepts in font designs. They are simplified into a few categories that are encountered on today's computers.

1. Serif fonts are commonly used as "body" copy fonts and can work nicely for headlines as well. It has little feet or arms that hang off at the end of strokes, typically thin or thick.

• Oldstyle 
• classical Roman inscriptions, 
• open, wide, and round with pointed serifs 
• a pleasing contrast between heavy and light strokes

• Modern 
• designed over 200 years
• a greater degree of mechanical perfection than Oldstyle (the greater distinction between strokes and squared-off serifs

• Square Serif 
• Slab Serifs are a contemporary style used mainly for small amounts of text 
• such as advertising copy, subheads, and headlines.
• Mostly uniform strokes with little contrast

2. Display fonts are decorative fonts used as attention-getting headline fonts.

3. Script fonts are designed to mimic writing and the letters touch one another. These fonts are traditionally used for formal invitations. Scripts fonts never be used in all capitals.

4. Text fonts are hand-drawn letters made by early monks for religious books.

• "Old-World" feel to them 
• mostly used for certificates, diplomas, and invitations 
• should not be used in all capital letter

5. Mono-spaced fonts are usually typewriter-style fonts and occupy the same space regardless of the actual letter.

6. Dingbat fonts are small pieces of art to enhance the design of the page.

Font Families

refers to fonts of the same design but different in weight from one font to another. Many fonts come in weight - plain but body-copy fonts are available in:

• plain (or Roman);
• italic (usually a Serif font) or oblique (usually a Sans Serif font);
• bold;
• bold italic or bold oblique

All fonts have additional weights, in order from the lightest to heaviest, including: 

• Extra Light, Ultra Light, or Extra Thin;
• Thin or Light;
• Roman or Book;
• Medium or Regular;
• Demi-Bold or Semi-Bold;
• Bold
• Heavy, Extra Bold, Black or Super Bold

Identifying and Selecting a Font

ensure readability by understanding the x-height of lowercase letters and their relationship to uppercase and ascender letters.

The relationship between the uppercase/ascender letters and the x-height depends solely on the design of the font. Fonts with a large x-height, or "tall" lowercase characters, are easier to read than fonts because of the depth of the descenders and shape.

Special Styles

Technology and applications nowadays allow for many special effects to typesetting houses but also mean abuse, making hard-to-read typography.

Design School: Type by Richard Poulin 

Summary

This book is divided into three sections: fundamentals, history, and practice. Fundamentals include terminology, analogy of letterforms, and typeface classifications. The history part explores from the earliest letterform to nowadays digital fonts. Finally, in the last section, this book provides practical tips for designing with types, including layout, hierarchy, spacing, color etc.