Task 1: Typography Exercise

4/04/2023 - 2/05/2023

Week 01 - Week 05
Amirah Akbar Ali (0361001)
Bachelor of Design (Hons) in Creative Media
Typography - Task 1: Exercise 1& 2

1. Type Expression
2. Text Formatting
Feedback
Reflection
Further Reading

Introduction

Typography: The art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Font: The individual font or weight within the typeface.

Typeface: The entire family of fonts/weights that share similar characteristics/styles.

The Development and Timeline of Typography

Development

-It is important to be doing research on local content or content that comes from our civilization. It does not have to be a major community or any community that was not given a voice to.

-”Give voice to the voiceless”, remember that while doing research for methodology.

WEEK 1

1)Early letterform development: Phoenician to Roman

Writing meant scratching into wet clay with a hardened stick carving into stone with a chisel.

Uppercase forms are simple combinations of straight lines circles as the materials and tools of early writing.

Direction of writing:

- Phoenician: Right to left

- Roman: Right to left and left to right alternatively (direction of reading changes = orientation of letterforms changes)

      Figure 1.1: Phoenician writing
    

        The Greeks changed the formation of writing, written from right to
          left. 
      
        Greeks developed a style of writing called boustrophedon, line read
          alternatively from right to left or left to right.

      Figure 1.2: Boustrophedon
    

      Etruscan carvers would paint letterforms over the marble before carving.
    

Figure 1.3: Carved Letters

Figure 1.4: Evaluation of letterforms

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

Square capitals were written and found in Roman monuments.

Variety of strokes widths was achieved by the reed, pen held by an angle of approximately 60 degrees off the perpendicular.

Figure 1.5: Square capitals

Rustic capitals were faster and easier to, they were harder to read due to their compressed nature.

A compressed version of square capitals, rustic capitals allowed for twice as many words on a sheet of parchment. Pen and brushes are held at 30 degrees angle off the perpendicular.

Figure 1.6: Rustic capitals

Uncials incorporated some aspect of roman cursive hand, in the shape of A, D, E, H, M, U, Q. “Uncia” is Latin 12 for anything, some schoolers thought uncials refers to the letters that are 1 inch high.

It’s more accurate to think of uncials as small letters.

Further formalization of cursive hand, half uncials mark the formal beginning of lowercase letterforms.

Replete ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Figure 1.7: Roman Cursive

Figure 1.8: Uncials

Figure 1.9: Half Uncials

Charlemagne, 1st unifier since the Romans, issued and edict to standardize all ecclesiastical texts.

Entrusted to Alcuin of York, Abbot of St Martin Tours

The monk rewrote the text using uppercase, miniscule, capitalization and punctuation which set the standard for calligraphy in that century.

Figure 2: Caroline miniscule

3)Blackletter to Gutenberg's type

Dissolution of Charlemagne empire led to a condense and strongly vertical letterform in northern Europe known as the Blackletter or Textura

In the south a rounder more openhanded letterform was used known as rotunda

Humanistic script in Italy is based on Alcuin’s miniscule.

Figure 1

Figure 2

Gutenberg marshaled them all to build pages that accurately mimicked the work of the scribe’s hand – Blackletter of northern Europe. The process of writing takes a long period of time, thus not many books can be created and they were costly. Gutenberg developed a mechanism where printing/documenting can be done much more quickly. His type mold required a different brass matrix, or negative impression, for each letterform. They could print many pages and produce more books than a scribe could. He chose to produce the Bible in this highly productive way.

Fig 1.1.13 42-Line Bible (C. 1455)

WEEK 2

Text type classification

Text Type Classification

Type forms have developed in response to prevailing technology, commercial needs and esthetic trends. The following type form classification here, based on one devised by Alexander Lawson only covers the main form of text type.

Fig 1.1.14 Text type classifications

