Typography - Task 1
Denise Anjali // 0342430
Typography // Bachelor of Design in Creative Media
Task 1: Exercise 1 (Type Expression) & 2 (Type Formatting)
LECTURES
Week 1: Introduction
Typography is a
fundamental skill set that is applicable to all fields of design as it
develops important attributes such as attention to detail and composition.
Typography is makes us realize that text can be visual as well.
Typography is the creation of typefaces. Typography can be
animation. Typography is prevalent in website and app design. Signage
design, the sign itself and where its placed, is also typography. Obviously,
typography is in graphic design. The attributes and skill sets and thinking
from typography are necessary in all areas of design. All things learnt from
all modules are applicable across others.
Reading is necessary to learn
as typography spans 500 years of history and cannot be covered easily within
class time. Calligraphy (writing styles such as black letter, uncial, round
hand) > Lettering (when the letters are drawn out) > Typography.
Typography
has its terminologies, conventions and unwritten rules. Don't hold on too
tightly to own judgements; keep an open mind. Paul Rand: 'Typography is a
art, and good typography is art. Therein lies the problem.' It is difficult
to teach art but it is easy to teach processes that are necessary to
creating good art. Understanding, mastering and using these processes will
allow to learn to create art. Learn the rules before attempting to break
them. Using iteration, create, be judged, receive feedback, revise and
repeat. Any discipline has benefits from typography as it influences the way
you present your information.
Definitions of typography:
Oxford - 'the style and appearance of printed matter'
Wikipedia
- ' the art ad technique of arranging type to make written language legible,
readable, and appealing when displayed. The arrangement of type involves
selecting typefaces, point size, line length, line-spacing (leading),
letter-spacing (tracking) and adjusting the space within letter pairs
(kerning). The term typography is also applied to the style, arrangement,
and appearance of the letters and numbers, and symbols created by the
process.'
Wikipedia - 'Typography is the work of
typesetters, compositors, typographers, graphic designers, art directors,
manga artists, comic book artists, graffiti artists, and now—anyone who
arranges words, letters, numbers, and symbols for publication, display, or
distribution—from clerical workers and newsletter writers to anyone
self-publishing materials. Until the Digital Age, typography was a
specialized occupation. Digitization opened up typography to new generations
of previously unrelated designers and lay users, and David Jury, head of
graphic design at Colchester Institute in England, states that 'typography
is now something everybody does.'
When democratization of a skill
through the invention of applications, the quality of typography has
declined. The decline of skilled typographers has effected effective
communication.To understand typography, we must understand a little bit of
history. Conveying information in symbols is difficult to do accurately or
easily.
Definitions of font and typeface:
Font - Fount (French) >
Foundry. Refers to the individual weights within a typeface. [ex: Georgia
regular, Georgia bold, Georgia italic]
Typeface - A family of
weights/fonts that share similar characteristics and styles. [ex: Georgia,
Arial, Times New Roman]
Week 2: Development
*Information given from western perspective, do own research for more
holistic view
Early letterform development: Phoenician to Roman
The writing implement or tool used has a huge impact on the type
created. Scratching on wet clay with sharpened sticks or chiselling into
stone was the earliest form of writing in this case. That brought us the
Phoenician alphabet which led to the development of uppercase
letterforms.
Phoenicians and other Semitic peoples wrote
form right to left. Greeks changed the direction of writing to a style that
read alternately from right to left and left to right with the orientation
of the letterforms changing together with the direction. Later, they would
change it to strictly left to right writing.
Etruscan, and later
Roman, carvers would draw out the letters onto the marble before carving
them. This meant that the quality of their strokes of the paintbrush created
a new type of letterform which is where serif letters came from.
Hand script (3rd to 10th century)
Square capitals were written using thicker reed pens that were
written in a slant which created the thick and thin strokes. These
letterforms have serifs added to the end of the strokes. Rustic capitals
were the compressed version which took less time and space to write. They
were harder to read as they were condensed. Both of these types were
reserved for documents. Usually people would write in cursive hand and
simplified the letterforms for speed which would lead to lowercase
letterforms.
Uncials incorporated Roman cursive hand. It is a
smaller letterform but more readable than rustic capitals because of their
broadness. Half-uncials were the beginning of lowercase forms.
Blackletter to Gutenberg's type
Charlemagne instructed Alcuin of York to standardize all important
texts for his unified Europe. The monks rewrote the texts using uppercase,
lowercase, capitalization and punctuation (all of which we still use today).
When Charlemagne's empire dissolved, regional variations appeared. In the
North, a more condensed, vertical letterform called Blackletter became
popular. In the South, 'Rotunda', a rounder, more open hand was popular.
People don't have the same writing so the deviation makes sense
Gutenberg,
an engineer, created the modern day printing press. He managed to replicate
the writing of the abbot. He printed the Bible because monks were the ones
in charge of writing things down thus creating books takes a long time and
was costly. Gutenberg's invention mass produced the Bible faster than any
scribe could which made it cheaper and more accessible, especially as it was
in high demand.
This invention allowed for the development of
several typefaces. From humanist script → roman type → Venetian type in the
1500s → the golden age of French printing → Dutch printing → English type
from the 18th century → Baskerville's innovations → 19th century types → the
first square serifs → early 20th century sans serifs. Industrial revolution
caused the change in typefaces away from the handwritten style as printing
became even quicker and more accessible. Many of the earlier typefaces have
now been digitized for convenience and easy usage as they maintain their
popularity. The digitization of typefaces from these eras are important for
the sake of preserving history and bringing their contributions to the
modern day.
Type classifications
1450 Blackletter → the earliest printing type based on hand copying
styles in northern Europe. Ex: Cloister Black
1475 Oldstyle →
based on lowercase forms by Italian humanist scholars & uppercase
letterforms found on Roman ruins. Ex: Bemba, Caslon
1500 Italics
→ based on contemporary Italian handwriting, originally considered their own
class of type, soon cast to complement roman forms. Serif italicized letters
are called italics but sans serif ones are called oblique.
1550 Script
→ originally to replicate engraved calligraphic forms. Not appropriate in
lengthy text settings but widely accepted in shorter applications.
Ex: Kuenstler script, Mistral
1750 Transitional → Refinements in
oldstyle forms achieved in part due to advancements in casting &
printing. Type stopped being based on handwriting.
Ex: Baskerville, Times New
1775 Modern → further
rationalization of oldstyle letterforms. Serifs were unbracketed and the
contrast between thick and thin strokes increased even more than the 1750
transitional. Ex: Bodoni, Bell
1825 Square Serif / Slab Serif →
little variation between thick & thin strokes, developed as a response
to the new needs of heavy type in commercial printing for advertising.
Ex: Clarendon, Serifa
1900 Sans Serif → eliminated serifs
altogether, varied between humanist forms (Gill Sans) or rigidly geometric
(Futura). Also referred to as grotesque (grotesk) & gothic.
Ex: Helvetica, Optima
1990 Serif / Sans Serif → A family of
typefaces which includes both serif & sans serif and sometimes
transitions in between, also called semi-sans or semi-serifs.
Ex: Stone, Rotis
'If you don't know history then you don't
know anything. You are a leaf that doesn't know it is part of a tree' -
Michael Crichton. It is important to know the history of a subject so that
you know when something has been done before or that something has been
named.
Week 3: Text _ Part 1
Kerning → automatic
adjustment of space between letters.it is not letterspacing as that term
refers to the addition of space between the letters. The addition &
removal of space is called 'tracking. ' with kerning, letters fit within
each other's space instead of being completely separate. Kerning &
letterspacing is not done for large bodies of text, it is rather used for
headlines etc when there is a lot of space around a word.
InDesign vs Illustrator
InDesign is a publishing software. When dealing with large amounts of
text InDesign is generally used. Ex: pamphlets, booklets,
In AI, we
create graphics or graphical illustrations.
Guide to InDesign
New
document → presets (adjustable if necessary) → page numbers → column number
(typically 3-4) → column gutter (typically 5) →
Margins, space around
the text, extremely important to have a good amount.
T - text tool,
ctrl, shift + > - increase text, ctrl + : - turn off margins &
columns, kerning - alt + left/right arrow key. Edit preferences, adjust
units & increments, kerning \/tracking to 5. All uppercase letters
should be kerned wider for better readability.
Normal tracking vs loose
tracking vs tight tracking
When a lot of letterspacing is in a
paragraph, readability is worse. This is because we read in shapes &
patterns, not word by word. Uppercase letters are able to stand on their own
whereas lowercase letterforms require the counterform created between
letters to maintain the line of reading.
Counterform → blank space
between the letterforms.
Text formatting
Flush left: similar to asymmetrical handwriting experience.
Most suitable most of the time. Creates ragging on right, the jagged edge of
the text.always make the ragging look smooth, look curved not straight
Grey space:
text on a white page, half close your eyes and look at the page. If too
dark, not enough kerning or leading. If too light, too much letterspacing or
leading.
Centered: imposes symmetry on text. Creates shapes and
gives a more pictorial quality. Avoid using this alignment for text
formatting.it can be difficult to read in large paragraphs due to irregular
starting points for each line.
Flushed right: difficult in
English because we read from left to right. Not suitable for larger texts
due to low readability. Useful for captions or an axial layout. Ragging on
left must be smooth.
Justified: not an escape from letterspacing
& Kerning. Often requires it more. Offer causes rivers. Gaps in the text
is known as rivers. Rivers are bad.
Creativity is alright but the
most important thing is to make sure the author's message is clearly and
appropriately presented. If you see type before you see the words, change
the type.
Never use capital letters together when using a script /
decorative typefaces. Ex: RSVP
Different typefaces suit different
typefaces. Consider too the different textures of these typefaces.
X-height
refers to the area between the baseline and the mean/median line. A readable
text has a larger x-height comparative to the ascender (area above the
x-height) and descender (area below the x-height).
Caslon (smaller
x-height) vs Baskerville (larger x-height, more readable)
Bembo (larger
contrast between stroke width) vs Garamond (larger ascender & descender,
thicker stroke)
Bodoni (high contrast, less legibility) vs Jenson
(thicker stroke width)
All typefaces above not designed for screen use,
must take into account typeface design purpose when choosing a typeface
Sans
serif typefaces tend to be better at small sizes and in screen use.
The
goal in setting text type is to allow for easy, prolonged reading. Well set
type helps you read more in a smaller amount of time. Text should be placed
in a text field and take the same amount of space as a photograph.
Type size: should be large enough to be read easily at
arms length
Leading: generally 2-3pts larger than type size.
2-2.5 pts is generally good for large text body
Line length:
55-65 characters in a line. Longer line length impairs readability.
Type
specimen book: shows samples of typefaces in various sizes. If final version
is printed, printed specimen book is required. If final version is on screen
then only can the decision be made on screen. This book provides an accurate
reference for type, type size, type leading, type line length etc.
Ideal
text has a middle gray value, not dark or a series of stripes.
Useful
to enlarge type to 400% on the screen to get a clear sense of the
relationship between the descenders on one line and the ascenders on another
line.
'The devil is in the details and in typography is all about the
details.' The more fastidious you are, the better you will be at
typography.
Week 4: Text _ Part 2
Indicating paragraphs
The pilcrow is one of the options in indicating paragraphs.
Leading
should be same as paragraph space. This ensures cross - alignment across
columns of text. Ex: if font size is 10 and leading is 12 then paragraph
space is also 12.
The blue indicators are hidden characters that let
you know better how to format the text. Reduce the size of the text box
& press the plus symbol and drag it into another column.
Leading -
the space between 2 sentences.
Line spacing- the space between the
descender of one line to the descender of the next line.
Standard
indentation is another way to indicate paragraphs. If font size is 10, the
indentation should be 10 pts as well. Only use indentation in justified
alignment, never in left alignment
Otherwise there will be ragging on
the left and the right which will look very messy.
Extended
paragraphs-creates large wide columns of text which looks ugly. Sometimes
used in academia texts.
Widows & orphans
Widows and orphans must be avoided in typesetting.
Widow - a
short line of text left alone at the end of a column of text
Orphan - a
short line of text left alone at the start of a new column.
Orphans are
unpardonable mistakes no matter the alignment. Widows are unforgivable in
justified texts as well but are more forgivable in flush right and ragged
left texts due to ragging.
The solution to widows is to create a forced
o line break to rebreak lines throughout paragraphs. Shift + enter - forced
line break. Otherwise use alt & left/right to track the sentence.
However when tracking, it can only be increased or decreased by 3. Orphans
require more care however.
Highlighting text
Within a large body of text can highlight a paragraph/sentence. Ways
to do so are by italicising, bolding the type face,
change the typeface and bold
it
or
changing the colour of the text.
When changing the typeface from serif to sans serif you must change
the font size by. 5 to account for the larger x-height of the sans serif
Reduce
the point size of aligned numbers by .5 because it is larger and will stand
out.Another way is by placing the text within a coloured text box. Sometimes
it is necessary to extend some typographic elements outside of the column of
type.
Primes are straight versions of quotation marks which actually
indicate feet and inches. Quotation marks are always slanted.
Headline within text
Typographic hierarchy is important. There are different ways of
treating headlines within a body of text. A head indicates a clear break
between the topics within a section. B head is subordinate to the A. B head
indicates a new supporting argument or example. Follows leading space. C
heads highlights specific facets. Must have an em space/two spaces after.
Cross alignment
Cross aligning headlines and captions with text type reinforces the
architectural sense of the page. To achieve cross alignment of 2 different
size fonts, the leading of the text with larger font should be double the
leading of the text font
Week 5: Basic
Typography has a number of technical terms. Knowing a letterform's component parts make it much easier to identify specific typefaces.
Baseline: the imaginary line that is the visual base of the letterforms
Median: the imaginary line defining the x-height of letterforms.
X-height: The height in any typeface of the lowercase x.
Capital letters tend to have a slightly shorter height than the ascenders. This is because of an optical adjustment to make all the letters look the same height due to capital letters being wider than lowercase letters.
Stroke: any line that defines the basic letterform.
Apex/vertex: the point created by joining 2 diagonal stems (A,V)
Arm: short strokes off the stem of the letterform, horizontal (E,F) or inclined upward (K,Y)
Ascender: portion of the stem of a lowercase letterform that projects above the median line.
Barb: The half serif finish of some curved stroke
Beak: The half serif finish of some horizontal arms.
Bowl: The rounded form that describes a counter, can be open or closed.
Bracket: transition between serif and stem.
Cross bar: horizontal stroke joining 2 stem strokes.
Cross stroke: horizontal stroke on lowercase F and T
Crotch: The interior space where 2 strokes meet
Descender: stroke that extends below the baseline.
Ear: stroke extending out from the main stem or body of the letterform
Em/en: gap between words. Generally the width of the capital letter M. En is half the width of em. Generally used to describe Em and En dashes.
Finial: rounded noa-serif terminal to a stroke
Ligature: the character formed by the combination of 2 or more letterforms.
Spine: curved part of the letter s
Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
Swash: The flourish that extends the stroke of a letterform. Never use capital letters with swashes together in one word.
Terminal: the self-contained finish of a stroke without a serif. Sort of a catch-all term.
The full font of a typeface contains much more than 26 letters, 10 numerals and a few punctuation marks.
Full font: type family of several typefaces(different weights)
Components of a full type family:
Uppercase letterforms (capital letters)
Lowercase letters
Small capitals (uppercase letterforms drawn to the x-height of the typeface) - primarily in serif fonts, used in acronyms in text to not make them stand out, some softwares can force small capitals but this shouldn’t be used because they will change the weight of the strokes
Uppercase numerals (lining figures) - same height as uppercase letters and set to the same kerning width
Lowercase numerals (old style figure/text figures) - set to the x-height with ascenders and descenders, best used in large bodies of text. Less common in sans serif typefaces. (To access: ID > type > glyphs > character map)
Italic: most fonts are produced with matching italic, small caps are almost always Roman only
Punctuation, miscellaneous characters - important to know what characters are available in the typeface before deciding to use it
Ornaments - used as flourishes in invitations or certificates, only a few traditional or classical typefaces contain ornamental fonts as part of the type family (I.e. adobe caslon pro)
Describing typefaces
Roman: uppercase forms are derived from inscriptions on Roman monuments, slightly larger stroke in Roman is called ‘Book’
Italic: named for 15th century Italian handwriting which it is based on, oblique conversely are based on Roman form of typeface
Boldface: thicker stroke than a Roman form. Also called semibold, medium, black, extra bold or super. In some typefaces (Like Bodoni) I the boldest rendition is called poster
Light: a thinner stroke than the Roman form, even lighter strokes are called thin
Condensed: also known as compressed
Extended: wider than Roman
Comparing typefaces
The 10 typefaces later mentioned are all designed with the goals of easy readability and an appropriate expression of contemporary aesthetics. These typefaces have surpassed the latter goal and have remained in use for decades, and some even centuries. As a beginner typographer, these 10 typefaces are all you need for almost any early projects in your design programme. Once you understand how to use these typefaces appropriately and effectively, you will be well prepared to understand and appreciate other typefaces you come across.
Adobe Caslon Pro, Bembo std, Bodoni std, Futura std, Gill Sans std, ITC Garamond std, ITC New Baskerville std, Janson text LT std, Serifa std, and Univers LT std
Beyond the gross differences in x-height, the forms display a wealth of variety; in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression. A good typeface presents the message before the typeface.
As you study other designers work, you’ll notice many people who work seriously with type employ a limited palette of typefaces.
“You can’t be a good typographer if you aren’t a good reader.” Read many books and websites to learn more and understand better.
INSTRUCTIONS
Task 1 : Exercise 1 - Type Expression
We are instructed to sketch our ideas for type expression using the following words : distort, bite, cozy, fragile, box and accelerate. Distortion of the type is discouraged and graphical elements must be limited.
Figure 1.2: Cleaned up word expression sketches, Week 1(02/09/2022)
I sketched out ideas for all the words o photoshop. When I realized I had very few ideas for 'fragile' and 'box', I decided to focus on ideas for the remaining 4 words. Once I had filled the page with sketches, I cleaned up the sketches and arranged them for clarity.
After the feedback session, I started digitization on bite #4, accelerate #2 & #4, distort #1 and cozy #1. Of course, I made sure to follow the feedback given while digitizing the words.
Figure 1.3: Digitization process of bite, cozy and accelerate, Week 2 (06/09/2022)
I had a clear idea of how to digitize bite as it was pretty simple and straightforward. The feedback given regarding this sketch was to keep all the letters aligned in a row for simplicity. My initial digitization tried to use a different font to emphasize the 'I's. Mr Vinod advised against that and to cut the ends of the 'I's into points instead. Regarding cozy, the idea was simple but difficult to execute. After testing, I decided to digitize it using a sans serif typeface and a serif typeface to compare them.
Figure 1.4: Digitization process of accelerate, distort and cozy, Week 2 (06/09/2022)
With accelerate, I digitized both sketches but ended up creating more variations with accelerate #2's idea. I explored how best to convey motion and the perspective of the letters getting further away using 2 different typefaces. I also played with slight distortion of the letters and varying fonts. I tried another digitization of cozy with emphasis on the 'C' being a pillow. For distort I tried different fonts to maximize the space used in the frame and with the negative space using black and white.
Figure 1.5: Digitized sketches of cozy, bite and accelerate, Week 2 (06/09/2022)
Figure 1.6: Digitized sketches of distort, accelerate and cozy, Week 2 (06/09/2022)
On another day, I managed to create 2 more digitizations as I had more ideas.
Figure 1.7: Further digitization process of accelerate and cozy, Week 2 (09/09/2022)
I tried adjusting the accelerate #4 to look more like a bullet train on its tracks. I feel like this version of the word is more expressive than the previously digitized one. For cozy, I tried yet another typeface and rotated the letters inside to be lying nestled in the C.
My final choices for the digital type expression are as shown below:
This was approved but feedback was given for 'distort' would be to decrease the opacity of the 'distort' that is behind. This is so that the word is more readable while still being distorted.
Figure 1.10: Final digitized type expression, Week 3 (13/09/2022)
The 2nd part of this exercise is to animate one of the type expressions into a simple gif. We are advised to sketch out how we intend to animate the expression. The animation must stay true to the expression of the word without adding on ideas that do not make logical sense. The gif sizes can only be 1024 x 1024 px or 800 x 800 px at 72dpi.
Figure 1.11: Animation planning sketches, Week 3 (13/09/2022)
Figure 1.12: First draft of animation frames, Week 3 (13/09/2022)
Figure 1.13: Rough draft of 'bite' expression animation, Week 3 (13/09/2022)
I felt like this idea would be tricky to execute to a point where I'd be satisfied with the results. Therefore, I decided to attempt the 'cozy' idea as well.
Figure 1.14: Rough draft of 'cozy' animation frames, Week 3 (13/09/2022)
Figure 1.15: Rough draft of 'cozy' expression animation, Week 3 (13/09/2022)
I feel like this idea suits the expression of cozy as the letters slowly fall into a rocking cradle. However the rotation of the entire word is too rough to suit the word.
Figure 1.16: Updated 'cozy' animation frames, Week 3 (13/09/2022)
Figure 1.17: Screenshot of Photoshop frame animation process, Week 3 (13/09/2022)
Figure 1.18: 2nd test animation for 'cozy', Week 3 (13/09/2022)
Figure 1.19: 3rd test animation for 'cozy', Week 3 (14/09/2022)
Figure: 1.20: New set of 'cozy' animation frames, Week 4 (19/09/2022)
Figure 1.21: 'Cozy' gif animation 4, Week 4 (19/09/2022)
This gif is smoother and has the rocking effect that I intended. This animation will be final outcome.
Final Outcome of Task 1 Exercise 1: Type Expression
Figure 1.23: Final outcome of static 4 word type expression exercise, PDF, Week 3 (13/09/2022)
The second exercise involves text formatting and working with InDesign. We only have a week to complete this task so we are instructed to follow the video tutorials given along with the additional advice given in class.
I started out following each step shown in the video Type_Ex Text Formatting 1:4. This part of the exercise teaches how to do kerning and letterspacing for large text such as headlines.
Figure 2.2: The outcome of the first part of the text formatting exercise, Week 4 (25/09/2022)
Figure 2.3: Process of formatting body text and inserting an image, Week 5 (26/09/2022)
Figure 2.4: Process of arranging elements and cross-aligning text, Week 5 (26/02/2022)
Figure 2.5: Process of experimenting and choosing a final layout, Week 5 (26/09/2022)
Typeface: Univers LT Std
Font size: 9 pt
Line length: 60 characters on average
Leading: 11 pt
Paragraph spacing: 11 pt
Figure 2.6: Chosen layout for text formatting exercise, Week 5 (26/09/2022)
The chosen layout is not great so variation should be explored. Analyze good and bad layouts to learn what makes a good layout. Look at good layouts and sketch out layouts before arranging. Additionally, the font size of the photo caption should be made smaller by 1 or 2 points.
Going back to the other layouts I made, layouts 2 and 3 are more suitable if they can be adjusted.
Figure 2.7: More experimentation of layouts, Week 5 (27/09/2022)
Figure 2.10: Final outcome of text formatting exercise with visible grids and guides, JPEG, Week 5 (27/09/2022)
Figure 2.11: Final outcome of text formatting exercise, PDF, Week 5 (27/9/2022)
Fonts: Univers LT Std Bold & Univers LT Std Black
Type Size: 27
Leading: 22
Paragraph spacing: 22
Body
Fonts: Univers LT Std Roman
Type Size: 9
Leading: 11
Paragraph spacing: 11
Characters per line: 57
Alignment: Left-aligned
Margins: top- 30mm, bottom- 100mm, left & right- 12.7mm
Columns: 4
Gutter: 5mm
FEEDBACK
Week 2:
General feedback: Keep the typefaces that are allowed in mind. Consider the character space. Remember that any extra lines should be an enhancement, not let the word be reliant. Overall sketches are good.
Specific feedback: Distort #1 is good and cozy #1 is alright. Accelerate #2 is okay and accelerate #4 can be explored further by increasing the size of the 'A'. Bite #4 is okay but the letters should be arranged in a straight line instead.
Week 3:
General feedback: Keep it simple with one main form of communication. Try to make the space that the type take up be suitable for the expression and see how it fits in the overall frame. Oftentimes, using a font with a lot of character/decorative font it can impede communication. I created a rough animation for my expression of bite.
Specific feedback: All digitized type expressions are good but opacity of the word distort that is grey should be lowered to make the word stand out and increase readability. The animation idea is alright but the gif is too choppy. Needs to be smoother and fix the timing.
Week 4:
General feedback: Eportfolio - Avoid lengthening the post length further by combining sketches or process work into one jpeg, max of 6 images per jpeg
Specific feedback: The cozy animation idea works and the animation is acceptable. This will be my final outcome for the 2nd part of exercise 1. Blog has all required sections and is well documented
Week 5:
General feedback: There must be an alignment with other elements when arranging. Captions for an image should be 1-2 point size smaller. For large amounts of body text, never make it bold, italic or use condensed font. Never use 2 different serif or sans serif typefaces in the same layout.
Specific feedback: Try more variations in the arrangement of the layout. Try to adjust the ragging of the 4th paragraph if possible.
REFLECTION
Exploration: Working on these exercises was tiring but interesting. The first exercises was a more creative exercise and required more experimentation across different applications to achieve a good result. The second exercise was more technical and detail orientated.
Observations: I observed that I tend to stick to the first ideas I have until I can sketch them out. I noticed that keeping track of my progress using screenshots helps me to make progress.
Findings:
I found that updating my blog according to a template and right after making any progress is a good practice. I also found that I should analyze more examples of work while sketching or experimenting to get a better idea of what makes a good work.
FURTHER READING
Figure x.x: An example of Chinese written text
Figure x.x: An example of the word 'worsening' set vertically
Figure x.x: An example of the word 'improving' set vertically
Week 2: Typography Referenced (Haley, A., & Al, E. (2012)
Within the aforementioned chapter, I am summarizing 'The Past as Inspiration' section. It discusses how a designer must take into account the constraints of the type-making and typesetting technologies, the rendering processes (printing or illuminating) and the past responses to similar conditions by countless designers. A good visual history of past designs is essential for every designer.
Display type - Type that is meant to quickly catch the reader's attention. Display type must be legible but because the reader can decipher small chunks of type rather quickly, legibility is not as important as with text type. Ex: Rockwell, Clarendon
Text type - Large bodies of type, such as book text. Typefaces designed for the purpose of uninterrupted listening are most suitable. Ex: Caslon, Bembo
Text type and display type used to be vastly different. Text type were often designed with historical references. Type histories tend to focus on only text typefaces. Contributions of sans serif to typographic design were downplayed while display type and non-Latin scripts were ignored. Today we tell a richer story of typeface. Old books and specimens enrich our understanding, provide inspiration, and protect us from reinventing the wheel.
It is better to examine typefaces in the the context in which we see them on the page. If we look at typefaces in use we see that many of the features of the letters are less important than the overall impression. The presence or absence of complementary styles and weights within the paragraph and the editorial structure of the text determines our reading strategy. It's important to know what is conventional and acceptable before attempting to break the rules in typeface design. A good designer is at least a social observer while a great designer is a social commentator.
Designers often use terms interchangeably but having a good grasp of the nuances is helpful, if only because they reveal different aspects of the design process.
Letterforms - Any representations of letters made manually. The maker controls the size and sequence and the surface it is rendered on.
Typeforms - Any representation of letters meant for mechanical reproduction. The user controls the size and sequence, which the maker is unaware of at the time of making. It is a snapshot of the designer's intentions for a collection of typeforms. The final result may not be exactly the same depending on the technology used to render it.
Glyphs - The typeforms in a digital format, specifically for typesetting.
Font - The machine-specific implementation of a typeface. Any digital format of the typeface is a font no matter the coding. Often typeface designer and font maker are two separate people though one person may play both roles.
Good typographic expression is an art but it is also based on principles. One of the most valued typographic principles deals with purpose, and more specifically function. Readability should always take precedence.
There's a saying that goes, "If all you have is a hammer, everything looks like a nail." This holds true for the designer. If all a designer knows is a handful of principles, the all a designer can create is a handful of solutions.
Because of this difference, site users pre-read or scan the page they are on. From this quick view, length, relevance, and hierarchy are understood and the choice to read the entirety id made.
Variety of units of text, images, rules, and dynamic variations in white space all help readers mark their pace and place in the body of text. When designers provide these types of visual breaks, readers are able to stop and restart reading or return to a specific lace in the text in a manner that's similar to print typography.
Week 5: The Vignelli Canon (Vignelli, Massimo)
Tight margins establish a tension between text, images and the edges of the page. Wider margins deflate the tension and bring about a certain level of serenity to the page. Tight type setting transforms words into lines as loose type settings transform words into dots.
All this is space manipulation and it is this device that is used in layouts to achieve a desired expression. The relationship between the size of type and the space around it is one of the most delicate and precious elements of a composition. For many artists, white space is the essential element of the composition. American graphic designers have used white space as the significant silence to better hear their message loud and clear.
Comments
Post a Comment