TYPOGRAPHY TASK2
Tuesday,Sep 26.2023
2023.10.24-2023.11.07/Week5-Week 7
Jia Wenbing /0365436/
Typography/Bachelor of Design in Creative Meadia
LECTURES
Lecture 6 - Typo_5_Understanding
Lecture 7 - Typo_6_Understanding
EXERCISE
FEEDBACK
REFIECTION
FURTHER READING
INSTRUCYIONS
Module Information Booklet
LECTURES
Lecture 6 - Typo_5_Understanding
For week 6, Mr. Vinod introduced us to the symmetry of letters and the difference between different fonts.
Fig 1.49 symmetry of letters, Week 05 (24/10/2023)
The asymmetrical letters have unique arcs at each bracket connecting the serif and stem.
Fig 1.50 symmetry of letters, Week 05 (24/10/2023)
The uppercase letter forms may 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
Fig 1.51 symmetry of letters, Week 05 (24/10/2023)
Helevetica: The top curve tapers towards a specific end.
Univers: Tapers in the middle and spreads out at the ends
Seemingly similar fonts, subtle differences have huge impact on readability.
Fig 1.52 symmetry of letters, Week 05 (24/10/2023)
Curved strokes must be above the baseline (or sink below the baseline) in order to appear vertical and horizontal strokes similar to them, if a curved letter such as "s" visually it will look smaller.
Fig 1.53 symmetry of letters, Week 05 (24/10/2023)
It is equally important to understand the spatial forms beyond form, the internal and external spaces formed by letters. Because it helps in formatting text or letter formation for reading readability and legibility.
Fig 1.53 symmetry of letters, Week 05 (24/10/2023)
The basic principles of Graphic Design apply directly to typography . The most poweful 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 ...
The basic principles of Graphic Design apply directly to typography . The most poweful dynamic in design - as applied to type , based on a format devised by Rudi Ruegg.
Lecture 7 - Typo_6_Understanding
For week 7, Mr. Vinod introduced us to differences in typesetting.
Fig 1.54 Examples typography in different medium, Week 06 (31/10/2023)
The typesetting field has an impact on the screen, so layout exists in various forms or shapes.
Fig 1.55 Examples typography in different medium, Week 06 (31/10/2023)
Design plays an important role in web pages or applications about how to arrange things, as well as typesetting and extended layout.
Fig 1.54 Examples typography in different medium, Week 06 (31/10/2023)
The typesetting field has an impact on the screen, so layout exists in various forms or shapes.
Fig 1.55 Examples typography in different medium, Week 06 (31/10/2023)
Nowadays typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters:
- Operating systems
- System fonts
- Screen and device
- Viewport
- and more...
Therefore, today's typesetting will change according to the typesetting method within the browser.
Print type & Screen type
- Type for print
Initially, the type was designed for reading from a long print before we read from a screen. It's the job of designers to ensure that the text is smooth, flowing and pleasant to read.
Good typeface for print: Caslon, Garamond and Baskerville are the most common typefaces that are used for print. The elegant and intellectual characteristics but also highly readable even when set at a small font size. They are versatile and easy-to-digest classic typefaces.
.png)
Fig 1.56 Print type & Screen type, Week 06 (31/10/2023)
- Type for screen
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance on screen in different digital environments. Because of the influence of screen sharpness, font modifications are specially designed for the screen, including taller x-height, reduced ascenders/descenders, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, and modified curves and angles for some designs.
Good typefaces for screen:
Verdana, Georgia and more.
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 such as the web, e-books, e-readers, and mobile devices.
Hyperlink/ Hyperactive link
A hyperlink is a word, image, or phrase that you can click to go to a new document or a new section of the current
document. It can also be seen on practically any internet page and is usually 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.
Display font size
reading at inches distances.At least 12-point size text for reading at arm's length.When dots are used as units, any point size between 20 and 24 is suitable for the screen.
System typefaces for screen/web safe fonts
We have pre-installed fonts for each device, and these are mostly determined by their operating system, which
varies from one another. For example, Windows-based devices have their own, although Google Android has their
own system as well. If the designer chooses a typeface that is not supported by the device's operating system, the
device will use its own default font.
Pixel differences 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 vs. Movement
Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.You can also create dynamics in a static design
It can be seen from billboards to posters, magazines to fliers.
.png)
Typists can use media to make their letterforms more dynamic and dramatic. You can see this kind of movement in
movies when they activate and animate the type. Television firms frequently incorporate a movement into their
brand identities.
EXERCISE
Task2 :Exercise-Text Foematting
Fig 2.6 Typesetting Type Expression of Illusion(without grid visible), Week 6 (31/10/2023)
Fig 2.6 Typesetting Type Expression of Illusion PDF(with grid visible), Week 6 (31/10/2023)
Fig 2.6 Typesetting Type Expression of Illusion PDF(without grid visible), Week 6 (31/10/2023)
HEAD
Columns: 3
Gutter: 5 mm
- Font/s: Univers LT Std, 65 Bold ; Univers LT Std, 67 Bold Condensed
- Type Size/s: 120pt;40pt
- Leading: 76pt;49pt
- Font/s: Univers LT Std, 55 Roman
- Type Size/s: 9pt
- Leading: 11pt
- Paragraph spacing: 22pt
- Characters per-line: Below 65 characters
- Alignment: Justified Left
Columns: 3
Gutter: 5 mm
FEEDBACK
WEEK6-FEEDBACK:
Ms. Xin reminded me that the word spacing and line spacing should be visually unified and space optimized. The tilt angle of the picture design is 45 degrees, and the title and picture should remain parallel. Modify characters and word spacing to visually unify them and create a sense of order and beauty.
WEEK7-FEEDBACK:
The main title and subtitle should be on the same horizontal line as the text, so that readers can read at eye level without having to read up and down, which will affect the reading experience. The text can be modified to be more complete without leaving too much blank space.
REFIECTION
In the whole second assignment, this is a very fast job.The knowledge I learned in the first exercise is used here to create an editorial spread and then quickly complete the continuity. At the same time, I would like to thank the professors of Ms. Xin Yin and Mr. Vinod for reminding me of the details of the perspective, including the content and title of the page, which I had not noticed before, which increased my awareness of reading flow and visual level, and made reading easier to understand.
FURTHER READING
Typographic Systems
All design is based on a structural system.These systems or frameworks can be broken down into eight major
variations with an infinite variety of compositions within each system.The eight typographic systems are similar in that each system hasa set of rules that is unique and pro-vides a
sense of purpose that focuses and directs the decision-making.
Design education and visual processes should be linked to letterpress printing systems. Designers can use eight typesetting systems to create typesetting information more smoothly.The eight systems—axial, radial, dilatational, random, grid, transitional, modular, and bilateral.
1. Project Elements and Process
- Axial System
All elements are organized either to the left or right of a single axis.
- Radial System
All elements extend from a point of focus.
- Dilatational System
All elements expand from a central point in a circular fashion.
Fig 1.3 Typrographic Systems
- Random System
Elements appear to have no spe-cific pattern or relationship.
- Grid System
A system of vertical and horizontal divisions
- Transitional System
An informal system of layered banding
- Modular System
A series of non-objective elements that are constructed as standard-ized units
- Bilateral System
All text is arranged symmetrically an a single axis.
2.Constraints and Options
There are typesetting restrictions and options in the course of any project. In order to enrich the page layout, you can arbitrarily break lines or change one line to multiple lines and change them in groups.
- Line Breaks
Lines may be broken at will to make multiple lines
- Leading
Leading can be tight to over-lapping or wide and airy.
- Word and Letter Space
Varying word spacing and letter spacing creates dif-ferent textures. As letter spacing is increased, word spacing must also be in-creased in order to avoid confusion.
When the format is small and a few lines long, the first choice is to break lines, but grouping is important because it simplifies composition and enhances functionality
3. The Circle and Composition
A circle is a wildcard element that can be used anywhere. Can be used to guide implementation, creating a pivot point, tension, and emphasis; Or contribute to visual organization
4. Nonobjective Elements
The use of non objective factors to make the composition clear enhances the function of emphasis, organization, and balance. When used in conjunction with fonts, non objective factors enhance the hierarchical order and guide the audience's eyes to convey information more clearly
- Rule Series
Rules can both organize and em-phasize a message. Single-weight rules of equal length function pri-marily as elements of organization. When there is a change in weight, the rules also create a rhythm and guide the eye downward.Altering the length of the rules creates a strong diagonal. Changes in rule weight create a hierarchy by guid-ing the eye to the largest volume of black.
- Circle Series
The circle can act as a nonobjective pivot point or as an element that creates hierarchy. The examples show ways in which the circle draws the eye to a single word, making that word the first read in the composition.
- Tone Series
The simple use of tone can dra-matically alter the hierarchy of a message.The eye is drawn to the largest volume of black on a white background or the largest volume of white on a black background. Words or portions of words can be emphasized, giving the message a sense of visual punctuation.
Fig 1.9 Typrographic Systems
评论
发表评论