Typography Task 2
21 May 2024-
NABIL JULIUS DORN (0370978)
Typography | Bachelor of Design in Creative Media | Taylor's University
Task
2
Jump links:
1. Lectures
2. Instructions
3. Task2
4. Feedback
5. Reflections
6. Readings
LECTURES
Week5
Typo_5_understanding
Letters / Understanding letterforms
The uppercase lettering form shown below suggests symmetry, however upon
closer inspection, it is not symmetrical. It is easy to see the different
stroke weights between the left and right side of the Baskerville
stroke form. It is also observed that each bracket connecting the serif to
the stem has a unique arc.
|
| Fig 1.1 Symmetry in Baskerville uppercase lettering |
Letters
Both Baskerville (Fig 1.1) and Univers (below in Fig 1.2) may appear
symmetrical but as shown below, the width of the left slope is thinner
than the right stroke. These two letterforms demonstrate the meticulous
care a type designer takes to create letterforms that are both internally
harmonious and individually expressive.
|
| Fig 1.2 Symmetry in Univers uppercase lettering |
The complexity of individual letterforms is demonstrated by examining the
lowercase letters of two seemingly similar san serif typefaces. A comparison
between Helvetica and Univers show how the stems of the letterforms finish and
how the bowls meet the stems quickly reveals the biggest difference between
the two.
|
| Fig 1.3 Comparison of lowercase lettering between Helvetica and Univers |
As both the letterforms are overlapping, the difference between the two become even more noticable.
|
| Fig 1.4 Overlapping of the two letterforms as mentioned above |
Curved letterforms such must rise above the median or below the baseline in order to appear to be the same size as the vertical and horizontal strokes they adjoin.
|
| Fig 1.5 example of curved letterforms rising above/below the median |
|
| Fig 1.6 curved letterforms rising above or below |
Letters/ Form / Counterform
Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (negative space) - the space describes, and often contained, by the strokes of the form. The spaces between make up the counterform when they are combined to form words. They determine the readability of a word.
|
| Fig 1.7 Form and counterforms |
One of the most rewarding ways to understand the form and counter of a letter is to examine them in close deail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterforms unique characteristics. It also gives you a glimpse into the process of letter-making.
Its also worth nothing here that the sense of the 'S' holds at each stage of the enlargement, while the 'g' tends to loose its identity, as individual elements are examined without the context of the entire letterform.
|
| Fig 1.8 Forms and counterforms |
The design principle of contrast also applies directly to typography as it
makes the typefaces more readable to the viewer.
|
| Fig 1.9 examples of contrast in typograghy |
Week 6
Typo_6_Screen & Print
Typography / Different Medium
In the past, typography was fixed once printed, ensuring consistency through
skilled typesetters and designers. These days, typography spans various
screens, influenced by factors like operating systems, fonts, devices and
viewports. Modern typography is dynamic, with typesetting occurring in
browsers, altering our experience based on how pages are rendered.
Print Type vs Screen Type
Carlson, Garmond, and Baskerville are ideal typefaces for print due to their
elegance, intellectual appeal and readability at small sizes. These classic,
versatile fonts offer neutrality and ease in typesetting, making them widely
used in printed materials.
|
| Fig 1.10 Example of print type |
|
| Fig 1.11 Example of screen type |
Type for Screen
Web interfaces are optimized for readability and performance across digital
environments. Adjustments include taller x-heights and wider letterforms, open
counters, heavier strokes and serifs, reduced stroke contrast, and more open
spacing. These modifications enhance character recognition and readability on
screens, including the web, e-books, e-readers and mobile devices.
Font size for Screen
16-pizel text on screen is about the same size as a text printed in a book or
magazine; this is accounting for reading distance. If you were to rad them at
arms length, you'd want at least 12 points, which is about the same size as a
16 on most screens.
System fonts for Screen / Web safe Fonts
System fonts or "web safe' fonts are pre-installed on devices based on their
operating systems which can differ between Windows, MacOS and Android. If a
designer chooses an obscure or paid font not supported on all operating
systems, it defaults to a basic font like Times New Roman, potentially looking
unattractive. Web safe fonts, however, are compatible on all operating
systems, ensuring consistent and appealing typography across all devices.
Here is a list of web safe fonts
- Open Sans
- Lato. Ariel
- Helvetica
- Times New Roman
- Times
- Courier
- New Courier
- Veranda
- Georgia
- Palatino
- Garamond
Font for Screen
|
| Fig 1.12 Screen (left) vs Print (right) |
Pixel differential between devices
The screens used by our devices are not only different sizes but the text you
see differs in proportion too. This is because they have different sizes
pixels. Even within a single device class, there will be a lot of variation
|
| Fig 1.13 Example of typography on different devices |
Static vs Motion
Static typography offers limited expressiveness compared to dynamic
typography. Traditional features like bold or italic only scratch the surface
of its potential. From billboards to magazines, static typography serves
various purposes - informational, promotional, formal or aspirational. The
impact of these designs hinges on their emotional connection with the
audience.
Motion Typography
Temporal media allow typographers to make type "fluid" and "kinetic",
enhancing expression through animation. Film title credits and motion
graphics use animated type to bring text to life. On-screen typography, in
music videos and ads, aligns with soundtracks and establishes tone or brand
vales. In title sequences, typography sets the mood for the film, preparing
the audience effectively
INSTRUCTIONS
TASK 2
During this task, we are required to combine what we've learnt in Task 1 part
1 and part 2. This consisted of type expression and text formatting.
We were given 3 bodies of text to choose from with a Heading, Sub-heading and
the main body of text.
We were allowed to make a cover page, using our knowledge of type expression,
in Adobe Illustrator.
The text and topic i chose to go with is "A code to build on and live by"
Below are the two type expression cover pages:
 |
