Task 1: Exercise 1 and 2

04/04/2023 - 12/05/2023 / Week 1 - Week 6

Reema Arif Hamza / 0362792
Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Exercises 1 & 2

Content

Lectures

Lecture 1: Introduction

Typography can be found in a variety of places, including websites, apps, animations, signage, labels, posters, and logos. For over 500 years, typography has evolved from calligraphy to lettering to typography. It's worth noting that in calligraphy you write, whereas in lettering, you draw the letters' circumference.

Typography, according to the Oxford Dictionary, is the style and appearance of printed matter.

Typography was originally a specialized job, but after being digitized, it has become more accessible and is now connected to a wide spectrum of professions.

A font refers to the individual font or weight within a typeface.

A typeface refers to the entire family of fonts/ weights that share similar characteristics/styles.

Lecture 2: Development

Early letterform development: Phonecian to Roman

Writing began in Rome by scratching into wet clay with sharpened sticks or chiseled stones. Their tools and materials affected their letterforms, which were simple combinations of straight lines and circles.

The Greeks developed a writing style (boustrophedon) that alternated between reading from right to left and left to right. The letters' orientation altered together with the reading direction.

Fig. 1.1 Phoenician votive stele Carthage, Tunisia

Fig. 1.2 Evolution from Phoenician letter

Handscript from 3rd to 10th Century C.E

In the 3rd-10th century C.E., the Romans wrote on square capitals found on Roman monuments. These letterforms have serifs added to finish off the main strokes. The variety in stroke width was achieved by a reed pen held at a 60-degree angle.

Fig. 1.3 Roman Capitals

They created Rustic Capitals, a more compressed letterform, in order to fit more text onto a parchment. Cursive handwriting was used for everyday transactions, while square and rustic capitals were saved for official documents. It's interesting to note that writing quickly in cursive led to the development of the lowercase form.

Fig. 1.4 Square Capitals

Uncials had aspects of Roman cursive hand and were more readable at smaller sizes than Rustic Capitals. Half uncials marked the real beginning of lowercase letterforms, replete with ascenders and descenders.

An empire that ruled a large part of Europe began to standardize the writing systems. After the dissolution of this empire, regional variations gained popularity. The geography and tools greatly impacted the writing forms.

Fig. 1.5 Roman Cursive

Fig. 1.6 Uncials

Fig. 1.7 Half Uncials

Timeline/Development

Below is a summarized slide on Typography Development.

Fig. 1.8 Timeline

1450 Blackletter

The black letter, the earliest printing type, was based on the hand-copying techniques used at the time for books in northern Europe.

1475 Oldstyle

Oldstyle was based on the uppercase letterforms discovered inscribed on Roman ruins and the lowercase letterforms used by Italian humanist scholars for book copying. The forms evolved away from their calligraphic origins over a 200-years as they traveled across Europe, from Italy to England.

1500 Italic

The first italics were condensed and close-set, similar to contemporary Italian handwriting, allowing for more words per page. Although italics were once considered their own class of type, they were quickly cast to complement Roman forms. Virtually all typefaces have been designed with accompanying italic forms since the sixteenth century.

1550 Script

Originally intended to mimic engraved calligraphic forms, this typeface is not entirely appropriate in long text settings. However, in shorter applications, it has always been widely accepted. Forms now range from formal and traditional to casual and modern.

1750 Transitional

This style, a refinement of old-style forms, was made possible in part by advances in casting and printing. Relationships from thick to thin were exaggerated, and brackets were lightened.

1775 Modern

This style is a further rationalization of Oldstyle letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes was stark. English versions (like Bell) are also known as Scotch Romans and are more similar to transitional forms.

1825 Square Serif/ Slab Serif

Originally heavily bracketed serifs with little variation between thick and thin strokes, responded to the newly developed advertising needs for heavy type in commercial printing. The brackets were removed as they evolved.

1900 Sans Serif

