Typography | Task 1 : Type Expression & Formatting

z25/09/2023 -29/09/2023 (Week 1 - Week 5)

Eshaa Dina Darsheeni | 0358298

Bachelor of Design (Hons) in Creative Media

GCD60104 | Typography | Sec 01

Task 1

SECTIONS

| LECTURES

| INSTRUCTION

| FEEDBACK

| REFLECTION

| FURTHER READINGS

LECTURES

Lecture 1

Introduction & Briefing

This was the first class of the semester. I got to know the instructor who will be teaching us in this typography class, Mr Vinod. He then gave us a brief introduction to this lesson and instruction on how to use the Microsoft Teams app. He then distributed resources for the class, including digital books and fonts, which we must utilise the rest of the semester. In addition, Mr Vinod was nice enough to suggest a number of books for the class to consult and learn. Mr Vinod went on to describe and introduce the distinictons between fonts and letterforms.

Lettering

The drawing of writings

Calligraphy

The type of writing style.

Typography

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

Typeface

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

Font

A font refers to the individual font or weight within the typeface (e.g Georgia Regular, Georgia Italic and Georgia Bold.)

Typography is used in various ways:

Animation
Website Design
App Design
Signage Design
Bottled Labels, Books and posters
Logo Type

Lecture 2

Before inscribing them, Etruscan (and later Roman) carvers painted letterforms in marble. The carved letterforms retained some of the characteristics of their strokes, such as a shift in weight from vertical to horizontal and a broadening of the stroke at the beginning and end

Late 1st century B.C.E., Augustan inscription in the Roman Forum, Rome

fig 1.0 Augustan inscription in the Roman Forum, Rome

fig 1.1 Phoenician to Roman

Hand scripts from the 3rd to 10th Century:

fig 1.2 4th or 5th century (Square capitals)

Square Capitals ( 4th/ 5th century)

Written letterforms that can be found in Roman Monuments. These letterforms have serifs added to finish of the main strokes.

fig 1.3 Late 3rd- mid 4th century (rustic capitals)

Rustic Capitals (Late 3rd-mid 4th century)

compressed form of square capitals, which required significantly less time to write and could fit twice as many words on a piece of parchment. Because they were compressed, they were a little more difficult to read even if they were quicker and simpler to complete.

fig 1.4 4th century ( Roman cursive )

Roman Cursive (4th Century;)

Used in everyday transactions, the writing is done in cursive hand with simplified form for quickness. Lowercase letterforms began in Roman cursive font.

fig 1.5 4th - 5th century ( Uncial )

Uncials (4th - 5th century;)

Incorporated a few Roman cursive hand elements. Letters in uncials are one inch tall. Rustic capitals are less readable at tiny sizes than the broad shapes of uncials.

fig 1.6 c.500 Half uncials

Half Uncials (C. 500;)

marks the official start of lowercase letterforms, complete with descenders and ascenders, two millennia after the Phoenician alphabet's creation.

fig 1.7 Caloline minuscule C.935

C. 935 (Caloline minuscule)

In 789, Charlemagne, the first European unifier since the Romans, proclaimed a standardisation of all sacred writings. Alcuin of York, the Abbot of St. Martin of Tours, was given this assignment by him. The monks revised the manuscripts using capitalization, punctuation, minuscule, and majuscule (uppercase), setting the norm for calligraphy for a century.

Blackletter to Guttenberg's Type:

fig 1.8 Blackletter C. 1300

Blackletter

With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condensed strongly vertical letterform known as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called ‘rotunda’. The humanistic script in Italy is based on Alcuin’s minuscule.

Lecture 2

Text Type Classification :

fig 1.9 Blackletter 1450

1450 (Blackletter)

The earliest printing type. Its forms were based on the hand-copying styles used in books in northern Europe at the time. (e.g. Cloister Black, Goudy Text).

fig 1.10 old style 1475

1475 (Old style)

Based upon the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins. The forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England.(e.g. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino).

fig 1.11 italic 1500

1500 (Italic)

