Typography - Task 1/ Exercises

October 20, 2024

Typography - Task 1/ Exercises

September 29, 2024

28/09/2024 - 28/10/2024 (Week 1 - Week 5)

Begimbaeva Aidina / ID 0380489

Typography / Bachelor of Design (Honours) in Creative Media / Taylors University

Task 1 : Exercises

TABLE OF CONTENT

1. Lectures

2. Instruction

3. Process Work

4. Feedback

5. Reflections

6. Further reading

LECTURE

Week 1 : Typo_0_Introduction

In the first session, we will explore typography and its significance in design. We will cover key aspects, including its history, definition, and the essential skills that students will develop throughout the module.

Typography is the art and skill of creating visually appealing text. The key aspects are not only the choice of typeface, but also its design, as well as the spacing of characters and lines, to achieve optimal readability and aesthetic impression.

Figure 1.1 Typography in website design

Figure 1.2 Calligraphy

Terminology

Font: a font refers to the individual font or weight within the typeface, I.e.:

Georgia Regular, Georgia Italic and Georgia Bold.

Typeface: a typeface refers to the entire family of fonts/weights that share similar characteristics/styles, I.e.: Georgia, Arial, Times New Roman, Didot and Futura.

Figure 1.3 Example of Typefaces and fonts

Typo_1_Development

PHOENICIAN TO ROMAN

This lecture discusses the evolution of letters, tracing their development from the Phoenician alphabet to the present day. It outlines the transition through various stages, including the influence of Roman writing. In ancient times, writing was primarily done by scratching into wet clay with sharpened sticks or carving into stone with chisels. The tools used for writing had a significant impact on the shapes and forms of the letters.

Figure 1.4 Early Letterform Development

The earliest letters were created by scratching into wet clay using sharpened sticks or carving into stone with chisels. Initially, only uppercase letters were used, as they were composed of straight lines and circular shapes.

Figure 1.5 Boustrophedon

Later, the Greeks changed the way they wrote, creating a method called baustrophedon. In this style, lines of text were read first from right to left and then from left to right. The letters also changed orientation, as if they were reflected in a mirror.

Hand Script From 3rd - 10th Century C.E.

Square Capitals: Characterized by serifs and a variety of stroke widths, created by using a reed pen held at approximately a 60-degree angle from perpendicular.
Rustic Capitals: This form is narrower, allowing more text to fit on a page, though it sacrifices some readability.
Cursive Hand: Letterforms were simplified for quicker writing, marking the early development of lowercase letters.
Uncials: Features broader letterforms, offering better readability at smaller sizes compared to rustic capitals.
Half-Uncials: Represents the early emergence of lowercase letterforms, complete with ascenders and descenders.
Standardization of Texts: Charlemagne, as the first unifier of Europe, issued an edict to standardize all ecclesiastical texts. This led to the rewriting of texts using both majuscules and minuscules, along with capitalization and punctuation, establishing calligraphic standards for a century.

Figure 1.6 Font development

TYPE CLASSIFICATIONS DEVISED BY ALEXANDER LAWSON

1450 Blackletter: Rooted in the hand-copying styles prevalent in Northern Europe, this typeface reflects the aesthetics of early book production.
1475 Oldstyle: Drawn from lowercase letters used by Italian humanist scholars, as well as inscriptions found in Roman ruins, this style emphasizes legibility and elegance.
1500 Italic: Initially a separate typeface, Italic later integrated into Roman forms, enhancing their variety and expressiveness.
1550 Script: Designed to replicate the look of engraved calligraphy, this style ranges from formal and traditional to casual and spontaneous.
1750 Transitional: Characterized by advancements in casting and printing techniques, this classification moves away from conventional writing systems.
1775 Modern: Further refining Oldstyle forms, Modern typefaces feature pronounced contrasts between thick and thin strokes, creating a bold visual impact.
1825 Square Serif: Originally featuring bracketed serifs, this type emerged as a necessity for heavy commercial printing, ensuring visibility and strength.
1900 Sans Serif: This classification completely removes serifs, resulting in a clean, modern aesthetic often referred to as Grotesque.

Figure 1.7 Text Types

Week 2 : Typo_3_Text_P1

Kerning and Letter Spacing

Letter Spacing: Involves adding space between individual letters to improve appearance.
Kerning: Refers to the automatic adjustment of space between specific letter pairs, often used for headlines.
When combined, kerning and letter spacing are known as tracking.

Text Formatting

Flush Left: Aligns text from left to right, mimicking handwriting.
Centered: Creates symmetry, balancing both ends of each line.
Flush Right: Emphasizes the end of a line, useful for additional notes.
Justified: Aligns text to form a uniform block on both sides.

Texture

