Typography:Task1 Type Expression and Formatting
23.04.2024
You Siyuan/0366978
Typography/Design in Creative Media
Task1
TABLE OF CONTENTS
1. Lectures
2. Instruction
3. Process work
4. Feedback
5. Reflections
Lectures
Lecture1:Introduction
It mainly talks about the art and technique of typesetting, and how the written language can be more readable, easy to read and attractive when displayed. Font All fonts/fonts with similar features/styles.
The use of upper and lower case stems from the habit of writing the first letter of words and sentences larger, and later these larger letters were unified into the font used in ancient Greece and Rome, that is, we know the capital letter, and the rules for the use of upper and lower case letters were gradually unified in the past three hundred years, so it also caused different rules of upper and lower case in different languages.
1450 Blackletter
The earliest printing type, its forms were based upon the hand-copying styles that were then used for books in northern Europe.
1475 Oldstyle
Based upon the lowercase forms used by ltalian humanist scholarsfor book copying (themselves based upon the ninth-century Carolineminisule) and the uppercase letterforms found inscribed on Romanruins, the forms evolved away from their calligraphic origins over 200years, as they migrated across europe, from ltaly to England.
Echoing contemporary ltalian handwriting, the first italics werecondensed and close-set, allowing more words per page. Althoughoriginally considered their own class of type, italics were soon cast tocomplement roman forms. Since the sixteenth century, virtually all texttypefaces have been designed with accompanying italic forms.
1550 ScriptOriginally and attempt to replicate engraved calligraphic forms, thisclass of type is not entirely appropriate in lengthy text settings. Inshorter applications,however, it has always enjoyed wideacceptance. Forms now range from the formal and traditional to thecasual and contemporary.
1750 Transitional
A refinement of oldstyle forms, this style was achieved in partbecause of advances in casting and printing. Thick to thinrelationships were exaggerated, and braokets were lightened.
1775 Modern
Serifs are unbracketed, and the contrast between thick and thin are extreme.
1825 Square Serif / Slab Serif
Unbracketed with little variation between thick and thin strokes.
1900 Sans Serif
Eliminated serifs.
1990 Serif / Sans Serif
Includes both serif and sans serif alphabets.
Lecture2: Development
In order to identify a particular font, it is necessary to understand the components of a font.
Baseline:
Visual base (imaginary) of the letterforms.
Median:
(lmaginary) line defining the x-height of letterforms.
X-height:
The height of the lowercase 'x'.
Stroke:
Any line that defines the basic letterform.
Apex/Vertex:
Point created by ioining two diagonal stems
Arm:
Short strokes off the stem of the letterform.
Ascender:
Portion of the stem of a lowercase letterform that projects above the median line.
Barb:
Half-serif finish on some curved stroke.
Beak:
Half-serif finish on some horizontal arms
Bowl:
Rounded form that describes a counter.
Bracket:
Transition between the serif and stem.
Cross Bar:
Horizontal stroke in a letterform that joins two stems together.
Cross Stroke:
Horizontal stroke in a letterform that joins two stems together.
Crotch:
Interior space where two strokes meet.
Descender:
Portion of the stem of a lowercase form that projects below the baseline.
Ear:
Stroke extending out from the main stem or the body of the letter form.
Em:
Distance equal to the size of the typeface
En:
Half of the em.
Finial:
Rounded non-serif terminal to a stroke.
Ligature:
Character formed by the combination of two or more letterforms.
Link:
Stroke connecting the bowl and the loop of a lowercase G.
Loop:
Bowl created in the descender of the lowercase G (in some typefaces)
Serif:
Right-angled or oblique foot at the end of the stroke.
Shoulder:
Curved stroke that is not part of a bowl.
Spine:
Curved stem of the S.
Spur:
Extension the articulates the junction of the curved and rectilinear stroke.
Stem:
The significant vertical or oblique stroke.
Stress:
Orientation of the letterform, indicated by the thin stroke in round forms.
Swash:
The flourish that extends the stroke of the letterform.
Tail:
The curved diagonal stroke at the finish of certain letterforms.
Terminal:
Selfcontained finish of a stroke without a serif.
Fonts are divided into upper and lower case, small capital letters, upper and lower case numbers, italics & Roman, punctuation and miscellaneous characters, ornaments.
The described fonts are Roman & italic, blackface and light, condensed and expanded.
Lecture3:Text
Kerning is the automatic adjustment of the spacing between letters. It is often incorrectly referred to as "letterspacing". In practice, letter spacing means adding space between letters. Adding or removing Spaces in words or sentences is called "tracking."
Legibility is always the most important thing.
Flush left
Centered
Flush right
Justified
Different fonts are suitable for different messages. A good typographer must know which font is best for the information at hand. Fonts with relatively large x-heights or stroke widths produce darker quality on the page than fonts with relatively small x-heights or lighter strokes. Sensitivity to these color differences is fundamental to creating successful layouts.
Type size:
Text type should be large enough to be read easily atarms length-imagine yourself holding a book in your lap.
Leading:
Text that is set too tightly encourages vertical eyemovement; a reader can easily loose his or her place. Type that is settoo loosely creates striped patterns that distract the reader from thematerial at hand.
Line Length:
Appropriate leading for text is as much a function of theline length as it is a question of type size and leading. Shorter linesrequire less leading; longer lines more. A good rule of thumb is tokeep line length between 55-65 characters. Extremely long or shortlines lengths impairs reading.
Lecture4:Text(2)
Extended paragraph
Pilcrow Relics of medieval manuscripts.
Paragraph spacing When the size of the line spacing and paragraph spacing are the same, cross alignment is implemented.
Indentation is usually the same size of the line spacing or dot of the text.
Widow is a short line of type left alone at the end of a column oftext.
Orphan is a short line of type left alone at the start of new column.
Different ways to emphasize the text are: italics, bold, bold + changing the font (note :sans serifs usually look larger than serifs), or changing the color. Another way to highlight text is to place a colored area to emphasize the text. Different methods are: italic, bold, bold + change the font (note :sans serifs usually look larger than serifs), or change the color. Another way to highlight text is to place a colored area behind the text.
Lecture5:Basic
Designers design letters with subtle or obvious changes in detail, so contrast is the most powerful driving force in design.
Instructions
Process work
Task1 Exercise1:Type Expression
It must be expressive, meaningful, easy to understand, and include only alphabetic forms.
Taking into account the meaning of the words themselves, nine styles are designed around these.
We need to choose the appropriate font to handle the selected word.I decided to design balance，flow，roll，jump.
SKETCHES
 |