1450 Blackletter⟶ 1475 Old style⟶ 1500 Italic ⟶ 1550 Script ⟶1750 Transitional ⟶ 1775 Modern ⟶ 1825 Square Serif/ Slab Serif⟶ 1990 Serif/ Sans Serif

WEEK 3

Text P1 Kerning and Letterspacing

Kerning refers to the automatic adjustment of space between letters
Mistakenly referred to letterspacing
Letterspacing add space between the letters
Addition and removal space in a word or sentence referred as tracking

Letters with and without kerning

normal, loose and tight tracking

Indicating Paragraphs

Extended Paragraphs
Pilcrow: A holdover from the medieval manuscripts.
Paragraph Spacing
Cross-alignment is achieved when the leading and paragraph spacing is the same size.
Indentation
Typically the same size of the line spacing or the point size of the text.

Widows & Orphans
Widows may be acceptable at times, but orphans are unacceptable.

Widow: A short line of type left alone at the end of a column of text.
Orphan: A short line of type left alone at the start of new column.

Highlighting Text
Different ways to emphasise a certain body of text is by making it: italics, bold, bold + changing the typeface (note: san-serifs often look larger than serifs), or changing the colour. Other ways of highlighting the text is by placing a field of colour at the back of the text.

Headline within Text

There are many kinds of subdivision within text of a chapters.

Text: Describing/Elements of letterforms

Baseline: The invisible line the visual base of the letterforms

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

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

Figure 1.1

Uppercase letters have a larger and more surface on top than lowercase letters with a single stroke, and it is usually constructed to be evenly balanced by being somewhat taller than uppercase letters near the ascender height.

Figure 1.2

Stroke: A single line in a basic letterform

Figure 1.3 Apex above and Vertex below

Apex/Vertex: A point created by collaborating two diagonal stems

Figure 1.4

Figure 1.5

Arm: This expression refers to a letterform that extends from the stem stroke, either horizontally or vertically and is commonly found in open simple stroke letterforms such as F, L, or K, Y.

Figure 1.6

Figure 1.7

Letters: Understanding letterforms

Figure 1.8

Uppercase letters are not symmetrical, as evidenced by the bracket attachment or junction
in several sections of the letter

Figure 1.9

Figure 2

WEEK 4

Letterspacing

Uppercase letters are always letter spaced as they are

able to stand on their own.

Lowercase letters require the counterform* between

letters to be readable

Fig 1.2.3 Counterform

*Counterform: The black spaces between the white letters. Adding letter spacing breaks the counterform, thus reducing the readability of that particular word or sentence.

Formatting text

Gray value: Text on a white page. The value of the entire text on a white page.

If the grayness is too dark, there is not enough leading or you've given kerning to the text, thus it becomes dark. If the gray text is too light, there is too much letter spacing or you give it too much leading (the space between each line of text).

Flush left: Closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, which creates an even gray value. However, this format creates ragging (a jagged shape endpoint) on the right.

Fig 1.2.4 Flush left

Centered: Imposes symmetry on the text, giving value and weight to both ends of any line. It transforms fields of text into shapes, which adds a pictorial quality. Centered type creates such a strong shape on the page, it is important to amend line breaks so that the text does not appear too jagged.

Fig 1.2.5 Centered

Flush right: Emphasizes the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right. However, this format creates ragging on the left.

Fig 1.2.6 Flush right

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

Fig 1.2.7 Justified

Texture

Type that calls attention to itself before the reader

can get to the actual words should be avoided. If you

see the type before you see the words, change the type.

A type with a relatively generous x-height or relatively

heavy stroke width produces a darker mass on the page than

a type with a relatively smaller x-height or lighter

stroke. Sensitivity to these differences in color is

fundamental for creating successful layouts.

Fig 1.2.8 Anatomy of a typeface

There is more readability if the x-height is larger than

the ascender (space above) and descender (space below).

Fig 1.2.9 Different typefaces showing the different gray values