First italics were condensed and close-set, like Italian handwriting, allowing more words per page. Italics were soon cast to match Roman forms rather than their own class. Most text typefaces have italics since the 16th century.

fig 1.12 script 1550

1550 (Script)

Attempts to copy engraved calligraphy. Long texts are unsuitable for this type. However, it has always been accepted in shorter applications. Forms range from formal and traditional to casual and modern. (e.g. Kuenstler Script, Mistral, Snell Roundhand).

fig 1.13 transitional 1750

1750 (Transitional)

A refinement of oldstyle forms. Advances in casting and printing helped create this style. Thick-to-thin relationships were exaggerated, and brackets were lightened. (e.g. Baskerville, Bulmer, Century, Time Roman).

fig 1.14 modern 1175

1775 (Modern)

This style represented a further rationalization of old-style letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes was extreme. English versions (like Bell) are also known as Scotch Romans and more closely resemble transitional forms.(e.g. Bell, Bodoni, Caledonia, Didot, Walbaum).

fig 1.15 square serif/slab serif 1825

1825 (Square Serif/Slab Serif)

Originally heavily bracketed Serifs with little variation between thick and thin strokes. These faces responded to the newly developed needs of advertising for heavy types in commercial printing. The brackets were removed as they evolved. (e.g. Clarendon, Memphis, Rockwell, Serifa).

fig 1.16 Sans Serif 1900

1900 (Sans Serif)

Eliminated Serifs altogether. First introduced by William Caslon IV in 1816 but only became widely used in the early 20th century. Variations included humanist forms (Gill Sans) and rigidly geometric styles (Futura). Occasionally, strokes were flared to suggest calligraphic origins (Optima). Sans Serif is also referred to as "grotesque" or Gothic. (e.g. Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers).

fig 1.17 Serif/Sans serif 1990

1990 (Serif/Sans Serif)

This new style enlarges the notion of a family of typefaces to include both Serif and Sans Serif alphabets — and often stages between the two. (e.g. Rotis, Scala, Stone).

Lecture 3

Tracking: Kerning and Letterspacing

fig 2.0 kerning and tracking

Kerning

Refers to the automatic adjustment of space between letters. Removing space between letters

Letterspacing

To add space between the letters.

Tracking

The addition and removal of space in a word or sentence.

Gray Value

The balance between the letters and the negative space.

Counterspace

The space between the actual shape of the letters. This has a bearing on readability.

fig 2.1 normal tracking, loose tracking and tight tracking

Normal tracking

The standard spacing between characters in typography, following the typeface's default settings for balanced readability.

Loose tracking

Increases the space between characters for creative or decorative text, often used in headlines or titles to achieve an open appearance.

Tight tracking

Reduces the space between characters to save space or create a more compact look, typically used sparingly to maintain readability, especially in limited space or design elements.

fig 2.3 counterform

Counterform

Black spaces between the white letterforms.

fig 2.3 normal and loose tracking comparision

fig 2.4 tight tracking

Normal tracking

While writing letterspacing, kerning, adding or removing letterspace from a text decreases its legibility; while considering a lengthy paragraph of text,vit's crucial to take into account not only the letterform but also the counterform, negative spaces between strokes, and the white areas that make up that specific word.

Loose tracking, tight tracking

Not advised to utilise letterspace on lowercase since the text has already been kerned and lowercased. Lowercase letters need counter form to maintain the line of reading while capital letters can stand alone. Adding letterspace breaks counter form, making the text less readable and making it more difficult to decipher the patterns that make up words.

Formatting Text

fig 2.5 flush left ragged right

Flush left

This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Gray value