| fig.1.1draft |
Final Outcome (Type Expression)
 |
| 1.2final outcome |
This week we chose from last week's drafts that we were happy with as the final product.
Typeface Animation
FINAL Animation Type Expression
 |
| fig1.3final |
This week the teacher talked about how to turn a picture into a GIF.
Task1 Exercise2:Type Formatting
1)Kerning&Tracking
 |
| fig2.1typeface course |
FINAL Name Kerning
2)Text Formtting
 |
| fig2.2 final |
Week5
Final Outcome (Text Formatting)
 |
| fig3.1Course ，Week5 |
Font/s: ITC New Baskerville (Bold)
Type Size/s: 60 pt
Leading: 63 pt
BODY
Font/s: ITC New Baskerville (Roman)
Type Size/s: 11 pt
Font/s: ITC New Baskerville (Roman)
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Paragraph spacing: 13 pt
Character per-line: 55-56 characters
Alignment: left aligment
CAPTIONS
Font/s: ITC New Baskerville (Italic)
Type Size/s: 10 pt
Type Size/s: 10 pt
Leading: 13 pt
Margins: 12.7 mm top, 12.7 mm left, 12.7 mm right, 12.t mm bottom
Columns: 4
Gutter: 5 mm
Columns: 4
Gutter: 5 mm
 |
| fig 3.2 Final Task without visible Grid |
 |