Different typefaces have different gray values, some are lighter and some darker. A typeface with a middle gray value is the best choice (e.g. Baskerville, Bembo, Garamond)

4) Leading and Line Length

Type size: Text type should be large enough to be read easily at arm's length. Leading: The space between adjacent lines of the typeface. Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. Type that is set too loosely creates striped patterns that cause distraction. Line Length: Shorter lines require less leading; longer lines more. Keep the line length between 55-65 characters. Extremely long or short line lengths impair reading.

Fig 1.2.10 Leading and line length

Fig 1.2.11 10/12 is a good leading

WEEK 5

Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. It provides an accurate reference for type, type size, type leading, type line length, etc.

Fig 1.2.12 Sample Type Specimen Sheet

Compositional requirement: Text should create a field that can occupy a page or a screen. An ideal text should have a middle gray value. It is useful to enlarge the type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below. If the outcome is on a printed page, it is best to print out an actual page to look closely at the details. If its outcome is on screen, then the judging type on screen is accurate.

Text Pt.2

Indicating Paragraphs

There are several options for indicating paragraphs:

The ‘Pilcrow’ (¶)

Pilcrow: A holdover from medieval manuscripts seldom use today. It is one of the hidden characters or blue indicators that help in formatting large amounts of text.

Fig 1.3.1 Pilcrow

Line space (leading*)

Paragraph space should be the same as the line space to ensure cross alignment across columns of text. E.g. If the line space is 12pt, then the paragraph space is 12pt. Line space: The space from the baseline of a sentence to the descender of the next sentence. Leading: The space between each line of text. As design students, we should use the name leading in typography. Cross alignment: When you have two columns of text sitting next to each other, the text line is aligned with the text line on the next column

Fig 1.3.2 Line space vs leading

Indentation

Standard indentation: Indent is the same size of the line spacing or the same as the point size of the text.

Fig 1.3.3 Standard indentation

Extended paragraphs

Extended paragraphs: Create unusually wide columns of text.

Fig 1.3.4 Extended paragraphs

Widows and Orphans

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

Avoided by creating a force line break - rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short.
Bringing down another word - adjusting the tracking of the line before letting the last word in the second last line moves down to the last line.

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

Avoided by adjusting the length/width of the column. Make sure that no column starts with the last line of the preceding paragraph

Fig 1.3.5 Widows and orphans

Highlighting Text

You can highlight text with different methods

Use the same typeface with Italics, Bold, or change color of the text (black, cyan, magenta, yellow only)

Fig 1.3.6 Italic, bold, and color

Use bold with different type families - from serif to sans serif for that text

Note: sans serif font is usually larger than a serif font in the same point size. In this example, the sans serif font (Univers) has been reduced by 0.5 pt to match the x-height of the serif typeface.

Fig 1.3.7 Changing type family

Place a field of color at the back of the text

Fig 1.3.8 Maintain reading axis

Place typographic elements, such as bullet points

Fig 1.3.9 Extending or indenting, outside or inside reading axis

Use quotation marks

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

Fig 1.3.10 Quotation marks

Fig 1.3.11 Prime and quote

Prime is not a quote. The prime is an abbreviation for inches and feet. (The top quotation marks that are straight in the picture)

Headline within Text

There are many kinds of subdivisions within the text of a chapter. The following visuals have been labeled (A, B and C) according to the level of importance. A head: indicates a clear break between the topics within a section. In the following examples, the ‘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.

Fig 1.3.12 A heads

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

Fig 1.3.13 B heads

C head: highlight specific facets of material within B head text. They don't interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold, and sans serif bold. C heads in this configuration are followed by at least an em space (two space bar presses) for visual separation.

Fig 1.3.14 C heads

Fig 1.3.15 A sequence of subheads = Hierarchy

Cross Alignment

Cross-aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms. Cross-align can be maintained by doubling the leading space of the text type.