Text on a white background. (Note: if the greyness is too dark, it means that there isn't enough leading or kerning, and it appears dark. If the grey is too light, it indicates that there is too much letterspacing or leading).

Ragging

The jagged edge/endpoint.

fig 2.6 centered ragged right and left

Centered

This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, it's important to amend line breaks so that text does not appear too jagged.

fig 2.7 flush right

Flush right

This format places emphasis on 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.

fig 2.8 justified

Justified

Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding

or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce 'rivers' of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

A number of variables, including cultural norms, individual preferences, and the need to express oneself, can influence type in one way or another. Nonetheless, bear in mind that the typographer's primary responsibility is to communicate the author's message in an appropriate and clear manner while arranging the field of type.
Simply put, type that draws the reader's attention to itself before they can focus on the words itself is interference and should be avoided. To put it simply, alter the type if you see it before the words.
It's critical to comprehend the textual sensation of various typefaces. Various fonts work well for various messages. A competent typographer must be aware of which fonts work best for the information being conveyed.
Think about the many textures that these typefaces have. Compared to text with a relatively smaller x-height/lighter stroke, type with a relatively wide x-height/heavy stroke width creates a darker mass on the page. For layouts to be successful, sensitivity to these colour variations is essential.

Texture

fig 2.9 Anatomy of a Typeface

fig 3.0 Different (Serif) typefaces & different gray values

Compositional requirement

Text should create a field that can occupy a page or a screen. Grey values vary between typefaces, with some being lighter and others being darker. (A middle grey value is the best choice and ideal for text.)

fig 3.1 Different (Sans serif) typefaces & different gray values

Different text designs are designed for different purposes, and it is necessary to know what the design is for.

Leading Line and Length

Encouraging easy, extended reading is the aim of text typesetting. A field of type should also take up the same amount of space on the page as a photograph.

Examples of bad leading:

- No leading, and the colour is too dark

- Too much leading, and the colour is too light

Type Specimen Book

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

It is often useful to enlarge 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. The difference one point leading can make — a difference that is unrecognizable at 100% on most monitors.

Keep in mind that nothing replaces looking closely at an actual printout of your work. The best screen is still an electronic approximation of the printed page — unless you are designing for screen, then judging type on screen is accurate.

Type Specimen Sheet

[Lecture 4]

Indicating Paragraphs

A holdover from medieval manuscripts seldom used today

Pilcrow (¶): A handwritten or typographical character used to indicate a paragraph. It is also called the paragraph mark (or sign or symbol), paraph, or blind P. The pilcrow may be used at the start of separate paragraphs or to designate a new paragraph in one long piece of copy.

Line space (leading)

Leading: Line space between paragraphs. As an example,if your text pt. size is 10, your leading will range from either 12/12.5/13 (2-3 pts. larger). If the leading is 12pt, your paragraph spacing should also be 12pt. The purpose of this is to ensure cross-alignment across columns of text.

Standard indentation

Standard indentation: Indent is the same size as the line spacing or the same as the point size of the text. Note that indentation is best used when the text is justified; otherwise, ragging will appear on both ends of each sentence.

Extended paragraphs

Extended paragraphs: Creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Line space vs. leading

Widows and Orphans

Designers (specifically those that deal with large amounts of text in websites, books, online magazines, printed magazines, newspapers, and online journals) must take great care to avoid the occurrence of the below-mentioned.

Widow: A short line of type left alone at the end of a column of text. The solution to widows is to rebreak line endings throughout the paragraph so that the last line of any paragraph is not noticeably short.

Orphan: A short line of type left alone at the start of a new column. The solution to orphans requires more care by making sure that no column of text starts with the last line of the preceding paragraph.

Highlighting Text

The following are some simple examples of how to highlight textwithin a column of text. Different kinds of emphasis require different kinds of contrast.

Italic/Bold text

Change of type family/colour of text)

For colour printing, you can only change the colour of the text to either black, cyan, magenta, or yellow (although yellow will be unreadable).

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

Create a box around the text indentation or without indentation

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

Typography: Text / Headline within Text

Typographers need to make sure that the information they are trying to convey makes the reader aware of what is important in the text

A head indicates a clear break between the topics within a section. lnthe following examples 'A' heads are set larger than the text, in smallcaps and in bold. The fourth example shows an A head 'extended' tothe left of the text.

The B head here is subordinate to A heads. B heads indicate a newsupporting argument or example for the topic at hand. As such theyshould not interrupt the text as strongly as A heads do. Here the Bheads are shown in small caps, italic, bold serif, and bold san serif

