Typography Task 2 / Exploration & Communication
23 October 2023 - 30 October 2023/Week5-Week6
Kaho Yamaya / 0364278
Typography / Creative media / Taylor's University
Task2: Typographic Exploration & Communication (Text Formatting and Expression)
JUMP LINK
LECTURES
Past lectures in Task1 e-portfolio
Week6:“Typo_6_Understanding”
Fig 1.1 Example of design
Typography in website design
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.
Type for 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-carlson, 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.
Type for Screen
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance on screen 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 Founts 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 one Android system uses their own as well.
‘Web Safe’ ones, however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google.
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.
Motion Typography
Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woodman 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.
Fig 1.2, 3 Shot from a movie “SE7EN”
Mr.Vinod said, “You can look at the way that editing and typography was done in it was really good even today.”
A great designer knows how to work with text not just as content, he treats text as a user interface. -Oliver Reichenstein
INSTRUCTIONS
Fig 2.1 Instruction PDF (page9-11)
SUBMISSIONS
Task2:Typographic Exploration & Communication
(Text Formatting and Expression)/Week5-Week6
WEEK5
Fig 3.1 Headline First sketch (27/10/2023)
We would make headline in Adobe Illustrator and later put in the pages. So we need to make a sketch for headline first. I choose content#3, “Unite to visualize a better world”. In this headline, I want to emphasis the word “visualize” because the body paragraph shows how designers made a design for social communities and how designs works in the world. At the same time, I want to associate “visualize” and “better world” so I made few sketch for express “visualized world”.
Fig 3.2 First sketch for page structure (27/10/2023)
After decided the headline design, we need to decide the page layout. From week4 general feedback, we must avoid the body paragraph placed too far from each other because it loses readability.
Fig 3.3 Headline Digital sketch (27/10/2023)
In this headline, I want to emphasis “visualize” and I made it looks like eyes. I put two parentheses as eyelids and three “I” above the “visualize” as the eyelashes. Two “I” below “visualize” work as eyelashes and emphasis line. The left side “A” filled the center blank because I made it as black eye. I made two “better world” layout and both of them using a sphere/hemisphere to express “world”.
I placed headline like this and try to find appropriate layout. I want to emphasize “visualize”, so I placed it bigger than the other one.
Fig 3.5 First draft chart and its shape (27/10/2023)
I made five layouts and show its shape on the right side. I separated the sphere/hemisphere headline and where the headline placed. In this layouts, I had a mistake in leading and the place were headline placed. Mr.Vinod gave me some advice. My headlines are need to move into left side, “Unite to” is need to move into above the “visualize”. Lead text is no need to emphasize too much. These advices will used in next editorial layout.
WEEK6
Fig 4.1 Editorial Layout without grid (30/10/2023)
In week6, I moved headlines to left side. I feel bit uncomfortable in “Unite” and “to” because these two have different side length and difficult to make symmetry in both side. Mr.Vinod gave me an advice for the part “Unite to”. He showed me how it works and my headlines got more better.
Fig 4.2 Headline changes (6/11/2023)
Fig 4.3 Mistake (6/11/2023)
While I changing my editorial layouts, I found a mistake in my body text. I need to kern this particular. The appropriate number of characters in a line are 45-60 but to improve paragraph’s readability, sometimes I cannot set the numbers between 45-60.
FINAL TYPOGRAPHIC EXPLORATION & COMMUNICATION
HEAD (Made in Adobe Illustrator)
Font/s: Univers LT Std (Roman, Light, Light Ultra Condensed)
Type Size/s: 64, 80, 104, 120, 448pt
Font/s: Univers LT Std (Roman, Light, Light Ultra Condensed)
Type Size/s: 64, 80, 104, 120, 448pt
(Made in Indesign)
Font/s: Univers LT Std (Light Ultra Condensed)
Type Size/s: 80pt
Type Size/s: 80pt
BODY
Font/s: Univers LT Std (Roman, Oblique [lead in text])
Type Size/s: 11pt
Leading: 13.5pt
Paragraph spacing: 4mm
Characters per-line: 44-55
Alignment: Top
Font/s: Univers LT Std (Roman, Oblique [lead in text])
Type Size/s: 11pt
Leading: 13.5pt
Paragraph spacing: 4mm
Characters per-line: 44-55
Alignment: Top
Margins: 10mm top, 5mm left + 5mm right + 10mm bottom
Columns: 2
Gutter: 5 mm
Columns: 2
Gutter: 5 mm
Fig 4.4 Final Typographic Exploration & Communication without grid JPEG (8/11/2023)
Fig 4.5 Final Typographic Exploration & Communication without grid PDF (8/11/2023)
Fig 4.6 Final Typographic Exploration & Communication grid visible JPEG (8/11/2023)
Fig 4.7 Final Typographic Exploration & Communication grid visible PDF (8/11/2023)
FEEDBACK
Week5
Specific Feedback ...The space between the paragraphs are too big and not allowed the appropriate number.
General Feedback ...Too big head line is sometimes not working so we need to manage the balance of letters.Close own eyes and manage the color of sentences to same colors.The text boxes placed too far is cause the less readable and no sense. The middle space between lines is not too far it also cause the less readable. Subtext is no need to sit in the picture. Too much and no related pictures are messy. Subtext is need to unify the direction of place. Reading sentences is left to right so we do not place the sentences on the right side.Too much space in top and bottom is needed to manage the body sentence place and length. Italics are icon in the large amount of sentences to make emphasis.Do not use two different fonts in the paragraph and headline.It is no sense.
Week6
Specific Feedback ...Point size is bit large .The leading should be 2.5-3 points larger than the point size. Too tight in the letting. When you close your eyes half and the text should be even Glay.The idea is acceptable but the layout is not helpful. "Unit to" is need to place on the top and rethink about your layout.
General Feedback ...Isolate with the subsentence and headline is making confuse. Usually we read sentence left to right so we need to be careful. Leadtext is no need to stand out. Need more focus on the body text. Headline too far from body text disturb the readable. Make impressive things is not always work. Place headline on center with no thought is not good. Scatter the body sentences make lack of readable. Our works are not only looks good it needs to be meaningful. Not use bold and italics in the body text because it cause less readable. If we do not overcome the fear and nervous, we cannot do the presentation or competition in front of people. Put the headline first and the body part is second.
Week7 (Feedback for this task and e-portfolio)
Specific Feedback...You need to put all layouts into same file because it is too messy when you make individual files. The “Unite to” part is needed to move and change letter family into same as “a better world”. Your task1 e-portfolio is need to change its name to task1-exercise1&2. You should avoid to put too many pictures vertically because it loses the readable and understandable.
General Feedback...The body text put on the left corner is loose readable because the readers eye point is move on to the left corner.If you see something and you feel good for it, you need to learn and know what it is. Do not use them with first inspiration without knowledge. The black background makes too strong effect so do not use it in large amounts of screen. 8-12 point size and first you use 12 and check how it working in screen.Columns manage contents. If you put the columns and margins, just follow the columns and margins. Do not press enter twice and make leading. Auto hyphen is not working. The name in e-portfolio is need to similar. Pictures in e-portfolio is need to readable. We need to avoid too many pictures vertically. Clearly remark in Final submission. The background is off-white. Submission is needed PDF and JPEG. If we didn’t do so, it’s considerate to no submission. Your e-portfolio considered as what you learned in this class. So the layout, point size, everything that showed here is what you’ve learned.
REFLECTIONS
Observations...I trying to make the overall design looks good, cool, interesting but it also includes the danger for loose body texts priorities. We are making headlines for leading viewers attitude to body texts and if the headlines are so cool but the body texts are no readability, it is not good work. In my first layouts, I highlighted lead text because it looks important for me but Mr.Vinod said we need to pay attention to body texts and lead text is no need to stand out. I observed that I didn’t thinking about the priorities in this task.
Findings...I found making page layout is so hard. When I was in high school and reading some articles which gave from my school and thinking, “Why the sentences are so broken and letter space is too much? I can’t read well.” It made me frustrated and I really wish if I could change this layout. But in reality, the designers (or publishers) thinking too much about the layouts. The right side in articles are uneven, it made viewers irritate. If the text size is too much big or small, it also causes viewers hate for articles. Designers are fight for viewer’s comfort every single day. I found it with my experience.
FURTHER READING
Fig 5.1 JUST MY TYPE by Simon Garfield
“Just My Type” is a book of stories. About how Helvetica and Comic Sans took over the world. About why Barak Obama opted for Gotham, while Amy Winehouse found her soul in 30s Art Deco. About the great originators of type, from Baskerville to Zapf, and people like Neville Brody who threw out the rulebook. About the pivotal moment when fonts left the world of Letraset and were loaded onto computers ... and typefaces became something we realized we all have an opinion about. And beyond all this, “Just My Type” reveals what may be the very best and worst fonts in the world - and what your choice of fonts says about you.
Simon Garfield is the author of twelve acclaimed books of non-fiction including Mauve, The Error World and The Nation’s Favorite. His edited diaries from the Mass Observation Archive - Our Hidden Lives, We are At War and Private Battles - provided unique insights into the Second World War and its aftermath, and his study of Aids in Britain, The End of Innocence, won the Somerset Maugham prize, He lives in London and St Ives, Cornwall. He currently has a soft spot for Mrs Eaves and HT Gelateria.
Fig 5.2 Periodic table of typefaces
Font rankings were determined by sorting and combining lists and opinions from six web surveys: 100 Best Fonts of All Time (designer’s personal favorites); Paul Shaw’s Top 100 Types; 21 Best Fonts by Professional Designers. Top 7 Fonts Used By Professionals in Graphic Design; 30 Fonts That ALL Designers Must Know& Should Own; and Typefaces no one gets fired for using.
Fig 5.3 Watchmen - a dark inspiration for Comic Sans
In many ways, Comic Sans existed before Vincent Connare made it in 1994 legitimate by giving it a name. It existed, naturally enough, in comics and comic books (indeed the typeface was originally called Comic Book). One of the books that Connare had by his desk at Microsoft was Batman:the Dark Knight Returns, by Frank Miller with Klaus Janson and Lynn Varley. This told the tale of the elderly justice-doer jumping from his anxious retirement to take on terrible foes, only to find that he was even more unpopular with Gotham authorities than ever. The book was a huge crossover hit, reaching people who would previously have been embarrassed to carry what was then becoming an acceptable art form, the graphic novel. Along with Alan Moore’s and Dave Gibbon’s Watchmen, another influence on Connare, it marked the point where comics staked their claim as both literature and art.
Fig 5.4 San Serriffe’s archipelago
The islands of Upper and Lower Caisse. The enticing beach of Gill Sands in the sweep of the lower isle.
In 1977, the Guardian ran an elaborate and now famous April Fool’s Day hoax marking the tenth anniversary of the independence of San Serriffe: a republic whose every name was taken from the world of fonts. Floating freely in the Indian Ocean, the state had undergone was full of intriguing information about the benign union-busting activities of General Che Pica and the port of Clarendon, and the Caslon-speaking, theatre-going activities of the native Flongs.
Fig 5.5 Stamps making the 500th anniversary of printing in England
Caxton’s type was initially imported from Flanders, though around 1490 he seems to have switched to new fonts cut in Rouen and Paris. We know this form the appearance of a ragged r in place of the old blackletter form - a certain link to French foundries. It was a clear sign too that a popular type matrix was now a regular commodity of trade, boxed in the cargo hold alongside spice, lace, wine and paper.
Fig 5.6 The IBM Selectric’s secret weapon-its inner golfball (about size of £2 coin)
The trick was the Golfball or Typeball, the interchangeable rounded metal sphere that you could click in and out of the centre console and get less ink on your hands than from changing a ribbon. IBM had twenty different golfball typefaces for sale, most of them sober and undramatic, but different enough to usher in the concept of corporate branding for even the smallest of businesses. IBM called its balls not fonts but ‘typing elements’, and its user’s manual confidently asserted that ‘you’ll find one right for every typing job’. It wasn’t the first to offer a choice of types-that claim lay with the portable Blickenderfer typewriter from the 1890s. But the Selectric was the first to make the switching of fonts a relatively easy option. At its professional marketplace. But type always evolves. Once you could snap in a ball, or stamp, cut, emboss and rub, there was only one further thing to master: turning on Your First Computer.
Fig 5.7 Ransom Note type
The Sex Pistols demonstrate correct use of ransom note type in the days before digital fonts made it a bit too easy.
The names are often better than the type-BlackMail, Entebbe, Bighouse. None of them, however, have a genuine ransom note’s sweat, glue and menace, nor the cut-up shock-art of those original Sex Pistols record sleeves.
Comments
Post a Comment