| Fig 1.14 Cover page 1 |
 |
| Fig 1.15 Cover page 2 |
After making the cover pages, I decided to use InDesign to play with the body of text and use text formatting to create a visually aesthetic design.
 | ||||
Fig 1.16 typographic expression 1
|
FEEDBACK
Week 6:
General: Finalize task 1
Specific: If I need more time, should state so to Ms Low for Task 1 submission.
Week 7:
General: Type expression is good
Specific: Both ideas are really good. The first one looks like the matrix line of code and the second one is the generic HTML code.
Week 8:
General: 2nd look flows better than the first
Specific: I think the second cover page and text formatting flows better and looks more visually stunning than the other one. Its ready for submission already. Start work on task 3
Week 9:
General: -
Specific: -
REFLECTION
Experience:
In task 2, I experimented with the combination of type expression and text formatting to create a visually cohesive design. This involved selecting typefaces and adjusting sizes and styles to enhance both the headline and bodies of text.
Observations:
I observed that the interplay between different type elements can significantly impact the overall design. A well chosen headline typeface can draw attention, while a clear, readable body of text maintains engagement.
Findings:
The task demonstrated the critical role of typography in communiocation. Balancing readability and aesthetic appeal is essential for effectively conveying a message and creating an impactful design.
READINGS
Typographic design: form and communication
Case study of Composites
Steadman created digital composites with rules and constraints, inspired by geometry, subject matter, and time. He used geometric grid based on the golden rectangle, chose a specific topic like social media and astronomy, and completed each composite in 5 days, exploring the intersection of these elements.
 |
| Grid used for each composite |
Process
Steadman created composites using a 5 day process with a constant grid, researching and applying visual/textual elements daily.
 |
| Steadman's process |
 |
| Steadman's process |
Steadman layered four canvases, adjusting elements for continuity and unique properties. Each composite communicates multifaceted aspects of a topic.
 |
| Composites for the subject "social media" |
 |
| Final versions of the topic "social media" |
 |
| Final versions of the topic "social media" |
Comments
Post a Comment