The C heads, although not common, highlights specific facets ofmaterial within B head text. They not materially interrupt the flow ofreading. As with B heads, these C heads are shown in small caps.italics, serif bold and san serif bold. C heads in this configuration arefollowed bv at least an em space for visual separation.

Headline Within Text

There are many kinds of subdivisions within the texts of chapters. The following visuals have been labelled (A, B and C) according to the level of importance. It is important to make sure these heads clearly signify to the reader the relative importance within the text and their relationship to each other.

A head

Indicates a clear break between the topics within a section.

First example

Shows an A head in a different type family, and in bold.

Second example

Shows an A head in a different type family, in bold and 'extended' to the left of the

text.

Third example

Shows an A head in the same type family, but in a larger size.

Fourth example

Shows an A head in the same type family, but in small capitals.

B heads

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.

In the examples shown above, the B heads are shown in small caps, italic, bold serif, and bold san serif. The B heads are not using a paragraph space, but are using a force line break (following the leading space).

C heads

Highlights specific facets of material within B head text. They do not materially interrupt the flow of reading.

In the examples shown above, as with B heads, 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 (or two spaces/spacebars for visual separation) between the C head and the beginning of the text for that particular paragraph/column.

A sequence of subheads (hierarchy)

a sequence of subheads (hierarchy). Obviously, there is no single way to express hierarchy within text; in fact, the possibilities are virtually limitless.

Cross Alignment

Cross Alignment (a)

Cross-aligning headlines and captions with text type reinforces the architectural sense of the page — the structure — while articulating the complimentary vertical rhythms.

Cross Alignment (b)

Fig 3.19 shows the example of one line of heading 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.

[Lecture 5]

Basic

Describing Letterforms

Baseline, median, x-height

Baseline: The imaginary line at the visual base of the letterforms.
Median: The imaginary line defining the x-height of letterforms.
X-height: The height in any typeface of the lowercase ‘x’.

Stroke

Stroke: Any line that defines the basic letterform.

Apex/Vertex

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

Arm

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

Ascender

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

Barb

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

Beak

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

Bowl

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

Bracket

Bracket: The transition between the serif and the stem.

Cross Bar

Cross Bar: The horizontal stroke in an uppercase letterform that joins two stems together.

Cross Stroke

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

Crotch

Crotch: The interior space where two strokes meet.

Descender

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

Ear

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

Em/en

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.

Finial

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

Leg

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

Ligature (right)

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

Link

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

Loop

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

Serif

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

Shoulder

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

Stem

Spine: The curved stem of the S.

Spur

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

Stem

Stem: The significant vertical or oblique stroke.

Stress

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

Swash

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

Tail

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

Terminal

Terminal: The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

The Font

Uppercase letters

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

Lowercase letters

Lowercase: Lowercase letters include the same characters as uppercase.

Small Capitals (a)

Small Capitals: Uppercase letterforms drawn to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called an expert set.

Small Capitals (b)

Most type software includes a style command that generates a small cap based on uppercase forms. Do not confuse real small caps with those artificially generated.

Uppercase Numerals

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.

Lowercase 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 whenever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans-serif typefaces than in serif.

Italics

Italic: Most fonts today are produced with a matching italic. Small caps, however, are almost always only Roman. The forms in italics refer back to fifteenth-century Italian cursive handwriting. Oblique is typically based on the Roman form of the typeface.

Italic vs. Roman

Punctuation, miscellaneous characters

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.

Ornaments

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

Roman

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’.

Italics/Oblique

Italic: Named for fifteenth-century Italian handwriting on which the forms are based.
Oblique: Conversely are based on the Roman form of typeface.

Boldface

Boldface: Characterized by a thicker stroke than a Roman form. Depending upon the relative stroke widths within the typeface, 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

Light: A lighter stroke than the Roman form. Even lighter strokes are called ‘thin’.

Condense

Condense: A version of the Roman form, and extremely condensed styles are often called ‘compressed’.

Extended

Extended: An extended variation of a Roman font.

Describing typefaces

Comparing Typefaces

Comparing typefaces