Typeface choice impacts how dark or light the text appears, affecting readability.

Leading and Line Length

Type Size: Should be large enough for easy reading.
Leading: The space between lines, which enhances clarity.
Line Length: Proper leading complements the length of text lines.

Type Specimen Book

A type specimen book showcases various typefaces and sizes, aiding design decisions.

Figure 1.8 Kerning

It is not recommended to apply kerning or interlineage to large amounts of text, but they are useful for headlines in newspapers and books where precision for each character is important. Interlineage is best used with capital letters, as most fonts are not adapted for this.

Text alignment also affects perception: left alignment is easier to read, whereas centred alignment may be visually appealing but makes it difficult to read.

It is important to choose fonts that match the purpose of the text, as they convey meaning and emotion. Test fonts in print to make sure they are readable, as screen versions may differ from print versions.

Figure 1.9 Before and after breaking the counterform by adding letterspacing.

Figure 1.10 Example of bad (left) and good (right) typeface choices.

Text Formatting

Flush left: This format mirrors 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, allowing the type to create an even gray value (value of text on a white page).
Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of the lines. It adds pictorial quality to material that is non-pictorial by nature. Centered type creates a strong shape on the page so it's important to amend line breaks so the text doesn't appear too jagged.
Flush right: This format places emphasis on the end of the line which is useful in situations (like captions or axial layout) where the relationship between text and image might be ambiguous without a strong orientation to the right.
Justified: Like centering, this format imposes a symmetrical shape on the text by expanding or reducing spaces between words or letters, resulting in 'rivers' of white space running through the text. Careful attention to line breaks and hyphenation is required to amend this problem.

Figure 1.11 Flush left

Figure 1.12 Centered

Figure 1.13 Flush right

Figure 1.14 Justified

Font size: The text size should be large enough to read comfortably at arm's length, as if you are holding a book in your lap.

Leading: Text that is set too tightly can cause vertical eye movement, making it easy for the reader to lose their place. Conversely, if the lines are set too loosely, it creates striped patterns that distract from the main content.

Figure 1.15 x-hight

Figure 1.16 Bad leading - no leading (left) and too much leading (right)

Week 3 : Typo_4_Text Part 2

Pilcrow : This symbol, also known as the paragraph marker, comes to us from medieval manuscripts and is used to indicate a new paragraph. It is rarely seen today, but remains a traditional marker in texts.

Leading : Leading indicates the distance between lines of text and plays a key role in visually separating paragraphs. To improve readability, it should be about 2.5 to 3 points larger than the font size. For example, if the font size is 10 points, the spacing should be set at 12-13 points. To achieve an even alignment of lines in two columns of text, the spacing and paragraph indents should be the same.

Cross-alignment is a technique for precisely aligning lines of text between adjacent columns. When lines of text in one column are placed on the same line as the corresponding lines in the neighbouring column, a visually consistent composition is created, which improves readability and overall aesthetics of the text.

Figure 1.17 Cross-alignment between two columns of text.

Indentation is also a way to visually separate paragraphs. It is most often equal to the spacing or the font size of the text. Too much indentation can cause a jagged left margin, which is especially noticeable when using a small font, such as in newspapers.

Figure 1.18 Indentation with justified text.

Figure 1.19 Extended paragraphs, generally not used.

The difference between line spacing and line spacing:

Line spacing is the distance separating one sentence from another, measured from the baseline of one sentence to the top or bottom of the next, depending on its height.

Figure 1.20 Difference between line spacing and leading

Widows and Orphans (Single Lines and Orphan Lines)

A single line is a short line of text that stays last in a column, while an orphan line is a short line that starts the next column.

In width-aligned texts, such lines are considered a serious oversight. In right alignment with an uneven left edge, single lines can sometimes be smoothed out, but orphan lines remain undesirable.

Figure 1.21 Widows and Orphans

Highlighting text

Text can be highlighted in a variety of ways: using italics, bold, changing the colour to black, cyan, magenta or yellow, and using a bright or grey fill for the background.

It is important to consider the style of the font, sometimes reducing its size by 0.5 points for a harmonious look. To keep the text easy to read, make sure the alignment is on the left reading line. In some cases, certain elements may be moved beyond the left edge of the column to maintain a level line of text. Inverted commas and markers (bullets) often break this line, leaving significant indents. Note: The prime sign indicates inches or feet and is not an inverted comma.

The letters A, B, and C can denote different levels of subheadings within the text of chapters.

An A-level heading acts as a separator, indicating significant changes of topic within a chapter. It may be larger than the main text, bolded or underlined, and sometimes moved to the left for emphasis.

A level B heading is subordinate to level A headings and is used to introduce new arguments or examples that complement the main topic. It is less prominent than a Level A heading and can be in small type, italics, or bold serif type, which maintains the structure of the text without breaking it up too much.

