TYPOGRAPHY - Task 01: Exercises
23/04/2024 - 28/05/2024 | Week 01 - Week 05
Koh Sher Wei | 0353816
Typography | Bachelor of Design in Creative Media | Taylor's University
List of Contents:
> Lectures
> Feedback
Lectures :
Fig 1.1.2
- Etruscan carvers used to draw out letter on slabs of stones
Fig 1.7.1 example of "flushed left" text
WEEK 01 : [Typo_0_Introduction]
What is Typography?
- It is a fundamental in any aspect of design
- Can be created by geometrical shapes, typefaces and other font
families.
- Is also possible to animate into short clips or make them into
gifs.
- Style arrangements, appearance of letter, numbers and symbols
- The expression and composition of textual information
Why is typography important?
- It influences and enhances a user's experience when it comes to
using a website or observing designs.
- Communicates designs effectively with fitting aesthetics.
History of typography:
- developed and evolved from years of calligraphy in different
styles.
- penmanship used to be very emphasised back then to show one's level
of education.
WEEK 02 : [Typo_1_Development]
Development of Typography:
[ref. KNJ 2002 Atty Primal, The New Kay Lawrence King]
- Most written letters are derived from the Phoenician
alphabets.
Fig 1.1.1
- Different tools were used for writing, hence causing letter/form
development.
Fig 1.2
- Square and rustic capitals/cursive form occurred from the speed and
compression in writing.
- Charlemagne implemented the first standardised writing/calligraphy
system.
Fig 1.3
- Typefaces came after the standardisation of lettering by multiple
people throughout the years.
- Then developed into digitisation of the invented typefaces.
- Modern designs require aesthetics and unique typeforms, hence
digitisation is needed for creative advertising.
WEEK 03 : [Typo_3_Text_P1]
Texture formatting:
- Kerning (automatic adjustment of space between letters)
- Letterspacing (add space between letters)
Fig 1.4 example of "kerning" and "letterspacing"
- Tracking (combination of kerning and letterspace in one word)
- Tracking is more prominent in tiles or headings where spacing is
important
Fig 1.5 types of
"tracking"
- Manual kerning and letterspace is more encouraged on Uppercase
due to their independent forms
- Lowercase usually requires counter form for readability, hence
tracking is not advised.
- unnecessary kerning/letterspace causes difficulty in deciphering
words/sentences/paragraphs.
Fig 1.6 example of
"kerning" and "letterspacing"
- Flushed left (each line starts at the same point on the left but
causes ragged ending on the right)
- Centered (format of text is centered, left and right are both
ragged) *not recommended for large amounts of text
Fig 1.7.2 example of "centered" text
- Flushed right (each line ends at the same point on the right, left
is ragged) *readability is more difficult
Fig 1.7.3 example of "flushed right" text
- Justified (letterspace more to line up left and right)
Fig 1.7.4 example
of "justified" text
- Don't use script typefaces in capital letters (not
appropriate/doesn't look proper)
- Typeface texture is important for creating successful
layouts
Fig 1.8 segments of a typeface/text
- Font size/leading must be appropriate for the readability of
texts.
Fig 1.9 definition of type size, leading and line length
WEEK 04: [Typo_4_Text_P2]
Indicating Paragraphs
- Indentation, best used when the paragraph is justified.
- Extended paragraphs make a passage look unusual due to the wide
columns of text.
- Pilcrow (indicates paragraph spacing)
Fig 1.10.1 example of 'pilcrow' in a paragraph
- Leading (spacing between lines within a paragraph)
- Leading should always be 2.5 or 3 points larger than the font
size.
- Hence, leading and paragraph spacing should be the same for cross
alignment.
- Cross alignment (to ensure that texts in 2 or more columns are
aligned so that it is readable)
Fig 1.10.2 example of "cross alignment"
Fig 1.10.3 difference between line space and leading
Widows and Orphans (gaffes that should never occur in
design)
- Widow (short line of lone text at the end of a column of
text)
- Widow is sometimes used in flush right text but never in justified text.
- Solution for widow: rebreak your line/force line break within your paragraph.
- Force line break [shift + enter], shifts words down to the next line to lengthen the text.
- Orphan (short line of lone text at the start of a column of
text)
- Orphan should never be used
- Solution: reduce line length
Fig 1.11 example of "widow" and "orphan"
Highlighting Text
- Using italics.
- Increasing boldness.
- Change colour of text .
- Highlight the text field
- Maintain the reading axis of text ensures readability at its best.
- Change typeface
- Keep in mind that pont size should be adjusted to match the original typeface height
- Reading axis is important hence paying attention added
elements is important.
Fig 1.12 example of added elements breaking
axis
Headline within Text
- Creating hierarchy of information.
- Headline, Sub-headline, Sub sub-headline; should always
be indicated clearly.
- Putting together a sequence of subheads is also
hierarchy.
Cross Alignment
- Cross aligning headlines and captions with a passage
of text, reinforces the structure of the page
layout.
- Cross-alignment can be achieved by doubling the leading
space of the headline or caption with larger point
size.
WEEK 05: [Typo_2_Basic]
Describing letterforms
- Baseline (imaginary base line of the letterforms)
- Median (imaginary line defining the x-height of
letterforms)
- X-height (The height of lowercase 'x'.)
- Stroke (any lines that defines the basic letterform)
- Apex/vertex (point created by 2 diagonal stems)
Fig 1.13.1 Lecture note of baseline, median and X-height
- Arm (short strokes off the stem of the letterform)
Fig 1.13.2 Example of "arm"
- Ascender (portion of a stem of the lowercase letterform that
projects above the median)
- Descender (portion of a stem of the lowercase letterform that
projects below the baseline)
Fig 1.13.3 Example of "Ascender"
- Barb (half-serif finish on some curved stroke)
- Beak (half-serif finish on some horizontal arms)
- Bowl (rounded form that describes as a counter)
- Bracket (transition between serif and the stem)]
- Cross Bar (horizontal stroke in letterforms like 'H')
- Cross Stroke (horizontal stroke in letterforms like 'f')
- Crotch (interior space where two strokes meet)
- Ear (stroke extending out from the main stem or body of the
letterform like 'r')
Fig 1.13.4 Example of "crotch"
- Em (distance equal to the size of the typefaces), En (half
the size of an em)
- Finial (the rounded non-serif terminal to a stroke)
- Leg (Short stroke off the stem of the letterform)
- Ligature (character formed by the combination of two or more
letterforms)
- Link (stroke that connects the bowl to the loop of a
lowercase "g"
- Serif (the right-angled or oblique foot at the end of the
stroke)
- Shoulder (the curved stroke that is not part of a bowl)
- Spine (the curvature of the letter "s")
- Spur (the extension, the articulate, the junction of the
curved and rectilinear stroke)
- Stem (the significant of vertical or oblique strokes)
- Stress (the orientation of the letterform, indicated by the
thin stroke in round forms)
Fig 1.13.5 Example of "Stress"
- Swash (the florish 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. A catch-all term)
The Font
- Uppercase (aka capital letters)
- Lowercase (aka small letters)
- Small Capitals (Uppercase letterforms drawn to the x-height
of the typeface)
Fig 1.14.1 Comparison of "small capital" and
"uppercase"
- Uppercase Numerals (aka lining figures, same height and
kerning width as uppercase letters)
- Lowercase Numerals (aka old style figures or text
figures, these are set to x-height with ascenders and
descenders)
- Italic (fifteenth century Italian cursive
handwriting)
- Punctuation, miscellaneous characters (miscellaneous
characters are different throughout typefaces)
- Ornaments (used as flourishes in invitations or
certificates)
Fig 1.14.2 example of "ornaments"
Describing Typefaces
- Roman (named after the uppercase forms that are
derived from inscriptions of Roman
monuments.
- Book (slightly lighter stroke in roman)
- Italic (named for fifteenth century Italian
handwriting on which the forms are based)
- Oblique (conversely are based on roman form of typefaces)
- Boldface (characterised by a thicker stroke
than a roman form, can otherwise be known as
"semibold", "medium", "black", "extra bold", or
"super".
- Light (A lighter stroke than the roman
form)
- Condense ( a version of the roman form)
- Compressed (extremely condensed styles)
- Extended (an extended variation of a roman
fonts)
Fig 1.15 Different typefaces
Comparing Typefaces
Fig 1.16 List of the 10 given typefaces
Instructions :
<iframe
src="https://drive.google.com/file/d/14U0XJM-0kbt1JgDOlwgXa6xWfZN0Syjk/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 01: Exercise 1 - Type Expression
Given words: "Balance", "Jump", "Roll", "Crash", "Flow", "Spark".
Students are to choose 4 words from the list to explore ideas and
develop sketches. The aim is to show the type expressions that
matches the meaning of each word. Then, the sketches are to be
composed digitally for a finalised design. Typefaces are limited to 10 fonts as instructed by the
lecturers.
Chosen words: [
roll, spark, crash, jump ]
Week 01 - week 02
Rough sketches:
Fig 2.1 "Roll" first sketches [30/04/2024]
Annotations:
1. Using letter 'O' to express rolling on letter 'r' and 'l'.
2. Arranging the letters to show the rolling movement.
3. Again utilising letter 'O' like a ball, pushed by the letter 'r' to
roll over letter 'l'.
4. Having letters 'r' and 'l' roll on letter 'O'.
Fig 2.2 "Spark" first sketches [30/04/2024]
Annotations:
2. Letters are arranged in different sizes to express spark
particles.
3. Capitalise and bold letter 'P' to sort of dispense small letters
's', 'a', 'r', 'k', as inspired by spark sticks.
4. Also inspired by spark sticks, but utilising letter 'k' as the
"stick" instead, with the other letters act as sparks.
Fig 2.3 "Crash" first sketches [30/04/2024]
Annotations:
2. Have letters 'r', 'a', 's', 'h' tightly fitted to crash into letter
'C'.
3. Using overlap and whitespaces to create a messy
collision.
4. Same concept with idea 1 but with a different font, and
bolded.
Fig 2.4 "Jump" first sketches [30/04/2024]
Annotations:
1. Distort letter 'U' into a jumping motion.
2. Using 'M' to show the jumping motion, as it is the only letter with
"legs".
3. Having small letter 'j', 'm', 'p', jump on capital letter 'U' in a
fun composition.
4. Same concept as idea 3, but with 'm' as the base letter.
Week 03
Revised sketches (as per feedback):
Fig 3.1 "Roll" revised sketches [06/05/2024]
While looking through the typefaces, I felt it was important to pay
attention to the shape of 'O' that I wanted.
Therefore, deciding to explore with "Adobe Caslon Pro". I liked that the letter 'O' had different width in its overall
stroke. Then, I played with the placements and sizes of the letters to
match the meaning of the word "roll". One of the ideas was to utilise
different layers and saturation to show that the letters were rolling
within themselves.
Fig 3.2 "Spark" revised sketch [06/05/2024]
For this word, since the idea was already decided on and didn't need
much changes. I just browsed through different typefaces to see which
one I wanted to use and tried to sketch it out.
Fig 3.3 "crash" revised sketches [07/05/2024]
Idea 01 was to use a bolder typeface with rounder edges and place
them messily.
Idea 02 I chose "Futura Std - Condensed" because I liked the
lengthy/flat edged look, then overlapped the letters to crash into
each other. Idea 03 was the same concept but with typeface "Bembo Std
- Italic" instead.
For idea 04, I used "Bembo Std" as well. I only capitilised and bolded
letter 'A' to act as a pillar, then sketched the other letters in small
and italic to show them "crashing" into letter 'A'.
Week 04
Initial digitisation:
Fig 4.1 "Roll" first digitisation [14/05/2024]
For the typeface, I used Adobe Carlson Pro [regular] and [bold].
Only letter 'O' was bolded as it is the only rounded letter, hence
making it the "rolling" subject. Then, as per my previous sketch, I
duplicated the word and rotated the letter 'O' a little. Making one
of the two "roll"(s) lighter than the other and placing it further
up to further emphasise on the rolling effect.
Fig 4.2 "Spark" first digitisation [14/05/2024]
For "Spark", I did very minimal changes, and only moved around the
letters 's', 'p', 'a', 'r' to see where the best placement would be.
The typeface chosen was, New Baskerville std [roman].
Fig 4.3 "Crash" first digitisation [14/05/2024]
These two digitasations are based off of idea 04 from my revised
sketches. The idea of using capital letter 'A' as a pillar for the
other letters to crash into is the concept. However, I tried out
too typefaces to determine which one would relate more to the
meaning of the word used. Left: Bembo Std ; Right: Serif std. The
letters were also placed very tightly packed as a way to further
imply the act of "crashing".
Fig 4.4 "Jump" first digitisation [14/05/2024]
Idea 01: Use a bold and condensed typeface and make letter 'j'
jump on a larger sized letter 'U'.
Idea 02: Make letter 'U' jump off of letter 'm'.
Idea 03: Duplicate, resize and decrease opacity for letter 'U'
to interpret the movement of jumping over the word "jump".
Idea 04: Emphasise on letter 'U' by resizing it to a larger
size, then rotating it to make it look more fun, hence showing
that the letter is jumping.
Final Type Expression:
Fig 5.1 Final Type Expression (JPEG) [16/05/2024]
ROLL: Repetition of O from
darker to lighter with positions moving further back. Only 'O' that
is fully black is in italic, to show a rolling motion. Typeface
(Adobe Carlson Pro [regular] and [italic]).
SPARK: Typeface is changed
from ( New Baskerville Std ) to ( Futura Std [light] and [book
oblique] ). Placement is still the same as initial digitisation but
the sizes of the small letters are standardised instead for the
"spark" effect.
CRASH: Improved Idea 01 from
initial digitisation. Centered the letter 'A' and placed the other
letters in line with the middle line of 'A' with different
rotational angles. The letter are still tightly placed together.
Typeface used is (Bembo Std [Regular] and [Italic]).
JUMP: Simplification of Idea
04 from initial digitisation. Instead of duplicating letter 'U' 3
times, I only duplicated it once, and made the italised the letters
'U', 'M', 'P'.
Fig 5.2 Final Type Expression (PNG)
[16/05/2024]
Animation:
Fig 5.3 "roll" animation artboard (AI) [18/05/2024]
Fig 5.4 "roll" animation frame (PS) [18/05/2024]
Fig 5.6 "roll" final animation [18/05/2024]
I chose to animate the word "roll" from my final type expression. The reason being, the duplicates of the letter 'O' represents the rolling motion very well. So with that, I felt it would make sense to develop the design into an animation as the movement would flow smoothly with the pre-existing stop-motion.
The animation board was done on [Adobe Illustrator] as instructed from the lecture video. My idea process for the animation, was to start letter 'O' from the left edge of the artboard and have it roll over letter 'R' into it's original position. Then, to tie it down with the final type expression design, I added some "delayed shadow motion" to enhance the rolling motion, as well as to connect it to where it ends in its original position between letter 'R' and 'L'.
Lastly, the artboards were exported into Adobe photoshop to be made
into a gif where the animation is smooth between the artboards that I
created.
Task 01: Exercise 2 - Text Formatting
Exercise 02 is to help us familiarise ourselves with
different areas of text formatting. This includes type
choice, type size, leading, line-length, paragraph
spacing, forced-line-break, alignment, kerning, windows
and orphans as well as cross alignment. By using
appropriate software and watching lectures, we should be
able to apply and develop our knowledge of spatial
arrangement in texts.
Week 05
Typo_Ex Text Formatting 1:4 (Tracking and Kerning)
- Learning to use
[Alt + left/right arrow]
to kern the spacing between individual
letters.
- For letterspacing/general tracking
[select all > Alt + left/right arrow]
Fig 6.1 Kerning practice with our name
[17/05/2024]
Typo_Ex Text Formatting 2:4
(Font size, Line-Length, Leading &
Paragraph Spacing)
- Margin adjustment
[layout > margins & columns], appealing layout needs to have an attractive
margin.
- Line-length
(average no. of characters per line) should
always be about 55 to 65.
- To check info
[windows > info].
- Adjust line-length by changing font size,
between 8pt to 12pt.
- Next is to determine leading, then paragraph
spacing [paragraph formatting control] both should
be of the same point size
Fig 6.2 Text Formatting 2:4 practice
[20/05/2024]
Typo_Ex Text Formatting 3:4
(Alignment, Paragraph Spacing, Text Fields,
Ragging)
- Adjust image without cropping
[Direct Selection Tool]
to resize the boundary box.
- Plus sign on the the text box means there is
more text that is not displayed.
- To fill column with undisplayed text
[click + sign > click column box]
- Do kerning/letterspacing to smooth out the
ragged side of text.
- [edit > preferences > units & increments > kerning/tracking (must be at 5)]
- Try not to exceed 3 clicks when tracking
- Alignment justified, must ensure that the
spacing between texts is not awkward.
Fig 6.3 Text Formatting 3:4 practice
[21/05/2024]
Typo_Ex Text Formatting 4:4
(Cross Alignment & Baseline Grid)
- Add a headline, has to be larger than body
text.
- Sub headline, should be under the
headline.
-
Baseline grid is needed to achieve cross
alignment
- To turn it on [View > Grids & Guides > Show Baseline Grid]
- Adjust view threshold to show baseline grid on full document mode.
- Adjust baseline grid according to leading [Edit > preferences > Grids > Increment (11) > threshold (50%)]
- Then [Select both body text > right click > Text frame option > Baseline Option > Offset (leading) > General > Align (top)]
Typo_Ex Text Formatting 4:4A
(Cross Alignment shortcut)
- To see hidden characters [Ctrl + Alt +
I]
- To maintain cross alignment, leading
should always be multiples of 2 (11, 22,
44)
Fig 6.3 Text Formatting 4:4 practice
[21/05/2024]
Layout practices:
- Trying out different layouts to
practice before getting to the final
layout.
I applied the same knowledge as
taught from the lecture videos and
searched for a photo online to include
into my layout. Then, I decided to
change the font into one that I prefer
and moved things around however I
thought looked good. For the final
layout, I chose one that I preferred
from the rest.
Fig 7.1 Text formatting layout
practice #1 [21/05/2024]
HEAD
Font: Headline - Futura Std (Bold
Condensed Oblique / Heavy), Byline
- Futura Std (Book)
Type Size: Headline - 40pt /
20pt, Byline - 10pt
Leading: Headline - 44pt / 22pt,
Byline - 11pt
CAPTION
Font: Futura Std (Light
Oblique)
Type Size: 10pt
Leading: 11pt
BODY
Font: Futura Std (Book)
Type Size: 10pt
Leading: 11pt
Paragraph Spacing: 11pt (3.881mm)
Characters per-line: 58
Alignment: Left justified
Margins: Top - 12.7mm, Bottom - 50mm
Columns: 4
Fig 7.2 Text formatting layout
practice #2 [22/05/2024]
HEAD
Font: Headline - Futura Std
(Bold Condensed Oblique /
Heavy), Byline - Futura Std
(Book)
Type Size: Headline - 50pt /
20pt, Byline - 10pt
Leading: Headline - 55pt /
22pt, Byline - 11pt
CAPTION
Font: Futura Std (Light
Oblique)
Type Size: 10pt
Leading: 11pt
BODY
Font: Futura Std (Book)
Type Size: 10pt
Leading: 11pt
Paragraph Spacing: 11pt (3.881mm)
Characters per-line: 58
Alignment: Left justified
Margins: Top - 12.7mm, Bottom -
50mm
Columns: 4
Chosen layout:
Fig 7.3 Text formatting Chosen
layout [23/05/2024]
Fig 7.4 Text formatting chosen
layout with grid
[23/05/2024]
HEAD
Font: Headline - Futura Std (Bold
Condensed Oblique / Heavy), Byline -
Futura Std (Book)
Type Size: Headline - 40pt / 20pt,
Byline - 10pt
Leading: Headline - 44pt / 22pt, Byline
- 11pt
CAPTION
Font: Futura Std (Light
Oblique)
Type Size: 8pt
Leading: 10pt
BODY
Font: Futura Std (Book)
Type Size: 10pt
Leading: 11pt
Paragraph Spacing: 11pt (3.881mm)
Characters per-line: 58
Alignment: Left justified
Margins: Top - 12.7mm, Bottom - 40mm
Columns: 4
Finalised text formatting layout:
Fig 7.5 Text formatting final layout
jpeg [28/05/2024]
Fig 7.6 Text formatting final layout
with grid jpeg [28/05/2024]
HEAD
Font: Headline - Futura Std (Bold
Condensed Oblique / Heavy), Byline -
Futura Std (Book)
Type Size: Headline - 60pt / 30pt,
Byline - 10.5pt
Leading: Headline - 66pt / 33pt, Byline
- 12pt
CAPTION
Font: Futura Std (Book, Book
Oblique)
Type Size: 7pt
Leading: 10pt
BODY
Font: Futura Std (Book)
Type Size: 9.5pt
Leading: 11pt
Paragraph Spacing: 11pt (3.881mm)
Characters per-line: 60
Alignment: Left justified
Margins: Top - 12.7mm, Bottom - 40mm
Columns: 4
Fig 7.7 Text formatting final layout
w/o grid in pdf [28/05/2024]
Fig 7.8 Text formatting final layout
with grid in pdf [28/05/2024]
Feedback from lecturer:
Week 01
General Feedback:
Start working on e-portfolio, watch lectures 0 -1 and start sketching
some ideas for the chosen/given words.
Week 02
General Feedback:
it's important to not change the typeface, make sure that our letters
are still identifiable according to the fonts that we choose. No
illustration should be added to our ideas, utilise only the
letters/words provided.
Specific Feedback:
- ROLL: do more sketches, choose a typeface to focus on. Consider using only capital letter to develop idea 3.
- SPARK: Idea 4 utilises the spaces from the letter K, which is a good direction to start with. Can start digitising.
- CRASH: None of the ideas are solid enough to make an impact. Consider capitilising the letters and choose a typeface which can depict the aggressiveness of "crash". Don't put the focus on 'C', a curved letter would deter the ideas from looking harsh.
- JUMP: Using letter 'U' to portray a bounce in the chosen word is a good idea. However, the sketches seem to stray from the 10 given typefaces, so it would be good to take a look into the fonts and figure out a way to digitise the ideas.
Week 03
General Feedback:
Don't go too far with the distortion as it tends to make the
typeface unrecognisable.
Specific Feedback:
- SPARK: consider using italic for "spar" to further emphasise that 'K' is the letter of highlight/base.
- ROLL: idea 2 is a good idea, try to include more repetition and use different tones to show the emphasis on 'O' for rolling. All letters can be same height, no need for sizing differences.
- CRASH: Idea 4, using capital A as the staple, then try to make the other letters more tight/packed together to show the effects of the meaning "crash". Also use serif font.
Week 04
Specific Feedback:
- SPARK: composition is good, just need to explore more fonts.
- ROLL: simplify it, just make the 'O' look like it's rolling.
- CRASH: enlarge and balance the letters according to 'A's middle line.
- JUMP: idea is good but not strong enough, do more exploration.
Week 05
General Feedback:
- Read through the content of the passage
- Find your own image to include (related to passage
contents)
Specific Feedback:
- Final animation is okay
- Can include up to 3 images per text formatting
practice exercise
Week 06
General Feedback:
- Image caption should be placed below the
image
- Image should be aligned to either the left or
right side of the column.
Specific Feedback:
- Italics should only be used to highlight text
so don't use it on image caption
- Make image caption smaller to differentiate
it from text.
- Also adjust image to fit to fill the column.
- Leading for passage is too little, make text
smaller so leading is at least 1.5pt.
- Adjust title to make it fill much more space and
stand out.
Reflection:
Experience
I enjoyed having brief but detailed descriptions on what is
to be completed every week, and that we are required to
record our progress and feedback diligently. The compilation of information and instructions by our
lecturers are detailed and well-organised. Which is honestly
very crucial in helping us keep track of our work and making
sure that everything is in place before submission date. It is
also good to have pre-recorded lectures and student examples
for us to reference from in case there were any parts that
were confusing.
Observations
After completing this task and observing what other students
came up with, I would say that I lack in creativity.
Especially from my first sketch up to my final outcome for
exercise 01, I do think that I could have come up with
better ideas but somehow was not able to do so during the
sketching process. I observed all the sketches once they
were all compiled, I notice I tend to narrow my sketches; so
most of them have the same concept just with different
composition. Thus, in both exercises, the designs and
layouts were not so captivating as there was really not much
of a "wow" factor in the progress improvements.
Findings
Essentially, typography is not just about different
ways/styles of writing words. It also includes how a word is
presented and how to size letters and texts in accordance to
passages and layouts. It's about paying attention to details
and observing the overall impression that a word plays into
a body of text, or the meaning of a word. Texts always need
to have proper formatting in order for the content to be
properly delivered.
Further Reading
Fig 8.1 "Typography Referenced" book by Allan
Haley
INTRODUCTION
This book talks about the history and development of
typography, from the invention of moveable type to today's
digital age. It shows how type design has shaped
communication and culture over time. The book also
highlights the current era's unprecedented interest in
typography in the current advancement of digital
age.
TYPOGRAPHY PRINCIPLES
- Designing with type involves both science and art.
- Requires balancing elements for functional solutions.
- Experienced designers rely on training and past
successes.
- Elements like size, shape, tone, placement, and colour are
crucial
- Understanding typography includes knowing different fonts
and their attributes.
- Designs evoke specific periods, places and movements.
- The key to a good design is purpose, function and
readability.
- Book design requires restraint and respect for traditional
principles.
Fig 8.2 Design example from the book "Typography
referenced" under "Typography principles"