Differences in x-height, line weight, stroke widths, and feeling convey specific use and expression. The letter Rs demonstrates a range of attitudes, from whimsical to stately, mechanical to calligraphic, harmonious to awkward. This examination reveals your feelings about type and typeface, influencing your judgment of appropriateness in type choices.

[Lecture 6]

Letters

Understanding Letterforms

Baskerville 'A'

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Univers 'A'

The uppercase letterforms may also appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville (previous) and Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Helvetic vs. Univers (a)

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

Helvetica vs. Univers (b)

Maintaining X- height

Median / Baseline (a)

X-height: Generally describes the size of the lowercase letterforms. 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.

Median / Baseline (b)

Form/ Counterform

Form (white spaces) / Counterform (black spaces)

Counterform (or counter): The space describes, and is often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well you handle the counters when you set type determines how well words hang together — in other words, how easily we can read what’s been set.

Helvetica (Black) vs. Baskerville

The examinations in the picture above provide a good feel for how the balance between form and counter is achieved and a palpable sense of the letterform’s unique characteristics. It also gives you a glimpse into the process of letter-making. It is worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to lose its identity, as individual elements are examined without the context of the entire letterform.

Contrast

The basic principles of Graphic Design apply directly to typography. The pictures below are some examples of contrast — the most powerful dynamic in design — as applied to type, based on a format devised by Rudi Ruegg.

The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light …

Helvetica (Bold) vs. Baskerville

Contrast

[Lecture 7]

Typography in Different Mediums

Type For Print

Type for Print (a)

Long before screen reading, type was designed for print. Designers ensure text is smooth, flowing, and pleasant to read. The most popular print typefaces are Caslon, Garamond, and Baskerville as they are elegant, intellectual, and highly readable at small font sizes. They are also versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze

Type for Print (b)

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, as well as modified curves and angles for some designs.

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

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 in nearly all Web pages, allowing users to click their way from one page to another. Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.

Font Size For Screen

16-pixel text on a screen is about the same size as text printed in a book or magazine; this accounts for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. 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.

System Fonts For Screens

Web Safe Fonts

Every device has a different set of pre-installed fonts. which is primarily determined by its operating system. The issue is that they are all slightly different. Devices running Windows may have a single group. MacOS ones, however, draw from one another. Then, Google's Android operating system makes use of its own.

Let's say that the site's designer chose a strange, premium font family. The font that appears will revert to a simple version of Times New Roman if you don't already have it installed and it's not pulled from a web-friendly location (more on that later). However, you, the visitor, wouldn't necessarily be aware of that. It would simply appear ugly to you.

Conversely, "web safe" ones work with all operating systems. These are the little set of fonts that are overlapping across Google, Mac, and Windows platforms. e.g., Georgia, Palatino, Garamond, Times New Roman, Times, Open Sans, Lato, Arial, Helvetica, and Courier New.

Pixel Differential Between Devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different-sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV. Even within a single device class, there will be a lot of variation.

Static

Static typography: Minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide-ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

Motion

Motion Typography: Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woolman and Bellantoni, 1999). Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood

Seven (1995). Opening titles designed by Kyle Cooper

https://youtu.be/fhDMIaPyOwg

INSTRUCTION

TASK 1: EXERCISES

EXERCISE 1

TYPE EXPRESSION

Choose 4 words from Dizzy, Electric, Fire, Cry, Gun, Slide, and Freeze to compose and express.

Begin by sketching out ideas.

Once the ideas are selected, work with the 10 typefaces provided in the digitisation 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.

SKETCHES

Sketches

Electric :

For this font i tried to incoporate lightning bolts in the font

Fire :

I thought of the shape of flames, and wanted to express the strokes of the letters with the shape of flames. Then i designed the letters as flames because i wanted it to seem like the word was on fire.

Dizzy :

The word dizzy makes me think of distortedness. So i made each letter in different sizes so that it looks like its moving in a a weird way.

Cry :

For this font i wanted it to give a flowing look.

Gun :

I wanted the edges of the font to look like the handles of a gun.

Slide :

The letter S and D represents a slide.

Freeze :

