Typography / Task 2
05/05/2023 - 26/05/2023 / Week 5 - Week 8
Iman binti Kamarudin / 0364014
Typography / Bachelors of Design (Hons) in Creative Media
Task 2: Typographic Exploration & Communication
Iman binti Kamarudin / 0364014
Typography / Bachelors of Design (Hons) in Creative Media
Task 2: Typographic Exploration & Communication
LECTURE
Week 6: Class was held online through Zoom and we mainly spent our time
just presenting our editorial layouts to Mr. Vinod while he gave us some
feedback.
Typo_4_Basic
Describing Letterforms
- Baseline: Imaginary line for the visual base of the letterforms
- Median: Imaginary line defining the x-height of letterforms
- X-height: The height in any typeface of the lowercase ‘x’
- Stroke: Any line that defines the basic letterform
Figure 1.1 - Baseline, Median & X-Height
Figure 1.2 - Stroke
- Apex/Vertex: The point created by joining two diagonal stems (apex above and vertex below)
- Arm: Short strokes off the stem of a letterform, either horizontal (E, F, L) or inclined upward (K, Y)
- Ascender: The portion of the stem of a lowercase letterform that projects above the median
- Barb: The half-serif finish on some curved stroke
Figure 1.3 - Apex/Vertex
Figure 1.4 - Arm
Figure 1.5 - Ascender
Figure 1.6 - Barb
- Beak: The half-serif finish on some horizontal arms
- Bowl: The rounded form that described a counter. the bowl may be open or closed
- Bracket: The transition between the serif and the stem
- Cross Bar/Stroke: The horizontal stroke in a letterform that joins two stems together
Figure 1.7 - Beak
Figure 1.8 - Bowl
Figure 1.9 - Bracket
Figure 1.10 - Cross Bar
Figure 1.11 - Cross Stroke
- Crotch: The interior space where two strokes meet
- Descender: The portion of the stem of a lowercase letterform that projects below the baseline
- Ear: The stroke extending out from the main stem or body of the letterform
- Em/en: Distance equal to the size of the typeface. An en is half the size of an em.
Figure 1.12 - Crotch
Figure 1.13 - Descender
Figure 1.14 - Ear
Figure 1.15 - Em
- Finial: The rounded non-serif terminal to a stroke
- Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downwards (K, R)
- Ligature: The character former by the combination of two or more letterforms
Figure 1.16 - Finial
1.17 - Leg
Figure 1.18 - Ligature
- Link: The stroke that connects the bowl and the loop of a lowercase G
- Loop: In some typefaces, the bowl created in the descender of the lowercase G
Figure 1.19 - Link
Figure 1.20 - Loop
- Serif: The right-angled or oblique foot at the end of a stroke
- Shoulder: The curved stroke that is not part of a bowl
- Spine: The curved stem of the S
- Spur: The extension that articulates the junction of the curved and linear stroke
Figure 1.21 - Serif
Figure 1.22 - Shoulder
Figure 1.23 - Spine
Figure 1.24 - Spur
- Stem: The significant vertical or oblique stroke
- Stress: The orientation of the letterform, indicated by the thin stroke in round forms
- Swash: The flourish that extends the stroke of the letterform
- Tail: The curved diagonal stroke at the finish of certain letterforms
- Terminal: The self contained finish of a stroke without a serif. They may be flat, flared, acute, grave, concave, convex, or rounded as a ball or teardrop.
Figure 1.25 - Stem
Figure 1.26 - Stress
Figure 1.27 - Swash
Figure 1.28 - Tail
Figure 1.29 - Terminal
The Font
The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.
The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.
- Uppercase: Capital letters including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures
- Lowercase: Lowercase letters include the same characters as uppercase
- Small Capitals: Uppercase letterforms drawn to the x-height of the typeface. Small caps are primarily found in serif fonts (called an expert set)
Figure 2.1 - Uppercase Letters
Figure 2.2 - Lowercase letters
Figure 2.3 - Small Capitals & Normal Uppercase Letters
Figure 2.4 - Lowercase Letter & Small Capital
- Lowercase Numerals: Numerals set to the x-height with ascenders and descenders.
Figure 2.5 - Uppercase Numerals
Figure 2.6 - Lowercase Numerals
Figure 2.7 - Italic
Figure 2.8 - Italic vs Roman
- Ornaments: Used as flourishes in invitations or certificates.
Figure 2.9 - Punctuation & Miscellaneous Characters
Figure 2.10 - Ornaments
Week 7:
I was sick during this week so I just watched the class livestream and
critiqued my work following what Mr. Vinod said to other students.
Typo_6_Screen&Print
Type for Print
A good typeface for print - Caslon, Garamond, Baskerville are the most common typefaces used for print. This is because they areelegantclassicintellectualhighly readable at small font sizeversatileeasy to digest has a neutrality and versatility that makes typesetting with it a breeze
Figure 3.1 - Type For Print Example
Figure 3.2 - Type For Print Example 2
Type for Screen
Typefaces for use on the web are optimised and often modified to enhance readability and performance onscreen in a variety of digital environments. This can includetaller x-heightreduced ascenders and descenderswider letterformsmore open countersheavier thin strokes and serifsreduced stroke contrastas well as modified curves and angles for some designsmore open spacing (improves character recognition and readability)
Hyperactive Link
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.
Font Size For Screen
16-pixel text in a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance.
System Fonts For Screen
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.
If you visit a website and don’t have that specific font already installed and it’s not pulling from a web-friendly place, the font you see would default back to some basic variation like Times New Roman.
‘Web safe’ ones, however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google.
Some web-safe fonts are:
- Open Sans
- Lato
- Arial
- Helvetica
- Times New Roman
- Times
- Courier
- New Courier
- Verdana
- Georgia
- Palatina
- Garamond
Pixel Differential Between Devices
The screens used by out PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because that have different sized pixels. 100 pixels on a laptop is different from 100 pixels on a 60” HDTV.
The screens used by out PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because that have different sized pixels. 100 pixels on a laptop is different from 100 pixels on a 60” HDTV.
Figure 3.3 - Different Devices & Pixels
Static vs Motion
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.
Motion Typography
Temporal media offer typographers opportunities to dramatise type, for letterforms to become ‘fluid’ and ‘kinetic’.
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.
Figure 3.4 - Static Typography Example
Figure 3.5 - Static Typography Example 2
Week 8: Independent Learning Week
INSTRUCTIONS
Task 2: Typographic Exploration & Communication
First, I went through the different editorial text options and decided to go
with "Unite To Visualise A Better World". Afterwards, I looked at some text
layouts for reference and began sketching out ideas for my headline expression
and layout.
.png)
Figure 1.2 - Headline Expression Sketches (10/05/2023)
.png)
Figure 1.3 - Text Layout Sketches (10/05/2023)
After I sketched out my ideas I went on to digitise my headline expressions in
Adobe Illustrator. There was a lot of trial and error when doing this and I
had to learn how to use the type on path tool. I created multiple variations
of some of the expressions to see which ones I preferred the most.
Figure 1.4 - Digitised Headline Expressions (10/05/2023)
Once I digitised my headline expressions, I went to Adobe Indesign and started
playing around with some layouts using my sketches as reference. I picked out
the best variation of each headline in my opinion and worked on three layouts.
Figure 1.5 - Editorial Layout 1 (11/05/2023)
Figure 1.6 - Editorial Layout 2 (11/05/2023)
Figure 1.7 - Editorial Layout 3 (11/05/2023)
I worked on the first layout again following the feedback Mr. Vinod gave me
during week 6. Unfortunately, during week 7 I was ill so I wasn't able to work
on it as much as I wanted to, I felt a bit unsatisfied with the current
layouts I had made but I just pushed through and chose to stick with the first
layout.
Figure 1.8 - Headline Expression Reworked (23/05/2023)
Figure 1.9 - Headline Expression Reworked pt. 2 (23/05/2023)
I made the bridge of the glasses and included the nose pads and I also made a
risky decision to add additional lines in the layout to fill up more space and
unite the body text and title a bit more as I felt they were too seperate from
eachother.
Final Editorial Layout
HEAD
Font/s: Future STD (Heavy and Light)
Type Size/s: 22 pt
Leading: 25 pt
Paragraph spacing: 0
BODY
Font/s: Univers LT (Roman)
Type Size/s: 9 pt
Leading: 11.5 pt
Paragraph spacing: 11.5 pt
Characters per-line: 58
Alignment: left justified
Margins: 10 mm top + bottom + right + left
Columns: 2
Gutter: 5 mm
Font/s: Future STD (Heavy and Light)
Type Size/s: 22 pt
Leading: 25 pt
Paragraph spacing: 0
BODY
Font/s: Univers LT (Roman)
Type Size/s: 9 pt
Leading: 11.5 pt
Paragraph spacing: 11.5 pt
Characters per-line: 58
Alignment: left justified
Margins: 10 mm top + bottom + right + left
Columns: 2
Gutter: 5 mm
Figure 1.10 - Final Layout JPEG (27/05/2023)
Figure 1.11 - Final Layout PDF (27/05/2023)
Figure 1.12 - Final Layout w/ Grids JPEG (27/05/2023)
Figure 1.13 - Final Layout w/ Grids PDF (27/05/2023)
FEEDBACK
Week 6:
General Feedback - Choose one word to express from the title. Be
careful with too many orphans. Graphics can be overwhelming. Line Length
of body text has to be the same. Doesn't have to be extravagant to express
a headline, keep it simple.
Specific Feedback - Infinity expression doesn't express meaning.
Condensed typeface doesn't work, difficult to read. Be careful with
rivers, reduce the point size and line length. Go with the 2nd layout.
Create solid bridge of glasses, don't use lines, make it gray. Don't place
sub-heading in the middle. Remove the lines on the side and work on layout
again.
Week 7:
General Feedback - Don't place title in very centre of the page,
either make it big and take up more space or align it to one side. Be
careful with the leading size.
REFLECTIONS
Experience
Overall, my experience with this task was alright, I feel as though I didn’t really have a chance to do as much and as well as I wanted because of being sick for so long. I definitely struggled more with this task than the previous one in terms of trying to come up with something unique. However, I enjoyed it all the same, I learnt a lot of new things.
Overall, my experience with this task was alright, I feel as though I didn’t really have a chance to do as much and as well as I wanted because of being sick for so long. I definitely struggled more with this task than the previous one in terms of trying to come up with something unique. However, I enjoyed it all the same, I learnt a lot of new things.
Observation
One thing I observed is how many factors there were to consider when designing a layout. I feel like this task really humbled me as there were quite a few mistakes and bumps in the road while I was working on it.
One thing I observed is how many factors there were to consider when designing a layout. I feel like this task really humbled me as there were quite a few mistakes and bumps in the road while I was working on it.
Findings
I found that you can easily change the tone and meaning of your work just by focusing on expressing a different word in the headline. It was really interesting seeing how my classmates chose to design their layouts, they all went in such similar but also different directions and it was fun to see.
FURTHER READING
Week 6-8
Figure 1.1 - Typographic Design in the Digital Studio: Design Concepts, David A. Amdur (2006)
Drop Shadows and Embossed Letters
Drop shadows create the illusion that type is floating a little distance above the page and casting its shadow onto it. But, if done without due exercise of visual judgment, drop shadows can make the type hard to read.
- Shadows behind dark type should be kept fairly light, around 40% or less. This may look practically invisible on screen but it'll work out just fine on the printed page.
- The shadows should stay close enough to the letters to touch their edges; if they fall too far away, extra confusing shapes will be created.
- Bolder type and generous tracking will help keep things clear. Fuzzy shadows are less likely to obscure letter forms than hard-edged ones.
Text on a Curved Line
Type running on a curved path will naturally stand out since typography and layouts are dominated by horizontal and vertical relationships. However, it is necessary to take extra time and care to fine-tune.
- Tight curves can make the characters seem to lean over at odd angles. Even on gentler curves, wide characters can seem to lift off the baseline. This is less of a problem with condensed typefaces. In any case, the odd spacing created by curved baselines requires careful kerning.
Text wraps
Text wraps can be thought of as an alternative to create shaped text blocks.
- If you create lines that are too narrow, they won't fit in evenly. And if you disrupt the text with a shape that cuts across several lines, it will be hard for readers to follow the text.
- When you want the text to surround the object, the best solution is usually to place it between two columns. When a graphic does cut across a column, it should interrupt it just once. It's best to break the text mid-sentence so the reader won't see the interruption as the end of a paragraph or the end of the story.
- The margin of white space between the text and the graphic is called the 'offset'. If the offset is too small, the readers eye flow is interrupted and the page may look too heavy. It's usually best to set the offset to an amount that's equal to the point size of the text.
Comments
Post a Comment