When you have different bodies of text and there are different point sizes, it's very hard to maintain cross-alignment. However, if the difference in point size is not large, you will be able to maintain cross-alignment by doubling the leading space.
For example, if a paragraph of text is 13pts, you can double the bigger font sizes (headline) of the other column to 26 pts. Despite the discrepancy, because it's a doubling of the leading, the cross-alignment of the text will always remain.

Fig 1.3.16 Cross Alignment

In this example, 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.

WEEK 6

Typography 6/ Screen & print

Type for Print

The type was designed intended for reading from print long before we read from the screen. Designers should ensure the text is smooth, flowing, and pleasant to read. Common typefaces for print: Caslon, Garamond, Baskerville, Univers (elegant, intellectual, highly readable at small font size)

Fig 1.6.1 Type for Print

Type for Screen

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

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

Fig 1.6.2 Type for Screen

Hyperactive Link/ Hyperlink

A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found on nearly all Web pages, allowing users to click their way from one page to another. Text hyperlinks are normally blue and underlined by default.

Font Size for Screen

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

Fig 1.6.3 Font size for screen (left) vs print (right)

INSTRUCTION

Exercise 1: Type Expression

LECTURE

During class on Tuesday, week 1. We were assigned to come up with 7 words for our Type Expression Exercise and vote on the most popular in a poll on Facebook. The 7 most popular words are: Rain, Fire, Crush, Water, Dissipate, Freedom and Sick, among those 7 words I must select 4 words and sketch out ideas on how those words are should be expressed.

Word that I chose:

1) Fire

2) Rain

3) Dissipate

4) Freedom

Sketching:

Mr. Vinod had assigned us to do 3 sketches for each 4 words chosen from the 7 words given. Graphic elements were not advised to be used for this exercise.

Figure 1.4: 4 typeface sketch idea,Week 2 (10/4/2023)

Digitalization:

Digitalizing typeface in an expressive way is very challenging for me since I am still getting used to using Adobe illustrator. Some of the font doesn.t match up with mt previous font sketches.

Figure 1.5: Digital sketch,Week 2 (10/4/2023)

Figure 1.6: Digital sketch,Week 2 (10/4/2023)

Figure 1.7: Final chosen typeface "Freedom",Week 3 (18/4/2023)

Animation:

creating a gif animation is a new thing for me. I was struggling from the start but i managed to get through and get help by the tutorials given by Mr. Vinod in the YouTube playlist. The overcome of the gif is okay for me.

Fig 1.8: Final Animated GIF “Freedom", Week 3 (18/4/2023)

TASK 1: Exercise 2 - Text Formatting

For Exercise 2, we have to create one final layout of text formatting (i.e. type choice, type size kerning, leading, paragraph spacing, alignment, line length, etc.). This exercise will help us develop our skills with the appropriate software, Adobe InDesign, and our knowledge of information hierarchy and spatial arrangement.

1 Text Formatting : Kerning and Tracking

Kerning: adjusts the space between individual letterforms. You kern when there are awkward counter-spaces between the letterforms.

Tracking (letter-spacing): adjusts spacing uniformly over a range of characters.

Fig 3.1: Text formatting with kerning, week 4 (25/4/2023)

Fig 3.2: Text formatting without kerning, week 4 (25/4/2023)

Fig 3.3: Before and after changing the 'A' from Black to Bold, week 4 (25/4/2023)

Fig 3.4: Before and after kerning the letters 'A’ and 'm', week 4 (25/4/2023)

2 Text Formatting : Font Size, Line-Length, Leading & Paragraph Spacing

A good page layout is dependent on an attractive margin space. An equal margin space has no effect on the viewer. An unequal margin is attractive because the white space creates dynamism.
- Point size (for A4 or A3): 8 pt to 12 pt - Line length: 55 to 65 characters - Leading: +2 to 3 points of point size (depending on the typeface) - Paragraph spacing: Same as leading At a 9-point size → Check the number of characters in that row (55 to 65) → Set leading two points larger → Use the same unit as leading for paragraph spacing