For this word i thought about it melting and then decide to make it look frozen but with icicles around the font.

DIGITIZATION

We then needed to digitise the sketches and drafts using Adobe Illustrator. I had a bit of trouble at the beginning because i was new to the app but then i eventually got the hang of it.

Digitization of sketches

In the end, i chose 4 designs for the digitization.

Digitization jpg

Digitization pdf

For this part i was required to choose one design from the final four of the digitization. I ended choosing the word slide.

draft of the Gif

Then i had to make a gif of the word above using Adobe Illustrator. It wasn't as hard as i thought it would be because we had to follow a youtube video on how to do the task provided by the lecturer.

Final Animated Type Expression "Slide"

KERNING AND TRACKING

For this part of the task, we had to do in Adobe inDesign. First we had to choose a type of font from the 10 fonts given at the start of the semester and then edit it to make it look more proper and spaced well.

Final kerning and tracking

Final Text Formatting

Final text formatting

final text formatting pdf

Final Text Formatting (Gridlines)

Final Text Formatting with gridlines

Final text formatting with gridlines pdf

Text Formatting Details

Font/s: Gill Univers Lt Std

Type Size/s: 33

Leading: 0

Paragraph spacing: 11

BODY

Font/s: Univers LT Std

Type Size/s: 9

Leading: 0

Paragraph spacing: 11

Characters per-line: 50-65

Alignment: Left Align

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 50 mm bottom

Columns: 4

Gutter: ? mm

FEEDBACK

Week 2

General feedback: Logical distortion is acceptable. Sometimes changing the font itself can fulfil the task (meaning). Try to use punctuation, e.g. brackets. Using typing directly is not sketching Drawings can’t be too expressive and minor distortions are allowed. Try to use minimal graphical.

Week 3

General feedback: When all 4 words are combined, make sure it has a balanced black and white and powerful impressions. Add more white space. Avoid stretching text. Test out several fonts. Over the following 48 hours, work on improving, reworking, or exporting them; after that, set one of them to motion. Always look for alignment points and learn to build type appreciation and sensitivity. Place a white colour background for each layer and If not when exported as a gif, it won’t show a background. Observe the mechanics/dynamics of the animation for it to be smooth.

Week 4

General feedback: Emphasize the meaning literally. Generally for those text/objects dropping downwards, can consider letting them fall completely.

Week 5

General feedback: 55 to 65 characters per line (45 minimum), gutter space between 10 to 5 to 7 mm, space between captions and images should at least be 4 to 5 mm and choose images that are related to the text. Adjust the grid before changing the layout.

REFLECTIONS

Experience

Typography plays a crucial role in communication and design, making it a fundamental aspect of various fields such as graphic design, advertising, web design, and publishing. Its importance lies in its ability to enhance the readability, legibility, and overall aesthetic appeal of written content.

It also plays a significant role in creating and reinforcing a brand's identity. The choice of typeface, its style, and consistency across different platforms and materials contribute to establishing a brand's personality, values, and recognition.

Other than that, typography can evoke specific emotions and set the mood for the content. Different typefaces convey distinct feelings, such as elegance, playfulness, seriousness, or informality. Designers can leverage typography to align the visual tone with the desired emotional response.

Observations

Typography influences how readers engage with content on both conscious and subconscious levels. Font choices, spacing, line height, and alignment can evoke emotional responses and affect readability, comprehension, and even retention of information. For instance, a clean, legible font may convey a sense of clarity and professionalism, fostering trust and confidence in the reader.

Typography plays a crucial role in making content accessible to individuals with visual impairments or reading difficulties. Clear, well-spaced typefaces, appropriate contrast between text and background, and proper font sizes are vital for ensuring inclusivity and readability for all users.

Findings

Through personal experience and observations, it becomes evident that typography is a pervasive and influential aspect of our daily lives, with a significant impact on consumer choices and the effectiveness of communication.

In summary, typography is essential for effective communication, readability, brand identity, emotional impact, user experience, and accessibility. It is a powerful tool that shapes the way information is presented and received, making it a vital consideration in any design or communication project.