TYPOGRAPHY Task 1: Exercise ( Type Expression and Text Formatting)

25.9.2023 - 24.10.2023(Week 1 - Week 5)

Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media

Typography

Task 1: Exercise ( Type Expression and Text Formatting)

---

Jump link

1. Lectures

1.1 A. Introduction

1.1B. Development

1.2 Text

1.3 Text_P2

1.4 Basic 

2. Instructions

2.1 Task 1: Type Expression

2.2 Task 2: Type Formating

3. Feedback

4. Reflections

5. Further Reading 

---

LECTURES

Week 1: A. Introduction

Typography

WHAT:

• As a subject in a module
• Fundamental aspects in any design studies 
• Fundamental skills allow us to develop features, attributes and characteristics 
• Is visual, is the creation of typefaces or type families, also is animation form

WHERE :

• Website Design
• App Design
• Signage Design
• Bottle Label
• Book & Posters etc

 Typography evolved over 500 years : Calligraphy ➡️ Lettering ➡️Typography

Fig 1.1 Calligraphy, Lettering and Typography

 

Informal Calligraphy (Penmanship)

• Used to dedicated
• Used to reflect
• Write will have a good education, come from a higher class society

Definition:

• Oxford: “Typography is the style and appearance of printed matter.”
• Wikipedia: “Typography is the art and technique of arranging type to make written language legible (clearly clear), readable ( able to read) and appealing (have a positive feeling when you look at them).

Democratisation:

• Cause: The democratisation of typography through the invention of applications that now allow lay people to double in one specialised field.
• Result: The decline of typography quality around the world.
• Arrangement and appearance of letter numbers and symbols created by the process. 

Constitute Typography:

• Composition laying out information
• Presenting information
• The expression of information
• Textual information

Fig 1.2 Font and Typeface




B. Development

Development of  Typography : Over 500 years period , focusing on Western World Perspective.

Fig 1.3 4th century B.C Fonts

 

Formation of Roman

1.Early Letterform Development : Phoenician to Roman

• Initially, writing means scratching into wet clay with a sharpened stick or carving into stone with a chisel.
• Uppercase letter forms for nearly 2000 years are the only letterforms 
• Simple combinations of straight lines and pieces of circles

1.1: Greeks

• Semitic(People in the Middle East Jews or Christians Muslims from the region Middle East)
• Change the direction of writing (right to left and left to right alternately)
• Called “Boustrophedon” (how the ox ploughs)
• Changed the orientation of the letterforms 

1.2: Etruscan  

• Change in weight from vertical to horizontal 
• A broadening of the stroke at the start and finish

Fig 1.4 Development of Phoenician to Roman

2. Hand-script from 3rd-10th Century BC


2.1 Square Capitals(5th century BC)

• 60 degree 
• Starting using a reed pen
• More prominently

2.2 Compressed Square Capitals (Rustic capitals)

• 30 degree
• Slightly hard to read due to compressed nature 
• For pragmatic reasons 
• Twice as many words on a sheet of parchment
• Took less time to write up

Square and rustic capital were typically reserved for documents of intended performances.

  

2.3 4th-century Roman Rustic

• Start lowercase letter

2.4 Uncials

• One inch or one 12th of a foot high 

2.5 Half Uncials

• The formal beginning of the lowercase letter form

2.6 Standardise Text

• To communicate clearly, the command of Charlemagne introduced uppercase and lowercase letters, capitalisation, and punctuation to standardise text.

 fig 1.5 Hand Script

 

Gutenberg: 

• Famous guy who invented the mod called the modern-day printing press

• Skilled in engineering metal smithing and chemistry

• Created 42-line Bible
• The invention of the printing press revolutionized the production of books and led to the standardization of the letter form.

3. Text Type Classifications
• Origin approximated to the nearest quarter century so it's not extremely accurate
• Develop in response to prevailing technology commercial needs and aesthetic trends
• Differents eras of typography are categorized : Blackletter , old-type(Garamond) , transitional , modern and Sans-serif(Helvetica)

Fig 1.6 Blackletter and old-type

Fig 1.7  Traditional, modern and Sans-serif 

 Week 2 : Text

 Textual matter : 