As the name implies, these typefaces are devoid of serifs. Although introduced in 1816, their use did not become widespread until the beginning of the twentieth century.

1990 Serif/Sans Serif

A recent development, this style expands the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two).

Lecture 3: Text (1)

Text / Tracking: Kerning and Letterspacing

Kering refers to the automatic adjustment of space between letters.

Letterspacing means to add space between the letters.

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

Counter form is the black spacing in between the white letterforms.

Fig. 1.9 Normal, Loose, Tight Tracking

Fig. 1.10 Kerning and Letterspacing

Flush Left: This format 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 the words are consistent and create an even grey value.

Centered: This format imposes symmetry upon the text, assigning equal weight and value to both ends of any line. Creates a strong shape on the page so it’s important to amend line breaks so the text isn’t too jagged.

Flush Right: This format places emphasis on the end of the line as opposed to its start.

Justified: Like centering this format imposes a symmetrical shape on the text. Achieved by expanding and reducing spaces between words and sometimes between letters.

Text & Texture / Leading and Line Length

Beyond learning the characteristics of each typeface and its place in history. It’s important to understand how different typefaces feel as text. Different typefaces suit different messages.

Fig. 1.11 Anatomy of a Typeface

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

Leading: Text that is set too tight creates vertical eye movement. Text that is set too loosely creates striped patterns.

Line Length: Shorter lines less reading, longer lines more. A good rule of thumb is to keep it between 55-65 characters.

Lecture 4: Text (2)

Text / Indicating Paragraphs

The pilcrow (¶) was previously used in text to indicate paragraph spacing.

Leading is the space between each line of text. Ideally, your leading would be 2.5 - 3 points larger than your typeface point size. In InDesign, you can give a value for paragraph space (ideally the same as leading). This ensures cross-alignment across columns of text.

Ex: Text 10pt, Leading 12pt, Paragraph Spacing 12pt

Leading is the space between two sentences, whereas Line Spacing starts with the descender of a sentence to the descender of another sentence.

Fig. 1.12 Leading vs Line Spacing

Another way to indicate paragraph spacing is to create an indentation. Typically the indent is the same size as the line spacing or point size of your text. Indentation is best used with Justified alignment.

Ex: Text 10pt, Indentation 10pt

Fig. 1.13 Indentation

Another method of indicating paragraph spacing is extended paragraphs resulting in unusually wide text columns. Despite these issues, there can be strong compositional or functional reasons to use it.

Fig. 1.14 Extended Paragraphs

Widows & 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 type left alone at the start of a new column.

Designers (who deal with a large amount of text) should take great care to avoid the above-mentioned widows and orphaned. In justified text widows and orphans are considered serious gaffes. Flush right and ragged left are somewhat more forgiving to widows, but only a bit. Orphans remain unpardonable.

To avoid widows you can use a line break to avoid short type at the end. You can also adjust the letterspacing and kerning (max +2,-3). Orphans require more care as you might expect.

Fig. 1.15 Widows & Orphans

Text / Highlighting Text

Different kinds of emphasis require different kinds of contrast. You can italicize, bold, create a box around the text, and change the color of the text (black, cyan, magenta). If you’re using a serif typeface for a body of text and change the highlighted text to a sans serif typeface you may what to reduce point size by 0.5 to match the X-height of the serif typeface.

Sometimes it is necessary to place certain typographic elements outside the left margin of the text to maintain a strong reading axis. Quotation marks like bullets, can create a clear indent, breaking the left reading axis.

Primes (‘’) are straight and used to represent feet & inches whereas Quotes (“ ”) are italicized.

Headline within Text

There are many kinds of subdivisions within the text. The following visuals are labeled (A, B, and C) according to the level of importance. It is important to decide on the visual hierarchy

of information.

A head indicates clear breaks between topics within a text. A head is set larger than the text, in small caps, and in bold.

Fig. 1.16 A Head

