fonts!
DESCRIPTION
TRANSCRIPT
![Page 2: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/2.jpg)
Anatomy of Type
![Page 3: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/3.jpg)
![Page 4: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/4.jpg)
![Page 5: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/5.jpg)
![Page 6: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/6.jpg)
![Page 7: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/7.jpg)
![Page 8: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/8.jpg)
Categories of Type
![Page 9: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/9.jpg)
![Page 10: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/10.jpg)
![Page 11: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/11.jpg)
Oldstyle
• has serifs• serifs slanted on lower
case letters• serifs curved where they
connect to letter• thick/thin- gentle• stress- diagonal• easy to read
Examples:
![Page 12: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/12.jpg)
![Page 13: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/13.jpg)
Modern
• has serifs• serifs are thin & flat• thick/thin- radical• stress- vertical
Examples:
![Page 14: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/14.jpg)
![Page 15: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/15.jpg)
Slab Serif
• has serifs• serifs are thick, slab-like• thick/thin- none, all thick• stress- none or vertical
Examples:
![Page 16: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/16.jpg)
![Page 17: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/17.jpg)
Sans Serif
• no serifs• thick/thin- none, or minor• x-height- usually large
Examples:
![Page 18: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/18.jpg)
![Page 19: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/19.jpg)
Script
• emulates hand lettering Examples:
![Page 20: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/20.jpg)
![Page 21: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/21.jpg)
Monospaced
• all letters are the same width
Examples:
![Page 22: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/22.jpg)
![Page 23: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/23.jpg)
Distressed
• blotchy• distorted• fun, but use sparingly!
Examples:
![Page 24: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/24.jpg)
![Page 25: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/25.jpg)
Decorative
• very distinct, eye-catching & flavorful
• fun, but use sparingly!
Examples:
![Page 26: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/26.jpg)
Text Density: Tracking & Leading
Tracking is the general spacing between letters - a.k.a. letter spacing.
Leading is the space between lines - a.k.a. linespacing.
![Page 27: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/27.jpg)
Choosing the Right Font
![Page 28: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/28.jpg)
Reinforce Your Message
Is your message playful or serious?
![Page 29: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/29.jpg)
Evoke the Desired Response
.
![Page 30: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/30.jpg)
Readability and Legibility
A font is readable if you can easily read long blocks of text that are set in it.
A font is legible if you can instantly recognize a brief snippet of text written in it.
![Page 31: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/31.jpg)
Other Features that impair readability/legibility
• very noticible flourishes/decoration• drastic thick/thin contrast• very bold or very light• very narrow (condensed) or very wide (expanded)• very slanted• very large or very small x-height• very wide or very narrow column widths• poor word spacing• poor line spacing• poor letter spacing (inc. monospaced)• poor use of justification or centering• low contrast with background color• WRITING IN ALL CAPS
![Page 32: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/32.jpg)
The Key to Readability
Moderation of features.
The more time you spend noticing a font, the less you're reading it.
The most readable fonts are "invisible."
Most readable font type: Oldstyle
![Page 33: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/33.jpg)
The Key to Legibility
Instant recognition of letterform.
Most legible font type: Sans Serif
![Page 34: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/34.jpg)
The font is on YOUR computer
Unless it's a browser safe font, don't count on your printer or viewer having the font on their computer!
Solutions:• save/export as a non-vector format:
o PDFo GIFo PNG
• convert text to paths before saving as a vector format• use cufon on web pages (requires javascript)
![Page 35: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/35.jpg)
Font File Types
True Type Fonts (.ttf):
• files are platform specific- you need a Mac or PC version.
• can only hold 265 gylphs per file, so true type collections can provide extra options.
• most common free font type
Open Type Fonts (.otf):
• cross-platform compatible• can hold 65K+ glyphs per
file• more common as a paid
font
![Page 36: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/36.jpg)
Free vs. Paid
Free Fonts:
• Great for one-off jobs• May have very limited
character sets- missing punctuation, upper case, lower case, etc.
"Pro" Fonts:
• Contain more options, expanded character sets, decorations, and multi-language support.
• Always check the description before buying- not all paid/otf fonts have extra perks.
• Good for long term identity projects
![Page 37: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/37.jpg)
Fonts as Design Elements
Typography PostersTypography Layouts
Keep in mind:• diagonals add visual interest• vastly different font sizes can be fun• opacity & clipping masks can give cool effects• a good background texture can make a big difference
![Page 38: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/38.jpg)
Tips for Print Material
• Avoid delicate serifs and fine lines for light on dark printing or lower quality print jobs
• Don't let the pretty font distract you from spell checking!• Ask your printer how they like material prepared, and what
file formats they perfer. • Always, always get a proof or look at a test copy before
committing to a large run
![Page 39: Fonts!](https://reader036.vdocuments.mx/reader036/viewer/2022070304/54c75e454a7959fa518b46a4/html5/thumbnails/39.jpg)
Resources
Free Fonts:http://www.fontfreak.com/http://www.1001freefonts.com/http://www.urbanfonts.com/http://www.fontriver.com/http://www.free-fonts.com/
The Non-Designers Type Book, by Robin Williams
Browser safe fonts
Embedding fonts w/ cufon
Professional Fonts:http://www.linotype.com/http://www.veer.com/http://www.fontshop.comhttp://www.adobe.com/type/http://www.fonts.com
Create your own fonts