TYPOGRAPHY / TASK 1: EXERCISES

╎Week 01

╎Gwendalyn Firly Bong / 0374580

╎Bachelor of Design (Honours) in Creative Media

╎Task 1: Exercises


TABLE OF CONTENTS

I. Lectures

II. Instructions

III. Process Work

IV. Feedback

V. Reflection

VI. Further Reading


I. LECTURES

Week 1: Typo_0_Introduction + Typo_1_Development 

What is Typography?
  • The act of creating letters
  • Geometrical shapes to create letters
  • The creation of typefaces
  • Can come in animated forms
  • I.e.: signage design, websites, app designs, books, posters
Typography has evolved over 500 years: calligraphy > lettering > typography
  • Calligraphy is the writing styles
  • Lettering is drawing out the letters
Who practices Typography?
  • "Typography is now something everybody does"
  • Typographers, typesetters, compositors, graphic designers, art directors, manga artists, comic book artists, and graffiti artists. 
A Font is an individual font or weight within the typeface, I.e. Georgia Regular, Georgia Italic, and Georgia Bold

A Typeface is an entire family of fonts or weights that share similar characteristics or styles, I.e: Georgia, Arial, Times New Roman, Didot, and Futura

Early Letterform Development: Phoenician to Roman
  • Initially, writing meant scratching into wet clay with sharpened sticks or carving into stone with a chisel
  • The forms of uppercase letters evolved from this
  • Uppercase letters are just a simple combination of straight lines and pieces of circles
  • Tools used for writing have a big impact in determining the typefaces

Figure 1.1: 4th century BCE, Phoenicians votive stele Carthage, Tusinia

  • The Greeks changed the direction of reading along with the orientation of letterforms
  • They developed a style of writing called "boustrophedon", which meant that the lines of text read alternately from right to left and left to right

Figure 1.2: Boustrophedon style

Figure 1.3: Greek fragment

  • Etruscan carvers work in marble-painted letterforms before inscribing them
Figure 1.4: Late 1st-century B.C.E Augustan Inscription

Figure 1.5: Late 1st-century B.C.E Augustan Inscription

Hand Script from 3rd - 10th Century C.E.
  • Square capitals were the written version that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes. 
    • Stroke width was achieved by the reed pen held at an angle of approximately 60 degrees off the perpendicular
Figure 2.1: Square Capitals

  • Rustic capitals are a compressed version of square capitals. They allowed for twice as many words on a sheet of parchment and took far less time to write. However, they were slightly harder to read due to their compressed nature.
    • The pen/brush was held at an angle of approximately 30 degrees of the perpendicular.
Figure 2.2: Rustic Capitals

  • Roman cursive was used during everyday transactions for speed. This is the beginning of lowercase letterforms.
Figure 2.3: Roman Cursive
  • Unicials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U, and Q. Simply, they are small letters
Figure 2.4: Unicials

  • Half Unicials mark the formal beginning of lowercase letterforms.
Figure 2.5: Half Unicials

  • Caloline Miniscule was invented to standardize the writing system.
Blackletter to Gutenberg's Type
  • In northern Europe, a condensed strongly vertical letterform known as "Black letter/Textura" gained popularity 
  • In the South, a rounder more open hand gained popularity called "Rotunda"
  • Gutenberg used all his skills to build pages that mimicked the work of a scribe's hand; Blackletter.