The B head is subordinate to the A head. B heads a new supporting argument or an example for the topic at hand. They shouldn’t interrupt the text as strongly as A heads.

Fig. 1.17 B Head

C heads, although not common, highlight specific facets of information within the B head text.

Putting together a sequence of subheads = hierarchy.

Fig. 1.18 C Head

Cross Alignment

When headlines and captions are cross aligned with text type, the architectural sense of the page (the structure) is reinforced while the complementary vertical rhythms are articulated.

Lecture 5: Basic

Fig. 1.19 Typo_5_Basic Slides

Describing letterforms (Terminology)

Baseline: The imaginary line the visual base of the letterform.
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: Point created by joining two diagonal stems. (Apex above and vertex below)
Arm: The 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 strokes.
Beak: The half-serif finish on some horizontal arms.
Bowl: The round form that describes a counter. The bowl may be either open or closed.
Bracket: The transition between the serif and the stem.
Crossbar: The horizontal stroke in the letterform that joins two stems together.
Cross stroke: The horizontal stroke that intersects the stem of a lowercase t or f
Crotch: The interior space where two strokes meet.

Ear: The stroke extending out of the main stem or body of the letterform.
Finial: The rounded non-serif terminal to a stroke.
Descender: The portion of the stem of a lowercase letterform that projects below the baseline.
Ligature: The character formed by the combination of two or more letterforms.
Spine: The curved stem of the S.
Stress: The orientation of the letterform is indicated by the thin strokes in rounded letterforms.
Swash: The flourish that extends the stoke of the letterform.
Terminal: The self-contained finish of a stroke without a serif.

The font

A full font of typeface contains more than 26 letters including numerals, punctuation, etc.

Uppercase: Capital letters, including certain accented vowels.

Lowercase: Lowercase letters include the same characters as uppercase letters.

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 called an expert set.

Uppercase Numerals: Numerals set to the same height as uppercase letters.

Lowercase Numerals: Numerals set to the x-height with ascenders and descenders.

Describing typefaces

Roman
Italic - based on 15th-century Italian handwriting.
Oblique - based on the Roman form
Boldface
Light
Condense
Extended

Lecture 6: Understanding

Understanding letterforms

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. A close examination will show the subtle differences.

Fig. 1.20 Uppercase Letterform

The complexity of each individual letterform is 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 reveals the difference in character between the two.

Fig. 1.21 Helvetica and Univers

Maintaining x-height

The x-height describes the size of the lowercase letterforms. However, you should keep in mind that 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. 1.22 Maintaining x-height

Counterform

It’s important to develop a sensitivity to the counterform - the spaces described and often contained by the strokes of the form. How well you handle the counters when you set type determines how well the words hang together.

Fig. 1.23 Counterform

Contrast

Contrast is the most powerful dynamic in design. The simple contrast produces numerous variations: small+organic/ large+machined; small+dark/ large+light

Fig. 1.24 Contrast

Lecture 7: Screen & Print

Different Mediums

Typography used to only be thought of as living once it was printed on paper. Skilled typesetters and designers were responsible for the legible typography. Today, typography can be found on many different screens in addition to paper. The way a page is rendered today affects how we perceive typography.

Screen vs Print

Long before we read from a screen, type was designed for reading from print. It is the designer's responsibility to ensure that the text is smooth, flowing, and enjoyable to read. A good typeface for print-Caslon, Garamond, and Baskerville is the most commonly used print typefaces. Because of their elegant and intellectual characteristics, but also because they are highly readable when set to small font size.

Fig. 1.25 Print

Typefaces designed for web use are optimized and often modified to improve readability and performance in a variety of digital environments. For some designs, 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, and modified curves and angles.

Fig. 1.26 Screen

More open spacing is another important change, especially for typefaces designed for smaller sizes.

Hyperlink: a word, phrase, or image that you can click to jump to a new document or new section of a current document.