• How to format text?
• What to look out for things of that nature.
• The video discusses various aspects of text formatting, including kerning, letter spacing and word spacing.

 

Kerning and Letterspacing

• Kerning refers to the automatic adjustment of space between letters; letterspacing means to add space between letters.
• Kerning is important in headlines or when using uppercase letters, while letter spacing is often done for uppercase letters to improve readability.

Fig2.1 Different of kerning and without kerning

 

InDesign and Illustration

• InDesign for pamphlets live leaflets, brochures, books, for posters.
• Dealing with a large amount of text or a limited amount of text, you become fastidious.
• Illustrations could be graphics or logos, create graphics.

 

Text Alignment

Tracking refers to the addition and removal of space in a word or sentence.

Fig 2.2 Different tracking

Loose tracking will become difficult to read (decrease the readability of the text)

Fig2.3 Normal and loose tracking

Different text alignment options like flush left, centred, flush right, and justified have different visual effects and should be selected based on the desired outcome and context.

1. Flush left

Lines start at the same point but end where the last word on the line ends, creating an asymmetrical, handwritten feel. Consistent word spacing maintains an even grey value in the text.

Fig2.4 Flush left

2. Centered 

This style brings symmetry to the text, giving equal importance to both ends of each line. It turns text into shapes, adding a visual quality to non-visual content. To maintain a smooth appearance, it's crucial to adjust line breaks carefully.

Fig2.5 centered

3. Flush right

This style emphasises the end of a line rather than the beginning. It's useful in situations (eg. captions) where text and image need a clear right alignment to avoid ambiguity.

Fig2.6 Flush right

4. Justified

Similar to centring, this style creates a symmetrical shape in the text. It achieves this by adjusting spaces between words and sometimes letters. However, it can lead to uneven white spaces, known as ' rivers', running vertically through the text. Careful attention to line breaks and hyphenation is essential to address the issue.

Fig2.7 Justified