- Body text: The positive and negative space is equal. There is an evenness in the spread of white and black/grey spaces.

Experimentation process

Fig 3.6: Font Size, Line-Length, Leading & Paragraph Spacing, week 4 (25/4/2023)

3 Text Formatting : Alignment, Paragraph Spacing, Text Fields

& Ragging

- Headings: Double the point size and leading of body text - Paragraph spacing: same as leading - Ensure same text width for the same text of information. If they are different widths, it is seen as separate pieces of information - Tracking and kerning: Do not exceed +3/-3 of tracking (Alt+arrow key) - Hyphenation: You can turn off hyphenation. If hyphenation is turned on, there can not be too many. - Flowing text from one column to another by linking with red plus - Use left align or left justify. Left alignment is preferred. - If there are lots of words, do not use the right alignment and central alignment - When using a justified alignment, the column space needs to be increased from 5mm to 7-10mm - If using justified, make sure there aren’t many rivers (large spaces between the words). You can adjust space using tracking/kerning.

Fig 3.7: Alignment, Paragraph Spacing, Text Fields & Ragging, week 4 (25/4/2023)

Fig 3.8: Final Text Formatting-jpg (without grids), week 4 (25/4/2023)

Fig 3.9: Final Text Formatting -jpg (with grids), week 4 (25/4/2023)

Fig 4: Final Text Formatting -Pdf (without grids), week 4 (25/4/2023)

Fig 4.1: Final Text Formatting -Pdf (with grids), week 4 (25/4/2023)

FEEDBACK:

Week 2 General Feedback: Avoid using graphical elements. Avoid using thin line stroke for fonts and use the 10 fonts given.

Week 2 Specific Feedback: Reduce graphical elements and use more fonts that are ready on the keypad itself.

Week 3 General feedback: Update and complete what have to be done in the blog.

Week 3 Specific Feedback: Get the digitalize typeface done n completed by week 4, avoid distortion and use simple fonts given.

Week 4 General Feedback: The less graphical elements involved the better.Please arrange our e-portfolio in the assigned order, take time doing and editing instead of rushing it. Watch the video tutorials for text formatting.

Week 5 General Feedback: The picture needs to be relevant to the article, and it needs to leave enough space, not too crowded. The spacing between paragraphs should not be too tight.

Week 5 Specific Feedback: The title has too much graphical element. The second layout’s title is recommended to be in the middle of the text.

Week 6 General Feedback: The idea of the titles/heading should make sense, the leading should not be too close, too much distortion in the words, there should be cross aligntment.

Week 6 Specific Feedback: Reduce adding too much heavy graphical elements for the thumbnail. as simple is much better.

REFLECTION

EXPERIENCE:

The classes throughout these five weeks was challenging and fun for me. There was some up and downs while doing Task 1: Excercises, As it was my first time learning the tools and how to manipulate the Adobe Softwares associated with this exercise. For type expression, it was fun as I get to express the words with some graphical elements and explore my potential with the challenges intended in this exercise. At the end, we even get to animate them however progress was a bit rushed to me as there are so much to do in so little time given. I found the lecture recordings for the tutorials to be exceptionally helpful during the exercises.

OBSERVATION:

From what I've observed, text formatting was as challenging as type expression however still i learned quite a lot from. Before leaning text formatting, I don't even realise how a layout of an article can affect the overall vibe when the viewer is reading. I am glad that I learned kerning, letterspacing, scaling, tracking that aided in the overall view of a text body or article.

FINDINGS:

I learned to pay attention to the details in this exercise and there is so many ways to express typo even with the restrictions given which forces us to explore our own creativity. Overall, I felt like I have learnt a lot of basics in typo which might be helpful in the upcoming assignments.

Search This Blog

Amirah Ali's Blog