type
DESCRIPTION
ENGL 396 - White Space is Not Your Enemy, Charpter 7: TypeTRANSCRIPT
![Page 1: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/1.jpg)
Type February 6, 2014
Image source: http://cravagolina.files.wordpress.com/2011/03/death_by_typography_by_gcore1.jpg
![Page 2: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/2.jpg)
Type Sets the Tone
•Font
•Typeface or Font Family
•Glyph
Image source: http://fineartamerica.com/images-medium/neon-sign-series-featuring-the-alphabet-in-red-michael-ledray.jpg
![Page 3: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/3.jpg)
Parts of a Font
Image source: http://365.idtech.com/tutorials/typography_illustrator/ http://www.fontshop.com/glossary/
![Page 4: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/4.jpg)
Image source: http://martinsilvertant.deviantart.com/art/Typography-Series-01-Anatomy-of-typography-329617642
![Page 5: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/5.jpg)
Image source: http://www.idtech.com/blog/looking-at-typography/
Font Categories
• Sans Serif
• Serif
• Script
• Decorative
• Modern
![Page 6: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/6.jpg)
Image source: http://enfuzed.com/the-psychology-of-fonts-infographic/
Font Categories
![Page 7: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/7.jpg)
![Page 8: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/8.jpg)
Glyphs Most fonts have a set of 265 glyphs
Image source: http://www.fontspring.com/poster_imgs/73/14ed/2ed4a2990a857022fba66a3273/fp-720.png
![Page 9: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/9.jpg)
Applying Additional Font Styling
• Font size
• Bold and Italic
• All CAPS
• Spacing
Image source: http://www.indezine.com/products/powerpoint/learn/textandfonts/format-font-styles-ppt2010.html
![Page 10: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/10.jpg)
The Right Font for the Job
![Page 11: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/11.jpg)
Choosing & Using Fonts
• Choose one font for your copy body • No. 1 consideration? READABILITY!
• Choose a second font for your headlines • Can be wild and derative, script and elegant or sans serif and ultra hip
![Page 12: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/12.jpg)
Font Size
Image source: http://www.imaging.org/IST/pdfs/appendixa.pdf
![Page 13: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/13.jpg)
Name a FONT FAMILY
Image source: http://bottom-of-the-glass.blogspot.ca/2012/02/birds-2-lethal-tweet.html http://designtaxi.com/news/361384/A-Meticulous-Illustration-Of-The-Brooklyn-Bridge-Done-Entirely-In-Type/
![Page 14: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/14.jpg)
Choosing Fonts for the Web
• The number of Web font is limited
• Choose fonts that render well onscreen
Image source: http://www.zeald.com/site/zeald2/images/Articles/fonts/web_fonts.jpg
![Page 15: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/15.jpg)
Spacing - Leading
• Space
between
lines
Image source: http://www.fonts.com/content/learning/fontology/level-2/display-typography/line-spacing
![Page 16: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/16.jpg)
Spacing – Kerning vs Tracking
• Negative space between two characters
• Adjusting the space across a string of characters such as a sentence or a paragraph.
Image source: http://www.fonts.com/content/learning/fontology/level-2/text-typography/kerning-text-type http://www.fonts.com/content/learning/fontology/level-2/display-typography/spacing-display-type http://graphicdesign.stackexchange.com/questions/2606/difference-between-kerning-vs-letter-spacing
![Page 17: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/17.jpg)
Typesetting Lengthy Copy
• Paragraph indicator
• Heading & Subheading
• Display fonts
• Bulleted lists
• Hanging indents
Image source: http://www.attitudedesign.co.uk/2006/a-guide-to-practical-typography
![Page 18: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/18.jpg)
Taking a Page from Newspaper Design
• Story headlines
• Columns
• Justification
Image source: http://www.ndsu.edu/pubweb/~rcollins/313editing/hobbiesnewsletterdirections.htm
![Page 19: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/19.jpg)
What is a GLYPH?
![Page 20: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/20.jpg)
Type: Not Just for Reading Anymore
•Bold & Italic
• SMALL CAPS • Reversed Type
Image source: http://cravagolina.files.wordpress.com/2011/03/hendrix-typography.jpg
![Page 21: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/21.jpg)
Typesetter’s Punctuation • Apostrophes
• Brackets of various kinds [ ], ( ), { }, ⟨ ⟩
• Colons and semicolons
• Commas
• Dashes and hyphens ‒, –, —, ―
• Ellipsis
• Exclamation and question marks
• Quotation
• Marks
• Slashes
• Special characters ©®¼½¾
Image source: http://www.newrepublic.com/article/113101/smart-quotes-are-killing-apostrophe
![Page 22: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/22.jpg)
OpenType for Print Design
• Ligature
• Swash alternates
• Old style figures
• Dingbats
Image source: http://desktoppub.about.com/od/microsoft/ig/Microsoft-Publisher-2010/Publisher-2010-Ligatures.htm http://designshack.net/articles/typography/add-flair-to-projects-with-alternate-lettering/ http://blog.rockymountaintraining.com/adobe-indesign-assigning-old-style-figures-through-grep-styles/
![Page 23: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/23.jpg)
What you Need to Know about Logo Design
Image source: https://self-issued.info/?cat=20
• Logos should be unique to the subject/product/organization
• Logos must be scalable
• Simplicity is a virtue
• Limit the number of colors
• Make sure the logo is reproductible in black only
• Logo can be reversed
• Logos should not be too vertical or too horizontal
![Page 24: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/24.jpg)
If you Must Design a Logo
•Consider a type-only logo
•Avoid using the font-du-jour
•No clip art
•Add a simple shape
• Test it out
• Turn fonts to graphics
Image source: http://www.logodesignmadeeasy.com/world_best_logos http://breezycreativedesign.com/2010/01/21/5-different-types-of-logos/
![Page 25: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/25.jpg)
Did I use a SERIF or a SANS SERIF font for this presentation?
![Page 26: Type](https://reader033.vdocument.in/reader033/viewer/2022051014/54c7334e4a7959d67c8b4612/html5/thumbnails/26.jpg)