Typography - Lecture

Typography - Lecture

29.9.2023 - 5.1.2024 (Week 1 - Week 14)

Aidi Rafiq | 0353422 | Bachelor of Design (Honours) in Creative Media

TYPOGRAPHY

---

LECTURER

Our lecturer/tutor is Mr. Vinod, assign us to watch one of his videos/ lecture about the history of the development of fonts from the past and the basic understanding of fonts. 

Development and Timeline

• Early letterform development: Phoenician to Roman

fig 1.1 evolution of the Phoenician letters

Direction of writing -------------------------------------------------------------------------------------------------

• The Greek developed 'boustrophen' which is a style of writing that the lines of text read alternately from right to left and left to right. 
• As the direction changed based on the reading, they also changed the orientation of the letterform.

fig 2.1 'Boustrophedon' (how the ox ploughs)

fig 2.2 Greek fragment, stone engraving (Date unknown)

• Etruscan and then the Romans cravers work in a marble paint letterforms before inscribing them.
• Certain quality of the strokes changed the weight in vertical to horizontal, broadening of the strokes from start to finish.

fig 2.3 Late 1st century B.C.E., Augustan inscription in the roman Forum, Rome

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

Square Capitals

• In the Roman monuments, square capitals can be found in a written version. 
• They have serfis added in the letterforms to finish the main strokes

fig 2.4 4th or 5th century: Square Capitals

Rustic Capitals

• A compressed version of the square capitals. 
• Allowing twice as many words on the sheets of parchment. 
• Took less time to write.
• Faster and easier but slightly harder to read.

fig 2.5 Late 3rd - mid 4th century: Rustic Capitals

Roman Cursive

• Reserved for documents of some intended performance.
• Forms were simplified for speed reasons.

fig 2.6 4th century: Roman Cursive

Uncials

• 'Uncia' is a Latin for a twelfth of anything (one twelfth of foot)
• Incorporated some aspects of the Roman cursive hand (especially in the shape A, D, E, H, M, U n Q) 
• Better to think of it as a small letters 
• Uncials are more readable at small size than rustic capitals

fig 2.7 4th - 5th century: Uncials

Half-Uncials

• The marks formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

fig 2.8 C. 500: Half-uncials

Charlemagne

