Typography - Task 2
25/4/2022 - 16/4/2022
Nurul Asilah Binti Mohamad Asif | 0352246 | Typography | Bachelors of Design (Hons) in Creative Media
Week 5: Text/Indicating paragraphs | 25/4/2022
Letters/Understanding letterforms
Uppercase letters may seem symmetrical, but the width of the left slope is thinner than the right stroke.
Fig 1.0 uppercase asymmetry (25/4/2022)
Subtle differences make a huge impact on a character.
Maintaining X-height
Curved strokes (S) must rise above the median or sink below the baseline. This will make them appear the same size.
Letters/form/counterform
When letters are joined to form a word, the counter form includes the space between them. To understand a letterform, it is advised to examine them in close detail. This gives a feel of how the balance between form and counter is achieved.
Fig 1.1 examines letterforms in close detail (25/4/2022)
Letters/contrast
- small + organic
- large + machined
small + dark/large light
Fig 1.2 contrast in letters (25/4/2022)
Week 6: Different mediums | 2/5/2022
In this lecture, we understand between the era of technology and without, due to how the kids back then have been using paper instead of screens, compared to us till today we have been designing using a digital device.
Fig 1.3 website design (27/4/2022)
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.
The typography in web design is rather restricted, this is not to say that there's no experiment, there are particular websites that we can see a little bit of experiment in the way websites are created which are not very grided or restrictive. However, this requires a lot of coding, and often times designers who are skilled with new media have problems since coding can be quite a trouble to learn but students these are able to keep up and are pretty familiar with the computer language, even in the existing day's students can be aware and learn about coding in the design world.
Print typer vs screen type
type of print
Primarily, the type was designed intended for reading from print long before we read the 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, and Baskerville are the most common typefaces that is used to print, because of their characteristics which are elegant and intellectual but also highly readable when set at a small font size.
They are versatile, easy-to-digest classic typeface, which has neutrality and versatility that makes typesetting with them a breeze.
Fig 1.4 example of very dated typesetting (27/4/2022)
Fig 1.5 example of typesetting (27/4/2022)
Type for screen
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 angle for some designs.
Another important adjustment - especially for typefaces intended for smaller sizes - is more open spacing. All 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 on nearly all web pages, allowing users to click their way from one 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.
Hyperlink exists on many different platforms, even on your social media. The form of hashtags is hyperlinked as well.
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 would 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 designers 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 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.
System Fonts for screen/web-safe fonts
- Open sans
- Lato
- Arial
- Helvetica
- Times new roman
- Times
- Courier
- New courier
- Verdana
- Georgia
- Palatino
- Garamond
Fig 1.6 Screen vs Print (28/4/2022)
Task 2; Typographic exploration & communications
Text formatting and expressions
For task 2, we were assigned to choose ONE of the editorial texts to express, using the idea of an article typographically. We're allowed to use any design elements such as shapes, lines, etc. The type expressions are focused on the headlines provided and it can be done through Illustrator. It can be done through InDesign as well, however, it would be a little tough in my opinion.
The required size for an InDesign document is 200 x 200 mm per page and we are allowed to execute a good layout with the headline we have designed and given. We must only use the 10 typefaces given by Mr. Vinod. The one we have used in our previous exercises.
Visual Research
I decided to go through Pinterest and find some inspiration for the headline expression. From my previous task, I tend to get a lot of bad feedback on my formatting and aligning, on that note, perhaps I good find an interesting inspiration from Pinterest.
Fig 1.8 Layout magazine from Pinterest #2 (8/5/2022)
Sketches
I planned to go for something simple and minimalist with my expression, not too hard for the readers to see but also a little interesting so the readers can visualize them as well. I started out digitally on InDesign as how I wanted it to be simple.
However, the feedback I got from Mr.Vinod, is that I needed to fix my alignments and it makes the readers uncomfortable for them to read.
Fig 1.9 Layout Draft #1 (8/5/2022)
Fig 2.0 Layout Draft #2 (8/5/2022)
Fig 2.1 Layout Draft #3 (8/5/2022)
Text formatting | Choosing editorial texts
I chose the topic "Follow the code" just because I thought it has an expression that I add elements.
Fig 2.2 Topics on Editorial Text (8/5/2022)
Once I chose the topic I began by following the steps on the lecture playlist given.
Fig 2.3 Hovering 1 page beside each other for 2 pages (8/5/2022)
Fig 2.4 Deselect "Selected Spreads to Shuffle" (8/5/2022)
Fig 2.5 Small brackets are seen and pages are added (8/5/2022)
Fig 2.6 Copy and paste content (8/5/2022)
Fig 2.7 Gill Sans Font is chosen (8/5/2022)
Fig 2.8 Text formatting progress (8/5/2022)
Fig 2.9 Paragraph spacing 13pts (8/5/2022)
Fig 3.0 Before Tracking & Kerning (8/5/2022)
Fig 3.1 Before Tracking & Kerning (8/5/2022)
Fig 3.2 Before Tracking & Kerning (8/5/2022)
Fig 3.3 After Tracking & Kerning (8/5/2022)
Fig 3.4 Baseline grid shows (8/5/2022)
I'm having trouble doing my expressions, although the inspirations look simple, I find it difficult to find an idea of my own to improvise. I did another research to maybe get some more ideas on my designs.
Fig 3.5 Inspo from Pinterest #1 (8/5/2022)
Fig 3.6 Inspo from Pinterest #2 (8/5/2022)
Design Progress #1 | Text Expression
Fig 3.7 Design Progress #1 (15/5/2022)
Fig 3.8 Design progress #1 (15/5/2022)
Fig 3.9 Design #1 (15/5/2022)
Design Progress #2
Fig 4.0 Design Progress #2 (16/5/2022)
Fig 4.1 Design Progress #2 (16/5/2022)
Fig 4.2 Design #2 (16/5/2022)
Design Progress #3
Fig 4.3 Design Progress #3 (16/5/2022)
Fig 4.4 Design Progress #3 (16/5/2022)
Fig 4.5 Design Progress #3 (16/5/2022)
Fig 4.6 Design Progress #3 (16/5/2022)
Fig 4.6 Design #3 (16/5/2022)
I decided to choose Design #3 from Fig 4.6, Due to the research from Pinterest that I have chosen, I felt like it is interesting that the title gives a magazine-type idea, followed by the lines at the bottom that show minimalist style. Each of the paragraphs shown at the bottom has the "follow the code title" so the eyes can lead one page to another.
Fig 4.7 Chosen Design (final) (16/5/2022)
Fig 4.8 Layout (16/5/2022)
Final Typographic Exploration & Communication in JPEG format
Fig 4.9 Final, In JPEG format (17/5/2022)
Final Typographic Exploration & Communication with Baseline Grid
Fig 5.0 Final, with Baseline Grid (17/5/2022)
Final Typographic Exploration & Communication in PDF format
Fig 5.1 Final Task 2 PDF Format (17/5/2022)
1. Font: Gill Sans
2. Typeface: Univers LT Std (Heading) Gill Sans Bold (body text)
3. Font Size: 57pt (Heading) 10pt (body)
4. Leading: 15 pt
5. Average Character per line: 50-62
6. Alignment: Left
7. Columns: 2
Feedback
Week 7 | 9/5/2022
Specific feedback
- Paragraph linings aren't formatted well.
- Some paragraphs aren't supposed to be separated.
- Type expression is not presented well "so so"
- The typeface is very messy, need to fix that.
General feedback
- Organizing the content properly.
- Follow the paragraph detail properly.
- Align the paragraphs properly.
- Paragraphs should be above the grid lines, and shouldn't be too messy.
- Don't put too much spacing.
- Have a spacious layout.
Overall feedback (from google sheets)
- Incomplete
Reflections
Experience
- This new task has gotten me to understand a little bit more about typography and why we must focus on the little details as much as possible because one tiny mistake can lead to the reader feeling uncomfortable with the title expression and how we type out our texts. On that note, It does help me improve my skills in type expressions and how I should make the format better.
Observations
- I realized that I wouldn't be able to proceed with the correct alignment of the text expression without understanding the basics of typography, and it is interesting a few could perform and have an outstanding outcome for type and text expression, as well as typography in general.
Findings
- I would definitely use these techniques in the future, especially when ill am focusing on magazine writing. That I'll be able to get further feedback from real clients to improve better.
Comments
Post a Comment