The level C heading emphasises specific details within the level B subsections. It is arranged in a way that does not disrupt the flow of reading, such as small capital letters, italics, or bold serif type. After the level C heading, leave a small indentation to visually distinguish it from the main text

A head

B head

C head

Figure 1.22 'A', 'B', and 'C' headlines combined form a hierarchy within the text.

Cross-alignment

Coordinated alignment of headings and captions with the main text helps to create a clear compositional structure of the page, maintaining a rhythmic vertical arrangement of elements. To achieve this effect, double spacing is often used to make text elements look cohesive and visually connected.

Figure 1.23 Cross Alignment

Week 4 : Typo_2_Basic

Typography: Basics and descriptions of letterforms

Baseline The imaginary line 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 1.24 Basic

Stroke Any line that defines the basic letterform

Figure 1.25 Stroke

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

Figure 1.26 Apex/Vertex

Ascender The portion of the stem of a lowercase letterform thatprojects above the median.

Figure 1.27 Ascender

Barb The half-serif finish on some curved stroke

Figure 1.28 Barb

Bowl The rounded form that describes a counter.The bowl may beeither open or closed.

Figure 1.29 Bowl

Bracket The transition between the serif and the stem

Figure 1.30 Bracket

Cross Stroke The horizontal stroke in a letterform that joins twostems together

Figure 1.31 Cross Stroke

Crotch The interior space where two strokes meet.

Figure 1.32 Crotch

Ear The stroke extending out from the main stem or body of theletterform.

Figure 1.33 Ear

Em/en Originally refering to the width of an uppercase M,and em isnow 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 usedto describe em/en spaces and em/en dashes.

Figure 1.34 Em/en Originally

Finial The rounded non-serif terminal to a stroke

Figure 1.35 Finial

Ligature The character formed by the combination of two or moreletterforms.

Figure 1.36 Ligature

Stress The orientation of the letterform,indicated by the thin stroke inround forms

Figure 1.37 Stress

Swash The flourish that extends the stroke of the letterform.

Figure 1.38 Swash

The full font of a typeface contains much more than 26 letters, to

numerals, and a few punctuation marks. To work successfully with type, you should make sure that you

are working with a full font and you should know how to use it.

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

Figure 1.39 Uppercase Capital

Lowercase letters include the same characters as uppercase.

Figure 1.40 Lowercase

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

Figure 1.42 Small Capitals Uppercase

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.

Figure 1.43 Uppercase 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.

Figure 1.44 Lowercase Numerals

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.

Figure 1.45 Italic

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

Figure 1.46 Punctuation

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 Casion Pro).

Figure 1.47 Ornaments

Describing Typefaces

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'.
Italic: Named for 15th century Italian handwriting on which the forms are based.
Oblique: Conversely are based on Roman form of typeface.
Boldface: Characterized by a thicker stroke than a Roman form. Depending on the stroke widths, 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'.
Light: A lighter stroke than the Roman form. Even lighter strokes are called 'thin'.

Figure 1.48 Fonts Weights

Comparing Typefaces

Figure 1.49 Typefaces

Beyond the differences in x-height, the forms display various line weights, relative stroke widths and in feeling. Examining tells us the feeling of using type and specific typeface, allowing us to choose the appropriate ones.

Figure 1.50 Comparing Typefaces

INSTRUCTION

TASK 1 / Exercise 1 – Type Expression

week 1:

For the first assignment of the term, Mr Vinod explained the rules and tasked us to create a sketch of a word that visually conveys its meaning. We took a poll with 10 words and the six words with the most votes were selected. Each student could choose four words for their project.

For the first week's exercise, we came up with six words and chose four of them to sketch. The shape of the letters must remain the same, but small exceptions are allowed with approval. The use of colour is forbidden and successful ideas should be simple but expressive.

I have chosen the words Chop, Explode, Wind and Tangle for the type expression sketches.

1.Reserch

Figure 1.51 Chop Reference & Research Images.

Figure 1.52 Wind Reference & Research Images.

Figure 1.53 Explode Reference & Research Images.

Figure 1.54 Tangle Reference & Research Images.

2. Sketch

Figure 1.55 Sketch

3. Digitalize

Make sure that the text is inside the frames.
Use the fonts specified by the teacher.
Insert the name of the font to be used under the frame

Figure 1.56 Final Sketch in Illustrator JPEG

Figure 1.57 Final Sketch in Illustrator PDF

4. Animation

Mr Vinod gave us a video lesson on creating GIF animations using Illustrator and Photoshop. I chose the word ‘WIND’ to create a GIF to animate it.

Figure 1.58 Animation GIF

