The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.
-
Upload
ella-sanders -
Category
Documents
-
view
231 -
download
1
Transcript of The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.
![Page 1: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/1.jpg)
The Elements of Typography
![Page 2: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/2.jpg)
The Anatomy of Type
![Page 3: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/3.jpg)
The Anatomy of Type
• Baseline: The invisible line where letters sit
![Page 4: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/4.jpg)
The Anatomy of Type
• X-height: the height of the main body of a lower case letter
![Page 5: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/5.jpg)
The Anatomy of Type
• Cap height: the height from the baseline to the top of the upper case letters
![Page 6: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/6.jpg)
The Anatomy of Type
• Ascenders: an upward vertical stroke of lower case letters that extends above the x-height
• Descenders: the portion of lower case letters that extends below the base line
![Page 7: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/7.jpg)
The Anatomy of Type
• Ascender line: the invisible line marking the height of ascenders in the font
![Page 8: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/8.jpg)
The Anatomy of Type
• Descender Line: the invisible line marking the lowest point of the descenders within a font
![Page 9: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/9.jpg)
The Anatomy of Type
• Crossbar: A horizontal stroke in letters such as A or H
![Page 10: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/10.jpg)
The Anatomy of Type
• Tittle: a small round mark used with a lower case i or j
![Page 11: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/11.jpg)
The Anatomy of Type
• Stem: the vertical, full-length stroke in upright characters
• Stroke: a straight or curved diagonal line
![Page 12: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/12.jpg)
The Anatomy of Type
• Counter: the enclosed or partially enclosed circular or curved negative space of some letters such as d, o, and s
• Eye: specific to the letter e
![Page 13: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/13.jpg)
The Anatomy of Type
• Serif: a slight projection finishing off a stroke of a letter such as T compared with T
• Sans Serif: a style of type without serifs
![Page 14: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/14.jpg)
Testing 1, 2, 3
Is this font considered a serif or sans-serif font?
How about this one?
And this one?
…And this one?
![Page 15: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/15.jpg)
The Optics of Type
• The spacing of letters in words, sentences, and paragraphs is vital to create a uniform reading experience with minimal distractions
• Remember, type must always be LEGIBLE!
![Page 16: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/16.jpg)
S pa c i n g
• Each typeface has a distinct rhythm of strokes and spacing
• You don’t want your spacing to be too condensed, otherwise it is extremely difficult to read!
• This typeface is too loose, and can also become a distracti on to readers.
• This spacing is just right. It is logical and easy to read
![Page 17: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/17.jpg)
Types of typefaces
• All licensed, commercial typefaces are available in a number of styles and weights: usually roman (aka plain or book), italic (sometimes called oblique), bold, and bold italic
• This is known as a type family • Remember that these fonts are different from
using the bold and italic controls on word processing programs
![Page 18: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/18.jpg)
Why Type Matters
• Typography sets the mood of a piece• Flowing, curved type gives off a softer feeling
than angular, hard edged type• Elegant type gives off a sense of sophistication
![Page 19: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/19.jpg)
Why Type Matters
• Which typeface is the most appropriate for each word below?
![Page 20: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/20.jpg)
Things to Consider when Choosing Type
• Which font will best communicate the message of your design? Does your font harmonize with the other pieces of the design, or does it detract from them?
• Would using two or more different fonts be more effective in conveying your message than one? (i.e. sans-serif and serif)
• How large should your font be to best convey the idea of your design?
![Page 21: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/21.jpg)
Things to Consider when Choosing Type
• Is the type placed properly in the design so as to have the most impact on the viewer? Are the shapes of the letters pleasing or unattractive?
• Should your font be one that will hold up over time (classic) or should it be more current and trendy?
![Page 22: The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649d9e5503460f94a88924/html5/thumbnails/22.jpg)