Typography Development/Timeline
  • 1450 Blackletter
    • earliest printing type
    • based upon the hand-copying styles used for books in Northern Europe
    • e.g. Cloiste Black
  • 1475 Oldstyle
    • Based upon the lowercase forms used by Italian humanist scholars for book copying along with the uppercase letterforms found inscribed on Roman ruins
    • e.g. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino
  • 1500 Italic
    • Echoes of contemporary Italian handwriting
    • Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms 
  • 1550 Script
    • Originally an attempt to replicate engraved calligraphic forms
    • Not entirely appropriate in lengthy text settings
    • Ranges from the formal and traditional to the casual and contemporary
    • e.g. Kuestler Script, Mistral, Snell Roundhand
  • 1750 Transitional
    • A refinement of old-style fonts
    • Achieved in part because of advancements in casting and printing
    • Thick-to-thin relationships were exaggerated, and brackets were lightened
    • e.g. Baskerville, Bulmer, Century, Time Roman
  • 1775 Modern
    • Represents a further rationalization of old-style letterforms
    • Serifs were unbracketed, and the contrast between thick and thin strokes extreme
    • e.g. Bell, Bodoni, Caledonia, Didot, Walbaum
  • 1825 Square Serif/Slab Serif
    • Originally heavy bracketed serif, with little variation between thick and thin strokes
    • Responded to the newly developed needs of advertising for heavy type in commercial printing
    • As they evolved, the brackets were dropped
    • e.g. Clarendon, Memphis, Rockwell, Serifa
  • 1900 Sans Serif
    • These typefaces eliminated serifs altogether
    • First introduced by William Caslon IV in 1816, but became more widespread at the beginning of the twentieth century
    • Variations tended toward either humanist forms or rigidly geometric
    • Occasionally, strokes were flared to suggest the calligraphic origins of the form
    • Referred to as grotesque and gothic
    • e.g. Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers
  • 1990 Serif/Sans Serif
    • A recent development
    • Enlarges the notion of a family of typefaces to include both serif and sans serif alphabets
    • e.g. Rotis, Scala, Stone

Week 2: Typo_3_Text_P1

Text/Tracking: Kerning and Letterspacing
  • Kerning is the automatic adjustment of space between letters
    • Kerning is NOT letterspacing
  • Tracking is the addition and removal of space in a word or sentence
  • Designers always letter space uppercase letters but are against letterspacing lowercase letters within the text
Figure 3.1: Kerning

Figure 3.2: Tracking

Text Formatting
  • Flush Left: This format mirrors the asymmetrical experience of handwriting
    • Each line starts at the same point and ends whenever the last word on the line ends
    • Spaces between words are consistent throughout the text