Font size for screen: 16-pixel text is about the same size as text printed for a book or magazine. Because we read books pretty close they’re set to about 10pt. If you were to read them at arm’s length, you’d want at least 12pt.

System fonts for screen/ web safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier, Verdana, Georgia, Palatino, Garamond.

Instructions

Task 1: Exercise 1 - Type Expression

You will be given 4 words to compose and express. Begin by sketching out ideas. Once the ideas are selected, you will be given a set of 10 typefaces to work with in the digitization phase. Through iteration, use the appropriate typeface and compose the letters in a manner that allows the meaning of the word to become visible — still and in motion.

Process

The 4 words I chose were: Kill, Throw, Dance, and Melt. I spent some time brainstorming different iterations I could imagine for each word. Then did many rough sketches and picked the best 3 sketches for each word.

The 'Kill 1' had the most visual impact and could be translated well into the given typefaces so I chose to focus on it. The 'Throw' sketches were pretty weak visually, but the feedback given helped me realize how much I could really expand on it and focus on the action of throwing itself. The first few 'Dance' sketches did not translate into the typefaces given. I chose to focus on 'Dance 3' and thought further about how I could emphasize the movement of dancing. The 'Melt 3' I felt expressed the word clearly and would be digitized well.

Fig. 2.1 Type Expression Sketches, Week 2 (12/04/2023)

Digitisation Process

During the Digitisation I explored the typefaces given and picked the ones I felt suited my words the most.

For 'Kill' I used Bodoni Std, Book Italic. I felt the slant of the italicized letters provided a more threatening feel to the word. I changed the I into the shape of a sharp knife to express the act of killing. Mostly because my first thought of the word kill is a stabbing scene. I dragged the end of the knife further below the baseline to emphasize the point of the blade.

For 'Dance' I used Adobe Casino Pro, Regular. The typeface had nice curves and the variety in weight added to the 'dance' feel. I rotated a few letters around and added small graphical elements to depict movement.

For 'Throw' I used Gill Sans Std, Bold, Regular, and Light. I used different weights to add perspective to the word and depict the action of throwing more clearly.

For 'Melt' I used Gill Sans Std, Bold. I felt that the straight edges of the typeface added more contrast to the melting effect I did. I used the Mesh tool on Illustrator to make the word look like it was melting.

Fig. 2.2 Type Expression Digitisation, Week 3 (18/04/2023)

Fig. 2.3 Kill Progress, Week 4 (25/04/2023)

Fig. 2.4 Dance Progress, Week 4 (25/04/2023)

Fig. 2.5 Melt Progress, Week 4 (25/04/2023)

Fig. 2.6 Throw Progress, Week 4 (25/04/2023)

Final

I made adjustments mainly focusing on utilizing the artboard space properly. 'Kill' was made larger. 'Dance' was made larger and moved the letters so they weren't on a straight path. 'Throw' was made larger, and fills up the whole art board. I did end it at the O as it looked like a ball was thrown. 'Melt' was made larger and had minor adjustments to the curves.

Overall, I feel my words strongly express themselves and are well composed.

Fig. 2.7 Type Expression Final, Week 4 (25/04/2023)

Animation Process

I chose to animate the word 'Dance' because the addition of movement would really suit the word. For this animation, I used 4 frames, however, it felt very jagged and unsmooth.

Fig. 2.8 Type Expression Animation 1, Week 4 (25/04/2023)

Fig. 2.9 Animation Progress, Week 4 (25/04/2023)

Final Animation

The final animation consisted of 10 frames providing a smoother more controlled effect. Overall, it looks like the letters are dancing smoothly.

Fig. 2.10 Type Expression Final Animation, Week 4 (25/04/2023)

Task 1: Exercise 2 - Text Formatting

You will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans, and cross-alignment. These minor exercises (Formatting Text 1:4 to 4:4A) will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. The task ends with the submission of one layout in A4 size demonstrating what you have learned from the incremental exercises.

Kerning & Tracking