• First unifier of Europe since the Romans issued an edict in 789 to standardize all ecclesiastical text.
• Monks rewrote the text using both majuscules (uppercase, miniscule, capitalization and punctuation which set the standard for calligraphy for a century. 

fig 2.9 C. 925: Caloline miniscule

Blackletter to Gutenberg's type (Textura)

• Gaining popularity by a rounder more open hand gained popularity called 'rotunda' in the northern Europe while in the south.
• Based on Alcuin's miniscule

fig 2.10 C. 1300: Blackletter (Textura)

Blackletter to Gutenberg's type (Gutenberg)

• Gutenberg skills included in the engineering, metalsmithing, and chemistry. 
• He mimicked the work of the scribe's hand (Blackletter of nothern Europe)
• Type mold required a different brass matrix, or negative impression, for each letterform.

fig 2.11 C. 1455: 42 line bible, Johann Gutenbberg, Mainz.

Text type classification -------------------------------------------------------------------------------------------

1450 Blackletter

• Earliest printing type.
• in the northern Europe, the hand-copying styles were then used in the books.

e.g: Cloister black, Goudy Text

fig 3.1 : 1450 Blackletter

1475 Old-style

• Based upon the lowercase forms use by Italian humanist scholars for book copying
• Uppercase letterforms found inscribed on Roman ruins
• Calligraphic origins over 200 years as they migrated across Europe, from Italy to England.

e.g: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino 

fig 3.2 : 1475 Old-style

1500 Italic

• First italic were condensed and close-set, allowing more words per page
• Originally considered their own class of type, italics were soon cast to complement romans forms.
• Since the 16th century, all text typefaces have been designed with accompanying italic forms

fig 3.3 1500 Italic

1550 Script

• Attempt to replicate engraved calligraphic forms
• Enjoyed to be wide acceptance in shorter applications
• Not entirely appropriate in lengthy text settings
• Forms range from the formal and traditional to the casual and contemporary

e.g: Kuenstler Script, Mistral, Snell Roundhand

fig 3.4 1550 Script

1750 Transitional

• Refinement of old-style forms
• Thick to thin relationships were exaggerated, brackets were lightened

e.g: Baskerville, Bulmer, Century, Time Roman

fig 3.5 1750 Transitional

1775 Modern

• This represents a further rationalization of old-style letterforms
• Serifs were unbracketed, contrast between thick and thin strokes extreme
• Scotch Romans and more closely resemble transitional form

fig 3.6 1775 Modern

1825 Square Serif / Slab Serif

• Originally heavily bracketed serif
• These faces respond to newly developed needs of advertising for heavy type in commercial printing. 

e.g: Clarendon, Memphis, Rockwell, Serifa

fig 3.7 1825 Square Serif / Slab Serif

1900 Sans Serif

• These typefaces eliminate serifs altogether
• The strokes were flared to suggest the calligraphic origins of the form (Optima) 
• Referred to as grotesques 

e.g: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers

fig 3.8 1900 Sans Serif

1990 Serif/Sans Serif

• Style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets 

e.g: Rotis, Scala, Stone

fig 3.9 1990 Serif / Sans Serif

Text / Tracking: Kerning and Letterspacing ---------------------------------------------------------------

Formatting

• The term of 'Kerning' refers to automatic adjustment of spacing between the letters.
• Letterspacing means, adding space between the letters

fig 4.1 with and without kerning

fig 4.2 normal tracking, loose and tight tracking

• Every designer always letterspace the uppercase letters
• Uppercase letterforms are drawn to be able to stand their own
• lowercase letterform require to counterform created between letters to maintain the line of reading

fig 4.3 counterform (the black space)

fig 4.4 normal tracking, loose and tight tracking

Flush left

• Flush left is mirrors the asymmetrical experience of handwriting
• Space between the words are consistent throughout the text
• allowing even gray value

fig 4.5 Flush left

Centered

• imposes symmetry upon the text
• assigning equal value and weight to both and of any line
• centered type create a strong shape on the page
• important to amend line break so that the text does not appear too jagged

fig 4.6 Centered

Flush right

• this format emphasis on the end of a line as opposed to its start
• useful in a situation like where the relationship between text and image that are ambiguous

fig 4.7 Flush right

Justified

• It achieved by expanding or reducing space between words and between letters
• hyphenation is required to amend this problem whenever possible

fig 4.8 Justified

  

fig 4.9

Text / Indicating Paragraphs ------------------------------------------------------------------------------------

Pilcrow

• Pilcrow (¶) is a holdover from medieval manuscripts seldom use today
• Indicate paragraph spacing

fig 5.1 Piclrow being used

Leading

• Line space (leading) is in between the paragraphs
• If the line space is 12pt, the paragraph space is 12pt
• Maintain cross alignment

fig 5.2 Example of leading being used

Line space vs Leading

fig 5.3 Difference between line space n Leading

Indentation

• indent is the same size of the line spacing
• the same as the point size of your text

fig 5.4 Example of Indentation

Extended

• extended paragraph create unusually wide columns of text
• strong compositional or functional reasons for choosing it

fig 5.5 Example of Extended

Widow

• a short line of type left alone at the end of a column of text
• rebreak your line endings through out your paragraph so that the last line of any paragraph is not short

Orphan

• a short line of type left alone at the start of new column
• require more care by making sure that no column of text start with the last line of the preceding paragraph

fig 5.6 Example of Widow and Orphan

Text / Highlighting text --------------------------------------------------------------------------------------------

• There are some examples of how to highlight text within a column of text.

fig 6.1 Few examples of highlighting text

fig 6.2 Few examples of highlighting text

• San serif font (Univers) has been reduced by .5 to match the x-height of the serif typefaces. 8≠7.5 
• Reduced for San Serif font because the typeface end to look larger

fig 6.3 Highlighted using San Serif font

• by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensure readability is at its best

fig 6.4 (left) Highlighted using indented bullets. (right) highlighted using extended bullets

• Sometimes it is necessary to place certain typographic elements outside the left margin of colomn of type (extending as opposed to indenting) to maintaining a strong reading axis

fig 6.5 (left) Highlighted using indented bullets. (right) Highlighted using extended bullets

• Quotation mark, 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 6.7 Highlighted using quotation marks

Text / Headline within Text ---------------------------------------------------------------------------------------

• A headline indicates a clear break between the topics within a section.
• '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 7.1 Example for head (A head)

• B headline is a subordinate to A heads
• B heads indicate new supporting argument or example for the topic at hand

fig 7.2 Example for head (B head)

• C head is not common, highlights specific facets of material within B head text
• They are not materially interrupt the flow of reading
• C heads are shown in small caps, italic, serif bold and san serif bold

fig 7.3 Example for head (C head)

Text / Cross Alignment ---------------------------------------------------------------------------------------

• Cross alignment is a heading and captions with text type reinforces the architectural sense of the page
• The structure- while articulating the complimentary vertical rhythms

fig 8.1 Example of cross alignment

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

fig 8.2 Example of cross alignment

Basic / Describing letterform -----------------------------------------------------------------------------------

• Baseline is the imaginary line, the visual base of the letterform
• Median is the imaginary line defining the x-height of letterform
• X-height is the height in any typeface of the lowercase 'x'

fig 9.1 Baseline, Median, X-height

• Stroke is any line that defines the basic letterform

fig 9.2 Stroke

• Apex / Vertex is the point created by joining two diagonal sterms (apex above and vertex below)

fig 9.3 Apex/Vertex

• Arm short strokes off the stem of the letterform, either horizontal (E, F, L) or incline upward (K, Y)

fig 9.4 Arm

• Ascender is the portion of the stem of a lowercase letterform that projects above the media

fig 9.5 Ascender

• Barb is the half-serif finish on some curved stroke

fig 9.6 Barb

• Beak the half-serif finish on some horizontal arms

fig 9.7 Beak

• Bowl the rounded form that describes a counter. The  bowl may be either open or close

fig 9.8 Bowl

• Bracket The transition between the serif and the stem

fig 9.9 Bracket

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

fig 9.10 Cross Bar

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

fig 9.11 Cross stroke

• Crotch The interior space where two strokes meet

fig 9.12 Crotch

• Descender The portion of the stem of a lowercase letterform that project below the baseline

fig 9.13 Descender

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

fig 9.14 Ear

• Em/en EM is the distance equal to the size of the typeface and an EN is half the size of an EM. 
• Most often used to describe em/en spaces and em/en dashes

fig 9.15 Em/en

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

fig 9.16 Ligature

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

fig 9.17 Link

• Loop in some typeface, the bowl created in the descender of the lowercase G

fig 9.18 Loop

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

fig 9.19 Serif

• Shoulder The curved stroke that is not part of a bowl

fig 9.20 Shoulder

• Spine The curved stem of the S

fig 9.21 Shoulder

• Spur The extension the articulates the junction of the curved and rectilinear stroke

fig 9.22 Spur

• Stem The significant vertical or oblique stroke

fig 9.23 Stem

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

fig 9.24 Stress

• Swash The flourish that extends the stroke of the letterform

fig 9.25 Swash

• Tail The curved diagonal stroke at the finish of certain letterform

fig 9.26 Tail

• Terminal The self contained finish of a stroke without a serif
• Terminal may be flat ("T" above), grave, concave convex, or rounded as a ball or a teardrop (see finial)

fig 9.27 Terminal

Basic / The font ------------------------------------------------------------------------------------------------------

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

fig 10.1 Uppercase

• Lowercase Lowercase letters include the same characters as uppercase

fig 10.2 Lowercase

• Small Capitals Uppercase letterforms draw to the x-height of the typeface
• small caps are primarily found in serif as part of what is often called expert set

fig 10.3 Small capitals

• Uppercase numerals Same height as uppercase letters and are set to the same kerning width
• Tabular material or any situation that calls for uppercase letters is best used
• Also called Lining Figures

fig 10.4 Uppercase numerals

• Lowercase Numerals Are set to the x-height with ascender and descenders
• also known as old style figure or text figures

fig 10.5 Lowercase Numerals

• Italic The forms in an italic refers back to fifteenth century Italian cursive handwriting 
• Oblique are typically based on the roman form of the typeface

fig 10.6 Italic 

fig 10.7 Italic n Roman

• Punctuation, Miscellaneous Characters Can change from typeface to typeface
• Important to acquainted with all the characters before choosing the appropriate type for certain job

fig 10.8 Punctuation, Miscellaneous Characters

• Ornaments Used as flourishes in invitation or certificates
• Usually provided as a font in a larger typeface
• Few traditional or classical typeface contain ornamental fonts as part of the entire typeface family 

fig 10.9 Ornaments

Basic / Describing Typefaces -----------------------------------------------------------------------------------

• Roman Upper case forms are derived from inscriptions of Roman Monuments
• Slightly lighter stroke in roman in known as 'Book'

fig 11.1 Roman Typeface

• Italic Named for fifteenth century Italian handwriting on which the forms are based
• Oblique conversely are based on roman form of typefaces

fig 11.2 Italic Typeface

• Boldface Characterized by thicker the stroke than a roman form
• stroke widths within the typeface, it can also be called 'semibold'. 'median', 'black', 'extra bold', or 'super'

fig 11.3 Boldface Typeface

• Light Lighter stroke than the roman form
• even lighter strokes are called 'thin'

fig 11.4 Light Typeface

• Condense A version of the roman form
• extremely condense styles are called 'compressed'

fig 11.5 Condense Typeface

• Extended An extended variation of a roman font

fig 11.5 Extended Typeface

fig 11.6 Describing Typefaces

Basic / Comparing Typefaces ----------------------------------------------------------------------------------

These 10 typefaces mention below represent 500 years of type design.  Men and Women who rendered them all sought to achieve two goals

• easy to read
• appropriate expression of contemporary esthetics

fig 12.1 Comparing Typefaces

• The gross difference in x-height
• Forms of display a wealth of variety
• Line weight
• stroke widths and in feelings

The R's below display a range of attitude with some whimsical, stately, mechanical, harmonious, other calligraphic and some awkward

fig 12.2 Comparing Typefaces

Letters / Understanding letterforms --------------------------------------------------------------------------

The uppercase letter forms below suggest the symmetry, but in fact it is not symmetrical. Baskerville stroke form is more noteworthy that each bracket connecting the serif to the stem has a unique arc.

fig 13.0 Letterforms

Uppercase letter forms may appear symmetrical but its a close examination shows that the width of the left slope is thinner than the right stroke. Letterforms that are both internally harmonious and individually expressive.

fig 13.1 Letters

Letters / Maintaining x-height  ---------------------------------------------------------------------------------

the x-height generally describe the size of the lowercase letterforms. The curved stroke, such as in 's', must rise above the median in order to appear to be the same size as the vertical and horizontal stroke they adjoin

fig 13.2 maintaining x-height

Letters / Form / Counterform -----------------------------------------------------------------------------------

The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterforms unique and characteristics.

fig 13.3 Counterform

Letters / Contrast ---------------------------------------------------------------------------------------------------

The basic principles of Graphic Design apply directly to typography.

The following are some examples of contrast-the most powerful dynamic in design-as applied to type

 

The simple contrasts produces numerous variations: 

small + organic/large+machine; small+dark/ large light ...

fig 13.4 Contrast

Screen n Print --------------------------------------------------------------------------------------------------------

Type for Print

Primarily, type was design intended for reading from print long before we read from screen. The designer's job to ensure that the text is smooth, flowing and pleasant to read.

• They are versatile
• Easy to digest classic typeface
• neutrality and versatility that makes typesetting with it breeze

fig 14.0 example of the method of typesetting

Type for Screen

Typeface intended use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.

It includes

• x-height
• wider letterforms
• more open counter
• heavier think strokes n serifs
• reduced stroke contrast
• modified curves and angles

Hyperactive Link/ hyperlink

Hyperlink is a word, phrase or an image that you can click on to jump to a new document or new section within the current document.

Text hyperlink are normally blue and underlined by default.

When placing the cursor on the hyperlink, it will turn from an arrow to a small hand pointing at the the link.

System Font for Screen/Web Safe Fonts

Each devices comes with its own pre-installed font selections. Which is based largely on its operating system.

'Web safe' one, however, appear across all operating systems. They're the small collection of fonts that overlap from Windows to Mac to Google.

fig 14.1 example of font size for screen

The screens used by our PC's, tablets, phones and TVs are not only different sizes, but text we 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.

fig 14.2 Pixel differential between devices

Static vs Motion

Static typography 

Has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive of dynamic properties.

Billboards to poster, magazines to fliers, we encounter all forms of static typography with wide ranging purposes.

Motion Typography 

Temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni, 1999).

Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

Overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. 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.