Week 4

Exercise 2: Text Formatting

Lecture 1 : Kerning Tracking

Typo_Ex Text Formating Text 1:4

Mr. Vinod displays how to use kerning and tracking InDesign

Figure 1.59 Without Kerning and Tracking

Figure 1.60 With Kerning and Tracking

Text_Ex Text Formatting 2:4

Lecture 2: Leading and Paragraph Spacing

Text Formatting

Things to look out for when completing Task 1, Exercise 2 Text Formatting:

Font size (8–12)
Line Length (55–65/50–60 characters)
Text Leading (2, 2.5, 3 points larger than font size)
Paragraph spacing (follows the leading)
Ragging (left alignment) / Rivers (Left Justification)
Cross Alignment
No Widows / Orphans

Figure 1.58 Leading and Paragraph Spacing

Figure 1.61 Leading and Paragraph Spacing

Lecture 3: Alignment, Paragraph Spacing, Text Fields & Ragging

Typo_Ex Text Formatting 3:4

Figure 1.62 Alignment, Paragraph spacing, Text fields, Ragging

Figure 1.63 Cross alignment and baseline grid

Excercise : Text Formatting

We were asked to format the given document, below are the attempts:

Figure 1.64 Text Formatting Final JPG

HEAD LINE
Typeface: Univers LT Std
Font/s: Univers LT Std Bold, Univers LT Std 57 Condensed Oblique (Byline)
Type Size/s: 46 pt
Leading: 11 pt
Paragraph spacing: 22
BODY
Typeface: Univers LT Std
Font/s: Univers LT Std 55 Roman, Univers LT Std 45 Light (image caption)
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 50-60 characters
Alignment: left alignment
PAGE FORMAT
Margins: 36mm top + bottom, 25mm right+left
Columns: 2
Gutter: 5 mm

Figure 1.65 Final Text Formatting PDF Forma

Feedback

Week 1

I was unable to attend the first week of the training sessions due to visa issues that prevented me from flying to Malaysia. I tried to catch up and read Feedback from other students and see what they were doing in the first week of the tutorials.

There was an introduction to the design class, rules and modules. We were given an assignment to make an e-portfolio and typography sketches.

A link to a YouTube video is provided as instructions on how to complete the assignment.

Week 2

I was also unable to attend the second week of the tutorials due to visa issues that prevented me from flying to Malaysia. I also tried to catch up with the other students and read Feedback from other students and see what they were doing in the second week of the tutorials.

This week, Mr Vinod gave us a set of words for us to sketch. We're ordered to create a real depiction of those words. The words that i pick are ‘Wind’, ‘Chop’, ‘Tangle’, and ‘Pull’. The app that I use to sketch this design is Ibis Paint.

Week 3

In week 3, I tried to get to grips with where we work, where we need to send assignments and how to register.

My classmates explained to me that all the information can be found in TEAMS, and the finished assignments should be uploaded to ePortfolio. And they said that this week they are working on the words that Mr Vinod gave them and that they need to make an animation.

Week 4

Specific feedback:

There was a day to hand in the animation assignment, and for those whose animation is correct, continue the lesson by watching the YouTube video of exercise 2.

General feedback:

I've been trying to finish the eportfolio and I've also been trying to finish the assignment and animation.

Week 5

General Feedback: Headline is usually placed at the top, but it can be placed at the bottom as long as the size is significantly larger than the body text, as the headline will remain stand out. Moreover, we don't need to add many images. Leaving some empty spaces allows readers to have room to breathe and makes the content more comfortable to read.

REFLECTION

Experience

As a result of these exercises, I gained new knowledge about typography, especially while working on the first assignment. I also learnt how to create my own blog posts for my e-portfolio. Through the process of researching, sketching, digitising and animating sketches I have improved my skills significantly.

I have further deepened my knowledge of Adobe Illustrator and Photoshop and Indesign. I have also learnt concepts such as kerning, I had previously had lessons on typography but in the process of doing these exercises I have learnt a lot and deepened my knowledge in this area.

Observations

I realised that I need to allocate my time very well to work well on the exercises. Moreover, feedback is very helpful to improve my performance. Also watching the performance of other people in my class, looking at them, I feel inspired and want to know how they analyse what they have learnt and apply it in their assignments.

Findings

Through the process of completing these assignments, I realised that fonts can be used to convey and visualise different emotional states depending on the context and meaning of the words. These typographic elements also harmonise with the main aspects and principles of design. I am satisfied with the ideas that emerged during the sketching process, although there were some challenges during the work. I also realised that kerning plays an important role in the proper placement of headlines, body text and images, which is critical to creating visually appealing and memorable layouts.

Search This Blog

Aidina Begimbaeva (0380489)