Choosing typefaces complimentary typefaces is also an art (Don't use script typefaces in capital letters (R.S.V.P) will deduce mark)

Text Formatting

10/13.5 in the front refers to size, and the back refers to leading.

These typefaces were not meant to be read on-screen at this size.

Fig2.8 Adobe Calson and Bskerville

• The contrast in Bembo is a little bit reduced efficacy as a typeface.
• Garamond has a larger centre dissenter, the stroke or the thickness makes it more readable

Fig2.9 Bembo and Garamond

• Bauer has a high contrast level thus reducing readability
• Janson has a thicker stroke width (which means color more strangely, readable at this point)

Fig2.10 Bauer and Jenson

• Jenson is the darkest in colour
• Baskerville is the nearest perfect

Fig2.11 Comparing 6 typefaces

Text formatting should consider factors like font size, leading(line spacing), and line length to ensure readability and legibility. The goal of setting text type is for easy and prolonged reading.

Fig2.12  Anatomy of a typeface

• Follow the rule of thumb to ensure not more than 55 to 65 characters are occupied in one sentence. Characters are referring to the number of letters in one sentence exceeding 65, readability will reduce exponentially.
• Compositional requirement: Text should create a field that can occupy a page or a screen. The ideal text has a grey value.
• The grey value of text, which refers to the overall colour or darkness of the text, should be balanced to create a pleasant reading experience.

Fig2.13 Different leading of the same typeface

• Type specimen books can help select appropriate fonts and sizes for printed materials.
• It's important to consider the readability and legibility of text when designing for print or screen.
• Provides examples and comparisons of different typefaces and their impact on readability and legibility.

Fig2.14 Sample of specimen

Week 3 : Text part 2

Indicating paragraphs

1. Pilcrow ¶

Fig 3.1 Pilcrow

• If the chosen text point is 10, the leading would be 12, 12.5 or 13.
• The leading is 12, paragraph spacing value should be also 12, to maintain cross alignment.
• Cross Alignment: Have two columns of text sitting next to each other where the text line is aligned to the next column.
• The type font Helvetica got larger x-height

Fig3.2 Leading ( Line Space)

Leading vs Line space

• Leading is the space between two sentences.
• Line Space takes into consideration the baseline, so the baseline of one sentence to the ascender and the descender of the other sentence.
• Can learn more with Google Linotype

Fig3.3 Line Space vs Leading

2. Standard Indentation

• To create indentation typically the indent is the same size of line spacing or the same as the point size you use for your text
• Use to save space in newspaper
• When using indentation, never use left alignment, and should never have ragging on the right, right indentation is best used when the text is justified

3.Widows and Orphans

• Can't be used in traditional typesetting (the kind that still endures among conscientious commercial publishers) 
• These are two unpardonable gaffes

Fig3.4 Widows and Orphans

• Widow is the short line of the type left alone at the end of a column of text.
• The only solution of Widow is to rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short.
• Use alt and left or right arrow, not more than and not less than 3 times. And also need to set the kerning or tracking to 5.
• Orphan is a short line of type left alone at the start of the new column.
• The solution is careful to make sure that no column of text starts with the last line of the proceeding paragraph. 

4. Highlighting Text

• Using italics information.
• Increase the boldness or the weight of the text

Fig3.5 Italics and bold

• Change the typeface and make it bold

Sans-serif typefaces tend to look larger. Change the typeface from serif to sans-serif, need to reduce the point size by 0.5, to ensure cohesion.

• Private printing can change the colour, only black, cyan and magenta

Fig3.6 Change typeface or colour

• Placing a field of colour at the black of the text.
• Placing bullet points.

Fig3.7 Bullets points and field

5.Hierarchy of information

• Important for indicating the relative importance of different sections of text.
• A-heads indicate a clear break between topics and are set larger, in bold and small caps.
• B-heads are subordinate to A-heads and support the main argument, often shown in smaller size and bold.
• C-heads are even more subordinate and highlight specific facets of the material, often shown in small caps, italics, or bold.

Fig3.8 Heads A, B and C

6. Cross alignment 

• It is important for maintaining a strong reading rhythm and can be achieved by doubling the leading space between different text sections.
• Using different typographic elements, such as italics, bold or different type families, can help highlight important information and create a visual hierarchy.

Fig3.9 Cross Alignment

Week 4: Basic

Describing Letterforms 

• Lexicon is another word for terminologies.
• This lesson focuses on the basics of typography and describing letterforms.
• This covers terms such as baseline, median line, x-height, cap height, ascender height, descender height, and etc.

Fig4.1 Baseline, Median and X-height

• Baseline: The visual baseline of letterforms.
• Median: The imaginary line defining the x-height of letterforms.
• X-height: The height of the lowercase 'x' in any typeface.
• The lecturer emphasizes the importance of understanding these terms for the effective use and identification of typefaces.
• It discusses the different parts of a letterform, such as stroke, apex, vertex, arm, ascender, descender, etc.

Fig4.2 Stroke

Fig4.3 Bowl

Fig4.4 Ear

Fig4.5 Loop

Fig 4.6 Stress

• Cannot use the capital form of the swatches together and this is a big no-no. 

The Font

• A complete typeface includes more than just the 26 letters of the alphabet, numerals, and a few punctuation marks.

• To effectively work with type, it's essential to ensure that you're using a full font and understand how to utilize all the characters it offers.

• The lecture also mentions the use of small capitals, uppercase numerals, lowercase numerals, italics, and oblique in typography.

Fig 4.7 Uppercase

Fig4.8 Numerals

Fig4.9 Puntuation

• In history called majuscule, minuscule or they're probably other terms.

Describing Typefaces

Fig4.10 Comparing Typeface

Fig4.11 Phrase

• It highlights the nine type families that will be used in the course and the importance of choosing appropriate typefaces for specific design projects.

• The lecture emphasizes the importance of reading about typography and gaining knowledge in order to become a skilled typographer.

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1s4lkaSnA4SJPtEQEGWLPefyyfZM3Wud9/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1 : Exersice - Type Expression 

Choose 4 words from the selection of chop-chop, windy, dive, stab, roar, illusion, huge, shock. After that use the limited 10 fonts provided, and try to sketch 4 designs with 1 word.

Research

• Roar is loud animal or vehicle sound, shouting, and varied contexts.
• Windy is significant wind, weather descriptor, synonyms (blowy, breezy, gusty), related words (anemometer, squall, tornado)
• Dive is jumping into the water, moving quickly, sudden decrease in value or success, noun (jump into the water, low-quality establishment), idiomatic expressions.
• Chop is a verb (cutting, striking, chopper action), noun (forceful blow, small meat cut, chopping mark, chopped material), Middle English origin, synonymous.

Sketch

I am chosen for dive, windy, roar and chop. 

Fig 1.8 Sketch of windy and chop, week 1 (27.9.2023)

Fig 1.9 Sketch of roar and dive, week 1 (27.9.2023)

For my design idea : 

• Windy

1. The wind is blowing from the left side, causing the words to appear narrow and close together.
2.  The force of the wind makes the letter "n" appear smaller than the others, while the rest of the letters are curving to the side.
3.  Additionally, the stronger gusts are causing the taller letters to fall over. 
4. The wind is swirling like a cyclone, causing all the words to move in a circular motion around the centre of the cyclone.

• Chop

1. Use an axe to replace the letter "p."
2.  All the words have been chopped. 
3. Use a knife to replace the letter "h." 
4. The words have been combined to form a knife shape.

• Roar

1. The sound grows loud and boisterous. 
2. The letter R echoes like a soulful melody. 
3. The lion roars, its mouth forming the shape of an O. 
4. The O serves as a barrier, preventing other roars from escaping. The R attempts to break free and roar, but as the sound waves propagate, the noise fades away, dissipating into the air.

• Dive

1. When you dive into the water, bubbles form. 
2. As you inhale air into your lungs and then exhale, it comes out of your mouth and creates bubbles. 
3. The deeper you go, the greater the water pressure, which causes words to sound smaller. 
4. Before diving, it's important to jump into the water to create a splash.

Digitalization

My digitalization almost follows my sketch and Ms Low's feedback, and for some words, the fonts are changed to better express the meaning and effect of the chosen words. Based on feedback last week, I added some simple introductions at the bottom.

1.Windy

Fig2.15 Digitalization of Windy, week 2(3.10.2023)

For W1 I chose the font Univers LT Std 39 Thin Ultra Condensed, this font gave me a feeling that the slender font swayed in the wind, and I slightly used the free transform tool to show the strength of the wind.

For W2 I chose the font Bembo Std Italic, cause this font end is hooked can show that high objects are blown down in the wind and things are involved with each other.

2. Roar

Fig2.16 Digitalization of Roar, week 2(3.10.2023)

For R1 I originally designed it well, but considering the sound and energy transmission, I added a tilt. I chose the font Bodoni Std Roman, the shape of the font can show the richness of the sound. 

For R2 I chose the font Bembo Std Regular, The letter 'R' can prevent the sound from being released properly, resulting in a lock of the sound.

3. Dive

Fig2.17 Digitalization of Dive, week 2(3.10.2023)

For D1 I chose the font Adobe Calson Pro Regular, cause the i is suitable for bubbling in the water, not a circle.

For D2 I chose Univers LT Std 39 Thin Ultra Condensed, cause the slender font is not easy to float, but easy to sink and flatten under the action of water pressure.

For D3 I chose ITC Garamond Std Ultra Italic, cause this font gave me the feeling that it was easy to float on the water's surface.

4. Chop

Fig2.18 Digitalization of Chop, week 2(3.10.2023)

For C1 I chose the font ITC Garamond Std Ultra Condensed, cause it looks thick and calm, and feels easy to chop.

For C2 and C3 I chose the font ITC Garamond Std Light Condensed, cause the 'p' looks similar to the blade.

Fig3.10 Final design jpg, week 3 (10.10.2023)

Fig3.10.1 Final Digitization PDF, week 3 (10.10.23)

Animation

This section is intriguing. An animation will be created from a font type. To make the GIF smoother and more appealing, I incorporated motion.

Fig 3.11 Roar Flames, week 3 (10.10.23)

Fig 3.12 Roar GIF, week 3(10.10.23)

Fig3.13 Chop Flame, week 3 (10.10.23)

Fig 3.14 Chop GIF, week 3 (10.10.23)

Final Animation: 

Fig3.15Roar 60 flame GIF,week (10.10.23)

---

Task 1: Exercise 2: Type Formating

1. Kerning and Tracking Exercise

This exercise needs us to InDesign. The first one is about own name and uses 10 fonts provided, with kerning, leading, typeface, line length and etc.

Fig4.12 without kerning, week 4 (17.10.2023)

Fig4.13 With Kerning, week 4 (17.10.2023)

Fig4.14 Different with kerning and without kerning, week 4 (17.10.2023)

2. Text Layout Exercise

Fig4.15 Layouts, week 4 (17.10.2023)

The process for the last one and adjusting it became better.  Firstly, I changed to Janson Text LT Std, using font size 10 and leading 12.  After that, untick the hyphenate and let the font become continuous. Lastly, make kerning to let widows and orphans disappear then make cross alignment.

Fig4.16 Process, week 4 (17.10.2023)

Fig4.17 Final Layout, week 4 (17.10.2023)

HEAD
Font/s: ITC Garamond Std Book 
Type Size/s: 56pt(I), 39pt
Leading: 0pt(I), 28pt
Paragraph spacing: -

BODY
Font/s: Janson Text LT Std
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: 60
Alignment: Align left

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 20 mm bottom
Columns: 4
Gutter: 5 mm

After being selected by Ms. Low, the other layout appears to have more improved space. I made several changes such as replacing the repeated picture, adjusting the typefont, changing the font size and kerning. Additionally, I used different alignment techniques - I used the justify option with the last line aligned left above the picture part, and justified all lines below the picture part to make it look more rectangular and orderly. I also adjusted the kerning and tracking to avoid widows, orphans, and rivers.

Final submission of Task 2:

HEAD
Font/s: ITC Garamond Std Book
Type Size/s: 30 pt
Leading: 36 pt
Paragraph spacing: -

BODY
Font/s: ITC Garamond Std Book
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Characters per-line: 50
Alignment: Justify all lines and Justify with last line aligned left

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 20 mm bottom
Columns: 4
Gutter: 5 mm

Fig5.1 Final layout JPEG, Week 5 (24.10.23)

Fig5.2 Final layout without baseline PDF, Week 5 (24.10.23)

Fig5.3 Final layout with baseline JPEG, Week 5 (24.10.23)

  

Fig5.4 Final layout with baseline PDF, Week 5 (24.10.23)

---

FEEDBACK

 Week5：

General Feedback: Start Task 2, open one more new e-portfolio is Task 2. e-portfolio Task 1 submission date is in 1 November.

Specific Feedback:

Pictures and articles can look neater by keeping a line. Keeping a line between pictures and articles looks both neater and better.

When using two images it is better not to repeat them. And with justify, a rectangular pattern is formed underneath the article. 

 

Week 4:

General Feedback:

Upload all tasks as JPG files in the e-portfolio, and for the final task, simply embed the PDF.

Specific Feedback:

Everything is in order for the e-portfolio. We have the process outlined, a PDF document prepared, additional reading materials, and the lecturer's contribution is complete. Regarding the GIF, the chopping animation contains too many intricate components, and the intended message may not come across intuitively. In contrast, using a GIF of a "roar" would be a better choice. Additionally, for the "roar" GIF, there are significant movements; you can enhance the flame effect to achieve a smoother and more fluid motion performance.

 

Week 3：

General Feedback:

 For the e-portfolio all is good and on the right track.

Specific Feedback:

For typefont design windy W1 is better as it has a windy feel to it that creates a depression in the middle. R1 is better and C12 is both good to try and use. As for the Dive design, you can merge the concept of D123, there is a font suspended on the water, but 'i ' dives down and produces bubbles. 

Week 2:  

 General Feedback:

Use the provided 10 fonts to complete the exercise. Don't forget to label and write a simple description, and also write the date. Furthermore, don't distort the letterforms. Should make good use of feedback from the lecturer. Further reading is important for every week, even just reading for one page.

 Specific Feedback:

Mr Vinod: In the e-portfolio, The word does not need to be too big, it can be of normal size. There is no need for too much empty space, a horizontal rule is needed, and it would be better to put the title on the left-hand side. And don't forget to include a label, description, and date as well.

Ms Low Hsin Yin: I need to remember to label so that I can get the feedback easily next time. Try not to deform and distort the letterform, and also avoid using pictorials.

---

 

REFLECTIONS

Experiences

    After learning about typography, I've started to notice its presence in various aspects of my life, from billboards on the streets to designs I come across online. Over time, I've discovered common elements and a sense of aesthetics in typography. As Mr. Vinod wisely pointed out, the more you read, the more knowledge you acquire. This resonates with my experience as well because the more I delve into new knowledge, the more inspiration I find when it comes to design. 

    With each typography assignment, I've often felt the urge to incorporate graphic elements, but I've learned to restrain myself and focus on making font-based changes. While my work may not yet reach the awe-inspiring level seen online, I do feel a sense of progress. Additionally, having weekly assignments has instilled a work-first-then-play mentality in me, ensuring that I remain diligent and don't succumb to laziness. 

    In the world of design, there's no such thing as perfection, and it's essential to keep in mind that constructive feedback isn't synonymous with criticism. When selecting work to present to the teacher and receiving feedback, I often realize that my designs are far from flawless. However, it's through feedback that I gain clear direction for improvement. Interestingly, the assignments chosen by the teacher often seem ordinary in our eyes, highlighting the difference in perspective between designers and the general audience.

Observations

    I've observed that the stunning artworks online often go beyond simple adjustments to font size and arrangement. They use imagery, unique lines, and color as powerful tools. The choice of colors, though not overly complex, can be striking with just one color, and through adjustments in transparency, they achieve a subtle, ethereal effect. Even the selection of typefaces demonstrates a deep understanding. They skillfully leverage the characteristics of the fonts, and, being someone who pays attention to detail, I notice exceptional attention to detail that leaves me in awe. 

    Moreover, they play with font slant and utilize significant differences in font sizes to create a sense of contrast. Larger fonts are used to emphasize key content, while smaller fonts suit less important information.

Findings

I've found that the field of design is incredibly vast, and typography is one of its integral components. Initially, I was quite unfamiliar with typography, as it was something I had never encountered before. Throughout the process, the most challenging aspect has always been contemplating how to design while preserving the essence of the typeface, ensuring uniqueness, and maintaining aesthetic appeal. Gradually, I realized that getting familiar with typefaces, delving into their histories, and uncovering their characteristics make it easier to convey specific meanings using particular fonts.

---

FURTHER READING

This book is called computer typography basics is recommended by Mr Vinod. In this book introduce a lot of foundation and basic knowledge about typography.

 

• The main objective of typography is readability, which has been true since the days of handwritten books by ancient scribes.

•  While a visually attractive layout and distinct font options are important, the primary duty remains to convey information efficiently to the reader. 

• Jan White, a renowned publication designer, stresses the significance of order and structure in design. 

• Anyone who picks fonts or tweaks margins can be considered a designer.

•  Familiarizing oneself with font distinctions and mastering computer font options can assist in creating informative and easy-to-read reports.

Font Categories:

• Fonts come in various designs, with some variations being subtle while others are more noticeable. 

• The two primary classifications for fonts are serif and sans-serif. 

• However, these simplified categories do not adequately encompass the vast range of fonts available on modern computers. 

• This book aims to introduce more comprehensive categories to provide better distinctions between fonts.

• serif, sans-serif, mono-spaced, display, script, text and dingbats.

Serif

• Serif fonts are the most common choice for body text and can also work well for headlines.

• 'Serifs' are small extensions or arms that appear at the ends of letter strokes, giving letters a thick or thin appearance.

• Serif fonts are highly readable and categorized into three subtypes: style, Modern, and Square Serif.

1. Oldstyle

•  Fonts are inspired by classical Roman inscriptions, featuring open, wide, and round letters with pointed serifs and a pleasing contrast between thick and thin strokes.

2. Modern

• Despite their name, are based on designs from over 200 years ago.

• They exhibit greater mechanical precision than Oldstyle fonts, with more pronounced contrasts between heavy or light strokes and thin or squared serifs.

3. Square Serif

• Also known as Slab Serifs, are a contemporary style primarily used for short text like advertising copy, subheads, and headlines.

• These fonts have square serifs and mostly uniform strokes with minimal contrast.

Fig1.10 Example of Serif Fonts

 

Sans Serif

• As the name suggests, lacks 'Serifs' and typically feature an even stroke weight, resulting in minimal contrast between letter.

• These fonts can give a report a more modern appearance but may be less legible than Serif fonts.

• While they are typically used for short tests, subheads, and headlines, Sans Serif fonts can be used for longer body text if applied thoughtfully.

Fig1.11 Example of Sans Serif Fonts

Display

• Display and Decorative fonts are designed for attention-grabbing headlines and should seldom be. If ever, be used for body text.

 

Fig1.13 Example of Display fonts

Script

• Aim to mimic handwriting, with letters designed to connect.

• These fonts are often used for formal invitations and should only be typed in some capital letters.

Fig1.14 Examples of Script fonts

Text

• Inspired by hand-drawn letters used in religious books by early monks, have an 'Old-World' feel.

• They are typically used for certificates, diplomas, and invitations, and like Script fonts, should not be typed in all capital letters.

Fig2.19 Examples of text fonts

Mono-Spaced

• Typically resembling typewriter-style fonts, allocate the same amount of space for each letter, regardless of size.

• This is in contrast to proportionally spaced fonts where smaller characters take up less space than larger ones.

Fig2.20 Examples of Mono-spaced fonts

Dingbats

• Small artful symbols are used to enhance text or page design.

• While Zapf Dingbats and Wingdings are popular, there are numerous other designs available.

Fig2.21 Examples of Dingbats fonts

Fonts Styles and Famalies

• Many fonts on computers have bold and italics versions.
• Not all fonts were originally designed for bold and italics styles.
• A common mistake is attempting to make bold fonts even bolder or creating bold or italic versions for fonts lacking them.
• This often results in distorted characters.

Fonts Styles

• Various font styles can be confusing. Some display, script, and text fonts only have a 'plain' version, even if they appear bold or italic due to styling.
• Furthermore, certain fonts are available in different combinations: plain and italic, plain and bold, or plain, italic, and bold, but not bold italic.
• In order programs like Microsoft Word, the software doesn't automatically know if a font has a bold or italic version, allowing users to apply style formatting regardless of the font's actual capabilities.
• However, whether the font styling will actually be effective and print correctly is another matter. To ensure the correct variation, users should select font weights from the font menu rather than the style menu or the 'B' and 'I' buttons on the format ruler.
• Newer programs like InDesign, illustrator, and Photoshop only allow styles that are currently installed on the computer. If a bold version of a font is not currently installed, it won't be available as a font style option.

Fig3.15, style ruler

Fonts Families

•  Refer to fonts with the same design but different weights.
• Many fonts have only one weight, typically plain.
• Common body text fonts include plain, italic (usually for serif fonts), oblique (usually for sans-serif fonts), bold, and bold italic or bold oblique.
• Some fonts offer additional weights and corresponding italic or oblique versions.
• Fonts weight names are determined by font designers and vary, without strict rules.
• For the best results, use font weights from the font menu.
• When designing, it's advisable to stick to one or two fonts for consistency.

Fig3.16 Different of weights and styles in Helvetica family

Identifying and Selecting a Font

• To determine font size, consider factors affecting readability
• The x-height of lowercase letters and their relationship with uppercase and ascender letters are crucial.
• All characters align along a baseline.
• Letters below the baseline are descended, and letters above the x-height are ascenders.
• The x-height is the space between the top of the non-ascender part of lowercase letters and the baseline.
• The relationship between uppercase/ascender letters and the x-height is determined by the font's design.
• Fonts with a large x-height, featuring 'tall' lowercase characters, are more readable than fonts with small x-height characters.
• Another significant difference between fonts is the depth and shape of their descenders.
• An interesting fact: While many people understand that 'uppercase' and 'lowercase' refer to capital and small letters, these terms originate from typesetting. In the past, when typesetters manually set each letter, they stored them in cases, with capital letters in the top (upper) case and small letters in the bottom (lower) case to maintain organization.

Fig3.17 Fonts