| 3.3Final Task with visible Grid |
Feedback
Week1 Do a good blog and provide links to the typesetting page. Each section of the blog is clearly defined.
Week2 Use mind maps for adequate word exploration. Better designs and suitable fonts can be chosen for digitization.
Specific feedback: "Jump" reminds people of sports, and that's good.
Week 3 Talked about things like understanding words and designing fonts.I learned to type according to the meaning of the words.
Week4 General feedback: We are encouraged to read at least 2-3 books and record them in the blog section before further reading.
Specific feedback: I think the lecture was very good. My teacher encouraged me to keep this for future assignments. For gif animations, this can be improved by showing a conversion from the original font and then a wobble effect.
Wee5 General feedback: Text formatting is done using InDesign. Update me for further reading and mention the dates in that part.Specific feedback: Adjust font spacing to add neatness to the article.
Reflections
Experience
With the introduction of this module, we have created our e-portfolio. I found myself nervous because everything was new to me and the language was a challenge for me. I need some time to adjust to the new educational environment. From the second week, we gradually entered our first task, which is the font expression design. We limit the use of 10 fonts, and the text we design cannot be overly distorted and presented in the form of illustrations. When I started sketching, I thought it wasn't hard to have ideas, but coming up with unique and creative ideas was the hard part. During the digital phase, I spent a long time getting familiar with Adobe Illustrator. Almost every step was done while watching the tutorial, as I had barely touched the software before. The difficulties I encountered during the GIF-making stage were basically operational issues that required a lot of time to adjust and make, but overall I enjoyed it.
Observe
In the course of doing this task, I observed that several key points of this design that are visually impressive are that the design and meaning of the font all reflect the same personality, easy to read and recognize, and contrast.
Survey result
I realized that this module is not as easy as I thought, and I think it must be the most challenging module of this semester. But also a little excited, this will be a good start to becoming a good designer, as Mr. Vinod said, typography is the foundation of design, "you can't run until you can walk". There are many complex principles and rules in typography. In this project, we need to spend a lot of time to improve our ability and aesthetic. The way to learn is to observe and practice.
Further Reading
Week1
Fig. 4.1 Typographic Design: Form and Communication (2015).
Author: Carter, Rob, Meggs Philip B., Day Ben, Maxa Sandra & Sanders Mark
Publishing year: 2015
Publisher: WILEY
After roughly reading this book, I realized it is the definitive reference for graphic designers, providing a comprehensive introduction to the visual world. This book offers essential topics including letterforms and negative space, messaging, processes, and history, which aspiring designers will find useful in mastering these critical concepts. When used well, typography may convey far more than just the words themselves.
Fig. 4.2 Content of Typographic Design: Form and Communication (2015).
Fig. 4.3 Conclusion of Typographic Design: Form and Communication (2015)
1. Understand design factors as they relate to type.
2. Explore communication and typographic messaging.
3. Learn how typography has evolved, and where it is headed Adopt established approaches to designing with type.
WEEK 2
1. Metal type measurement: The small sizes of text type necessitated the development of a measuring system with extremely fine increments.
2. Spatial measurement: These intervals are: interletter spacing which is the interval between letters; interword spacing which is wordspacing; Interline spacing which is the interval between two lines of type.
WEEK 3
Fig. 4.5 Structuring Web Page
1. Site structure and architecture: The scope of this chapter prevents an in-depth investigation into the complex realm of website architecture and navigation. It remains important to emphasize, however, that the ability to successfully travel through a site depends on navigational hierarchies. Users must be assured that they can move efficiently about a site's pages and find the information they seek without getting lost in the process.
2. Page structure and spatial organization: The possibilities for designing web pages and controlling their appearance continue to advance. Compared to the infancy of web design, designers enjoy many technological advances that contribute to improved legibility, page organization, visual hierarchy, aesthetics, expression, efficiency, consistency, and adaptability to change.
WEEK 4
Fig. 4.6 A Multidimensional Language.
I learned that Typography is a dynamic communication medium that can be read, seen, heard, and interpreted verbally, visually, and audibly. Its evolution during the early twentieth century was influenced by social, philosophical, and technological changes. The Futurist Manifesto, written by Filippo Marinetti in 1900, emphasized technology, violence, danger, movement, and speed.
WEEK 5
Fig. 4.7 A Case Study - Helmut Schmid: Design is Attitude.
The Helmut Schmid: Design is Attitude site (Fig, 8-35) reflects the results of the "Schmid Today" project, a three-year research project about the designer and typographer Helmut Schmid. The results of the project are an international exhibition: a book, Design Is Attitude; a documentary; and this website. Schmid's prodigious work and career spans forty years.
After training as a typesetter, Schmid (b.1942 in Ferlach, Austria) studied at the Basel School of Design under Emil Ruder, Kurt Hauert, and Robert Buchler.
The website reflects the essence of Schmid's typographical work: an integration of clarity, functionality, and visual poetry. The Dutch designer Wim Crouwel has said, "Helmut Schmid ... his typography has rhythm ... it is created by the eye and resembles a musical score."
Comments
Post a Comment