Figure 4.1: Flush Left

  • Centered: This format imposes symmetry upon the text, assigning equal value and weight to bot ends of any line
    • It transforms fields of text into shapes, adding a pictorial quality
     
    Figure 4.2: Centered

    • Flush Right: This format emphasizes the end of the line instead of the start
      • May be useful in situations where the relationship between text and image might be ambiguous
    Figure 4.3: Flushed Right

    • Justified: This format has a symmetrical shape on the text
      • Achieved by expanding or reducing spaces between words or letters
      • Results in the openness of lines that produce "rivers"
    Figure 4.4: Justified

    Text/Texture
    • Type with a generous X-height or a heavy stroke width produces a darker mass on the page as compared to a smaller X-height or a lighter stroke
    Figure 5: The Anatomy of a Typeface


    Text/Leading and Line Length
      • Type size: Should be large enough to be read easily at arm's length
      • Leading: Text set too tight encourages vertical eye movement, which causes readers to lose their place
        • Type set too loosely creates striped patterns that distract the reader
      • Line Length: A good rule of thumb is to keep line length between 55-65 characters
        • Extremely long or short line lengths impair reading

      Text/Type Specimen Book
      • A type specimen book shows samples of different typefaces in various different sizes
      • It is used to provide an accurate reference for type, type size, type leading, type line length, etc
          Figure 6: Type Specimen Book



          Week 3:  Typo_4_Text_P2 

          Text/Indicating Paragraphs
          • Pilcrow (¶): Indicates paragraphs, a holdover from the medieval manuscripts seldom used today
          • Leading/Line Space: Ensures cross-alignment across columns of text
          Figure 7.1: Leading

          Figure 7.2: Line Space vs Leading

          • Standard Indentation: The indent is the same size as the line spacing or the same as the point size of the text
          Figure 7.3: Standard Indentation


          • Extended Paragraphs: Creates usually wide columns of text
            • There can be strong compositional or functional reasons for choosing it
          Figure 7.4: Extended Paragraphs



          Text/Widows and Orphans
          • Widow: A short line of type left alone at the end of a column of text
            • The solution is to rebreak the line endings throughout the paragraph
          • Orphan: A short line of type left alone at the start of a new column
            • The solution is to make sure no column starts with the last line of a preceding paragraph
          Figure 8: Widows and Orphans


          Text/Highlighting Text
          • Italics, bold, color, different typefaces
            • Only CMYK for body text
            • Typically reduce the font size of the highlighted text by .5 to match the x-height of the serif typeface
            • All capital acronyms are also reduced by .5 to ensure visual cohesion
          • Quotation marks help to create a clear indent
            Figure 9.1: Different Ways to Highlight Text

            Figure 9.2: Font Size Decrease

            Text/Headline within Text
            • A Head: Indicates a clear break between the topics within a section
            • B Head: Subordinates to A heads
              • Indicates a new supporting argument or example 
              • Usually shown in small caps, italic, bold serif, and bold san serif
            • C Head: Highlights specific facets of material within B heads
              • Usually shown in small caps, italics, serif bold, and sans serif bold
              Figure 10: A, B, and C Head

              Text/Cross Alignment
              • Reinforces the architectural sense of the page

                Week 4:  Typo_5_Understanding

                Letters/Understanding Letterforms
                • Baskerville
                  • NOT symmetrical as:
                    • 2 different stroke weights
                    • Each bracket connecting the serif to the stem has a unique arc
                • Univers
                  • NOT symmetrical as:
                    • The width of the left slope is thinner than the right stroke
                • Helvetica VS Univers
                  • 2 similar sans-serif typefaces
                  • the lowercase "a" is slightly different
                    • The stems of the letterforms finish differently
                    • The speed at which the bowls meet the stems 
                Figure 11: Helvetica VS Univers

                Letters/Maintaining X-height
                  • X-height: Describes the size of the lowercase letterforms
                    • The curved strokes must rise above the median or sink below the baseline to appear the same size
                  Figure 12: Median and Baseline

                  Letters/Form/Counterform
                  • When letters are joined to form words, the counter form includes the spaces between them
                      Letters/Contrast
                      • Simple contrasts produce numerous variations
                        Figure 13:  Contrast


                        Week 5: Typo_6_Screen&Print

                        Typography/Different Medium
                        • In the past, typography was viewed as living only when it reached paper
                        • Today, typography not only exists on paper but on a multitude of screens
                          • e.g. operating systems, system fonts the device, and the screen itself
                        • Print Type VS Screen Type
                          • Type for print
                            • Intended for reading from print long before we read from the screen
                            • It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read
                            • Typefaces used for print: Caslon, Garamond, and Baskerville
                              • Because they are elegant, intellectual, and also highly readable when set at a small font size
                              • Versatile, easy to digest, classic typeface
                        Figure 14:  Print Type
                          • Type for Screen
                            • Optimized and often modified to enhance readability and performance onscreen in a variety of digital environments
                              • May include: A taller X-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, and modified curves and angles
                                • All these factors serve to improve character recognition and overall readability
                            • Hyperactive Link/Hyperlink
                              • A word/phrase/image that can be clicked on to jump to a new document or new section within the current document
                              • Found on nearly all web pages
                              • Allows users to click their way from one page to another
                              • Normally blue and underlined
                              • The cursor changes to a small hand when hovered over the link
                            • Font Size for Screen
                              • 16-pixel text on a screen is similar to the size of text printed in a book/magazine
                            • System Fonts for Screen
                              • Appears across all operating systems
                              • e.g. Open Sans, Helvetica, Lato, Arial, Georgia, Garamond, Courier New, Palatino
                        Figure 15:  Font Size for Print VS Screen
                            • Pixel Differential Between Devices
                              • The screens used by our PCs, tablets, phones, and TVs are different sizes, and the text on-screen differs in proportion too
                          Figure 16:  Pixel Differences
                          Static VS Motion
                          • Static Typography
                            • Has minimal characteristics in expressing words
                          • Motion Typography
                            • Fluid and kinetic letterforms
                            • Dramatic
                            • Often used in music videos and advertisements


                            II. INSTRUCTIONS




                            III. PROCESS WORK

                            Task 1 - Exercise 1

                            Research
                            The 4 words given to us were burn, melt, fade, and grow. To start, I went on Pinterest and searched for ideas that would help me. 
                            Figure 17:  Ideas from Pinterest

                            Ideation
                            Figure 18.1:  Original Sketches for Grow


                            Figure 18.2:  Original Sketches for Fade


                            Figure 18.3:  Original Sketches for Burn

                            Figure 18.4:  Original Sketches for Melt


                            Figure 18.5: Final Sketches


                            Figure 18.6: Final Choices + Explanations

                            Digitization
                            This is my first draft of the digitization. I used the fonts Gill Sans Std and ITC Garamond for the words. After consulting with Mr Max, he suggested several small adjustments.

                            Figure 19.1: Draft

                            • Grow: He suggested that changing the orientation of the word might help exaggerate the growing effect even more
                            • Burn: The ash effect was too dense
                            • Melt: The melting effect seemed a little unrealistic and suggested making it look more dynamic
                            I had the most trouble fixing the melt element. After some trial and error, I found out that the puddle would look more realistic if I had drawn it in a specific way:
                            Figure 19.2: Melt Research

                            After making the changes suggested, here is the final digitization:


                            Figure 19.3: Final Digitization

                            Figure 19.4: Final Digitization PDF


                            Animation
                            The next assignment involves animating one of the words I have digitized earlier. Mr Max suggested I animate the word "Melt" as it would have the most drastic and dramatic effect. 

                            First, I figured out how I wanted the orientation of the melt to be by sketching it out on Procreate. 

                            Figure 20.1: Animation Test using Procreate

                            After that, I transferred the sketch onto Adobe Illustrator. I slowly cropped out and rotated each of the letters at a specific angle. 

                            Figure 20.2: Gif Test 

                            After that, I slowly added the puddles the word would melt into. Since I didn't want the puddle to be too large and overpower the word, I only made 10 frames.


                            Figure 20.3: Gif Test 2


                            I was still unsatisfied with the way the word melted so I did a couple more trial runs, and I was finally satisfied with this.
                            Figure 20.4: Final Gif Test 

                            Figure 20.5: Final Frames



                            I then transferred each layer to Adobe Photoshop and here is the final result.
                            Figure 20.6: Final Animation 

                            Task 1 - Exercise 2

                            Figure 21.1: My Name in Different Fonts



                            Figure 21.2: Option 1

                            Figure 21.3: Option 2

                            Figure 21.4: Option 3


                            Figure 21.5: Option 4

                            Figure 21.6: Option 5


                            Figure 22: Option 6 (Final Layout)


                            Figure 23: Final Layout


                            Figure 24: Final Layout with Grids



                            Figure 25: Final Layout with Grids


                            IV. FEEDBACK

                            Week 1
                            General Feedback:  Introduction to typography and finished setting up my blogger

                            Week 2
                            General Feedback: Learned the basics and shortcuts for Adobe Illustrator and finalized the sketches for each word

                            Week 3
                            General Feedback: Transferred all the sketches into Illustrator and finished digitizing
                            Specific Feedback: 
                            • Grow: He suggested that changing the orientation of the word might help exaggerate the growing effect even more
                            • Burn: The ash effect was too dense
                            • Melt: The melting effect seemed a little unrealistic and suggested making it look more dynamic

                            Week 4
                            General Feedback: Started animating the word "melt" on Adobe Illustrator 

                            Week 5
                            General Feedback: We were introduced to the software Indesign and were tasked to our name using different typefaces, along with 6 compositions.  


                            V. REFLECTION

                            Experience
                            I was first exposed to the process of using Adobe Illustrator in this module. As it was my first time using this software, I struggled quite a bit. However, the recorded lectures helped a lot as they gave me the freedom to playback the videos and try them at my own speed.  

                            Observations
                            Thanks to Mr Max's feedback on my work, I was able to greatly improve on it.

                            Findings
                            Through this class, I found out that Adobe Illustrator wasn't as difficult as I thought it would be. For years, I have dreaded the thought of having to use this software in a professional space. After being introduced to it in this module, I started having fun exploring all the different ways I can design with the software. 



                            VI. FURTHER READING

                            Figure 26: Vignelli Canon on Design.pdf


                            In summary, this book is a guide to the basic principles and practices of design. He discusses topics like typefaces, texture, color, layout, margins, etc. Vignelli states that there are three aspects of Design that are important: Semantic, Syntactic, and Pragmatic. 

                            Semantics: Semantics means to understand all aspects of the subject of design. It highlights the importance of understanding the meaning behind a design project; to design something that has meaning. This involves researching the subject's history and context to better understand the nature of the project. Vignelli dislikes it when designers create crude and vulgar designs as it may disregard the consumers and creates visual pollution





                            Comments

                            Popular posts from this blog

                            ADVANCED TYPOGRAPHY / TASK 1: EXERCISES

                            DESIGN PRINCIPLES / TASK 1: EXPLORATION

                            DESIGN PRINCIPLES / TASK 2: VISUAL ANALYSIS & IDEATION