Typography Task 2 : Typographic Exploration and Communication
4/05/2022-18/05/2022 (Week 6-Week 8)
Brigita Maria/0352958
Typography/ Bachelor of Design in Creative Media
Typography Task 2 : Typographic Exploration and Communication (Text Formatting and
Expression)
LECTURES
Week 6 : Typography Task 2 Process Demo
Figure 1 Task 2 Demo Video
Lecture Typo 6 Screen&Print
TYPOGRAPHY/DIFFERENT MEDIUM
In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done. Nothing changed after that. Good typography and readability were the result of skilled typesetters and designers.
Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.
PRINT TYPE VS SCREEN TYPE
Type of print
Primarily, type was designed intended for reading from print long before we read from screen. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.
A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.
They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.
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.
Hyperactive Link/ 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 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 is accounting 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 Screen/ Web Safe Fonts
Each device comes with its own pre-installed font selection. Which is based largely on its operating system. The problem is that each differs a little bit.
Windows-based devices might have one group. While MacOS ones pull from another. Then Google’s own Android system uses their own as well.
Let’s say the designer picked some obscure, paid font family for this site’s design. If you don’t have that font already installed and it’s not pulling from a web-friendly place – more on that later – the font you see would default back to some basic variation like Times New Roman.
You, as the visitor, wouldn’t necessarily know that’s what happened, though. To you, it would just look plain ugly.
‘Web safe’ ones, however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google
Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
Figure xx (from left) screen type and print type
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 VS MOTION
Static typography has 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.
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.
Task 2
Based on the brief, we were tasked to make an editorial spread.
Consisting of 2 pages to be exact. 200 x 200 pixels Using the texts
that Mr. Vinod had provided in the Facebook group, we can choose one
of the sample text.
Sketch
Figure 2.1 Sketch of the layout Week 6 (4/05/2022)
Using my ipad, I sketched out a general layout that I want to make.
I think it is quite simple and straight forward. Title on the left
and the body text on the right. But maybe I will do some
experimentation on other layouts in Indesign.
Settings in Adobe In-design
After looking at the 3 options, I choose the text titled " The
impact of Bauhaus to modern culture"
Honestly, I did not really do that much research on Bauhaus itself.
I already know that Bauhaus emphasis on the usage of simple and
geometric shapes; such as squares, circles, lines.
I started by putting in the layout of the body text first.
For the text I used Futura Std in Book (4 pt). And for the Lead-in
text I use Futura Std's Heavy oblique (7 pt).
Figure 2.2 Font for body text settings Week 6 (4/05/2022)
Figure 2.3 Font for Lead-in text settings Week 6 (4/05/2022)
Making sure it is align with the grid lines. Did the kerning and
adjusting to prevent from widow or orphan. I made a 2 column layout.
But with no guidance of column. Here where it gets messed up..
Figure 2.4 Grid lines settings Week 6 (4/05/2022)
Making sure the text are placed according to the baseline.
Figure 2.5 Baseline settings Week 6 (4/05/2022)
Figure 2.6 Layout arrangement Week 6 (4/05/2022)
Ideas on Type expression and layout
Here are some of the ideas on type expression and layout that I came
up with. I did a mistake by not doing much research on the art of
Bauhaus, so the results does not represent Bauhaus enough. It is
only a "pleasing to the eye" layout.
Figure 2.7.1 Layout Idea #1 Week 6 (4/05/2022)
Figure 2.7.2 Layout Idea #2 Week 6 (4/05/2022)
Figure 2.7.3 Layout Idea #3 Week 6 (4/05/2022)
Figure 2.7.4 Layout Idea #4 Week 6 (4/05/2022)
As it is been predicted, all of these layouts had an uneven column
text. Uneven column text can indicate the different level of
information or the to column has a different topic/main idea. We
don't want that to happen so I need to change it.
After the feedback from Mr. Vinod, I try to research more on
Bauhaus. And came up with these.
Figure 2.8.1 Revision Type expression #1 Week 7 (11/05/2022)
Figure 2.8.2 Revision Type expression #2 Week 7 (11/05/2022)
Figure 2.8.3 Revision Type expression #3 Week 7 (11/05/2022)
Figure 2.8.4 Revision Type expression #4 Week 7 (11/05/2022)
Figure 2.8.5 Revision Type expression #5 Week 7 (11/05/2022)
Inspiration and Research
Not feeling fulfilled yet, I design some more after some Xtra
research.
I came across some inspiration and great examples from the net.
Figure 2.9 Geometric Shapes in Bauhaus #1 Week 7 (11/05/2022
Figure 2.10 Geometric Shapes in Bauhaus #2 Week 7 (11/05/2022)
Bauhaus is all about simple geometrical shapes like circle,
square, rectangles, lines, triangles,etc. Also They usually came
with a color theme; blue, red, yellow, black and sometimes other
color. Because we can not use color, we need to use other
elements from Bauhaus design to express the "Bauhaus" in the type
expression.
Figure 2.11 Bauhaus Poster #1 Week 7 (11/05/2022)
Figure 2.12 Bauhaus Poster #2 Week 7 (11/05/2022)
Figure 2.13 Bauhaus Poster #3 Week 7 (11/05/2022)
New Ideas
I want to maintain the layout of title in the left and body text
in the right, so I created some 2000 by 2000 titles in Adobe
Illustrator for a in depth design.
Figure 3.1 Type expression #1 Week 7 (11/05/2022)
Figure 3.2 Type expression #2 Week 7 (11/05/2022)
Figure 3.3 Type expression #3 Week 7 (11/05/2022)
I really like Figure xx, so I created some more versions of it to
pick.
Figure 3.3.1 Type expression #3A Week 7 (11/05/2022)
Figure 3.3.2 Type expression #3B Week 7 (11/05/2022)
Figure 3.3.3 Type expression #3C Week 7 (11/05/2022)
Figure 3.4 Text layout gridlines Week 7 (11/05/2022)
Figure 3.5 Overall text layout blocked Week 7 (11/05/2022)
Figure 3.6 Overall text layout with gridlines Week 7 (11/05/2022)
Final Result of Task 2
Figure 4.1 Final Task 2 : Typographic Exploration and Communication - JPEG Week 8 (18/05/2022)
Figure 4.2 Final Task 2 : Typographic Exploration and Communication - PDF Week 8 (18/05/2022)
Figure 4.3 Final Task 2 : Typographic Exploration and Communication - PDF with Baseline Week 8 (18/05/2022)
Font : Futura Std
Typeface : Futura Std Bold, Book Oblique, Book, Light Oblique
Font size : 3 pt, 4 pt, 6 pt, 7 pt, 133 pt
Leading: 5 pt
Paragraph Spacing: 5 pt
Average characters per line : 50 ~ 53
Alignment: Left Alignment
Margins : 3.1 mm
Columns : 2
Gutter (for columns) : 1.3 mm
FEEDBACK
Questions:
Heading
1. Do the expressions match the meaning of the words?
2. Are the expression well crafted (crafting/lines/shapes)?
Text
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading
& paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line
grids?
6. Are widows and orphans present?
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading
& paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line
grids?
6. Are widows and orphans present?
Week 7:
General Feedback:
Need to pay attention to space and space division
Specific Feedback:
Layout Idea 1: good, simplicity design no particular meaning or functionality distance of column must always be the same
Layout Idea 3: more idea implied on Bauhaus design, can be more exciting
REFLECTION
Experience
Sometimes I do like to procrastinate tasks, and it kinda happened in this task. I did not do much of research as I should have in the beginning of the task. It ends up me doing this task in backwards. i made layouts first then do the research. Not a very good working process but it helped me to understand the differences between layout with research and no research at all.
Observations
From this task, I discover the importance of laying out your idea first before you execute, cause sometimes you can get lost in your own ideas that are most of the times not organized at all. So being organized is a very important thing in typography also in layouting your ideas or the texts itself.
Findings
From the text alone, I found out a lot of things regarding Bauhaus and its movement. How it has influenced a lot of designers and architects as well, and the world of modern design. The other thing is, not only the size of a font but the placement and text area can affect to the hierarchy of the text.
FURTHER READING
Figure 5.1 Typographic Design: Form and Communication
Figure 5.2 The Typographic Grid pg. 65
Structure and space
Space is the common denominator for all typographic communication. When typographic elements are introduced into space, they create subliminal divisions, and these divisions create spatial structure. As typographic elements shift syntactically in size, weight, and position, new structures emerge.
Figure 5.3
Another way of thinking about the relationship of type with space is to imagine a letterform as a point in space (line of text), and the the extension of a line as a plane in space (text block). This analogy suggest that typographic elements are kinetic in nature, that they are in perpetual motion.Consider the single letterform. When centered, it appears motionless. When placed off center, it appears to move, gaining velocity as it approaches the outermost boundaries of space. Rotate the letter and it appears to tumble. Lines of type are put into motion from the direction of their origin (usually left to right) at the moment they are read. They suggest horizontal movement, unless of course they are positioned vertically or at an angle in space. The kinetic possibilities of typographic elements are potentially endless.
Figure 5.4
Proportion
Divided space is perceived as a system of proportional relationships. To work effectively with the typographic grid is to understand that it also is a system of proportions. A grid ratio, which is a mathematical relationship between two or more grid measurements, governs the size and placement of typographic elements. The ratio X:2X (one unit to two units), for example, indicates the basic grid ratio. This stepped progression of X:2X establishes an underlying proportional system among the parts (Fig. 4-4).
Figure 5.5
Designers most often rely upon an innate sense of proportion. But it is helpful also to consider models that have been handed down over centuries. The most familiar of these is the golden section, which
is a law of proportionality found frequently in nature and the human body, and used throughout centuries in art, architecture, design, and music. First developed by Vitruvius, the golden section is basically a relationship or ratio between two numbers (or objects) wherein the ratio of the smaller number to the larger number is the same as the sum of both numbers. The algebraic expression of this relationship is a:b = b:(a+b). Stated numerically, the ratio is 1:1.618, and stated in percentages the ratio is 38 percent to 62 percent
Figure 5.6
Figure 5.7
Figure 5.8
The Fibonacci sequence is another important proportional model. Closely related to the golden section, this is a mathematical sequence wherein a number is the sum of the two preceding numbers; in other words, you add the two current numbers to get the third number. The progressive series of mathematical relationships found in the Fibonacci sequence can be observed throughout nature, from seashells and pine cones to the arrangement of seeds on flowering plants
Figure 5.9