Through this exercise, I was able to learn how to use kerning and tracking in the next part of the task.

Fig. 2.11 Without Kerning, Week 5 (02/05/2023)

Fig. 2.12 With Kerning, Week 5 (02/05/2023

Fig. 2.13 Overlayed, Week 5 (02/05/2023)

Text Formatting

The feedback given in class suggested I explore the layout further, choose relevant images, and make the tracking looser as it is too tight at the moment.

Fig. 2.14 Layout 1 & 2, Week 5 (02/05/2023)

Final

I decided to use a sans-serif font to better represent Helvetica as a font.

HEAD
Font/s: Univers LT Std (65 Bold)
Type Size/s: 48 pt
Leading: 50 pt
Paragraph spacing: 0

BODY
Font/s: Univers LT Std (45 Light)
Type Size/s: 10 pt
Leading: 12.5 pt
Paragraph spacing: 12.5 pt
Characters per line: 59
Alignment: left
Margins: 16.7 mm top, 12.7 mm left + right, 25.4 mm bottom
Columns: 4
Gutter: 5 mm

Fig. 2.15 Text Formatting Final Layout JPEG, Week 6 (09/05/2023)

Fig. 2.16 Text Formatting Final Layout (Guides) JPEG, Week 6 (09/05/2023)

Fig. 2.17 Text Formatting Final Layout PDF, Week 6 (09/05/2023)

Fig. 2.18 Text Formatting Final Layout (Guides) PDF, Week 6 (09/05/2023)

Feedback

Week 2

General Feedback: Overall, you should focus on readability/legibility and remember that you are using existing typefaces. There is a limit to distortion, you can repeat words.

Specific Feedback: The word ‘Throw’ can be repeated from one end to another to emphasize the distance.‘Melt’ should use a straight typeface so that there will be more contrast as it melts. Should further explore ‘Dance’ and see how to add movement whilst using existing typefaces. As for ‘Kill’ maybe there’s a way to add some extra impact.

Week 3

General Feedback: The space in the art board can be better utilized and it's important to make sure you use the right typeface.

Specific Feedback: The word 'Kill' was expressed properly, it could sit better on the art board. 'Dance' had movement but could move around the board instead of in a straight line. 'Throw' can be done using
text on the path. 'Melt' was alright just can fill the space more.

Week 4

General Feedback: The end of the animation can be paused longer.

Specific Feedback: Good job, well done.

Week 5

Are kerning and tracking appropriately done?
Does the font size correspond to the line length, leading & paragraph spacing
Is the alignment choice conducive to reading?
Has the ragging been controlled well?
Has cross-alignment been established using baseline grids?
Are widows and orphans present?

General Feedback: Make sure tracking is even (can gauge by half-closing eyes). It's not suggested to use a bold typeface for the body text.

Specific Feedback: From a leading perspective it's alright, the tracking is a bit tight in many sentences. The layout could be better, at the moment it's angling at the top-left and bottom-right. Choose relevant images (can just cut to 1 image)

Reflection

Experience

During this task, I found myself looking at signs across the street, posters on the wall, and book covers. But as I seek them out, I found that I perceive them in a very different context now. All the lecturers in class pushed me to really analyze the typography around me and see what I can learn from it. I enjoyed the type expression task because it gave me a chance to explore how I could manipulate letterforms very minimally to express the meaning of the word in an impactful way. The text formatting task allowed me to hone my senses and be more fastidious about my work.

Observation

While working directly on Illustrator and Indesign I was able to properly digest the information from the lectures I watched and apply it directly in my work. I noticed that I had trouble documenting my work as I progressed. After learning about tracking and kerning, I also began to notice it while reading books.

Finding

I was able to learn more about expressive typography and how to discern which typefaces suit my design. I'm only slowly grasping at the moment but I'm sure I can hone this sense further. I will adapt to make it a habit to document my work progressively more often.

Reema Hamza

Search This Blog