Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1...
-
Upload
philip-ray -
Category
Documents
-
view
216 -
download
1
Transcript of Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1...
![Page 1: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/1.jpg)
Type
COM 366
Web Production & Design
![Page 2: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/2.jpg)
Measurement
• 12 points = 1 pica
• 6 picas = 1 inch
• 72 points = 1 inch
![Page 3: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/3.jpg)
Type size
• Point is smallest unit of measurement– thickness of rules – space between lines – height of type
• If type is 36 point, about 1/2 inch high– 72 points, about 1 inch high
![Page 4: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/4.jpg)
• Strokes– Lines that are drawn to form letters
• Serifs– Lines some designers used to finish off strokes– Flat, rounded and bracketed serifs
![Page 5: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/5.jpg)
A Serif
Serif (Goudy)
Think and thin strokes
![Page 6: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/6.jpg)
San Serif (Helvetica)
AhNo serifs
Monotonal strokes
![Page 7: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/7.jpg)
Type categories
• Basic categories– Roman– Sans Serif– Egyptians (square serifs)– Cursives (scriptives)– Novelty– Black letter (Old English)
• Families– Goudy family, Bodoni family
• Named after the designer
![Page 8: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/8.jpg)
Type families
![Page 9: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/9.jpg)
Fake!
Fake!
Fake!
![Page 10: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/10.jpg)
• Font– All characters available in one style and size
• 48 Goudy Italic
– Usually about 125 characters in a font– Includes all lowercase letters, uppercase letters,
numbers and special symbols
![Page 11: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/11.jpg)
Roman• Have serifs• Strokes have contrast (thick
and thin)• Old style > less contrast in
strokes• Modern > a lot of contrast in
strokes– Thinner serifs
• Convey tradition, distinction
BaskervilleGaramondPalatinoTimes
![Page 12: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/12.jpg)
Sans Serif
• Have no serifs• Have a more modern look
Gill SansOptimaHelveticaNews Gothic
![Page 13: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/13.jpg)
Slab serif
• Also known as Egyptian or block serifs
• Evenness of weight, stroke• Square serifs• Not meant to be used for text
– Headlines, ads, posters
• Also called Egyptian because convey image of that part of world
CourierRockwell
![Page 14: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/14.jpg)
Cursive
• Resemble handwriting• Not italic• Not very readable, used for
invitations• or as in the case of Mistral,
to convey sense of casualness
MistralBrushGiddyup
![Page 15: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/15.jpg)
Decorative
• Include types designed for special effect
• Very specific in the meaning they convey
• Also called decorative
CrackedMarker FeltStencil
![Page 16: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/16.jpg)
Expressing meaning with type
dis uptionrFragile Psyche
![Page 17: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/17.jpg)
Black letter
• or Old English
• Sort of Gothic, medieval looking
• Used sparingly
• Newspapers use for nameplates
![Page 18: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/18.jpg)
Anti-aliasing
ANTIALIASING is a technique for making the edges of letters look smooth on screen by rendering some pixels in shades of gray. Antialiasing is generally helpful for presenting text on screen at large sizes (12 pixels and higher), but it can make small text difficult to read.
![Page 19: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/19.jpg)
When preparing images for the Web in Photoshop, you can select among several anti-aliasing settings, from “none” (which generates bitmapped letters), to “smooth” (which works best at large sizes).
![Page 20: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/20.jpg)
Kerning
• Allows designer to adjust spacing between letters and words
• Computer programs automatically set kerning– Controlled by a table of kerning pairs, which
specify spaces between different letter combinations.
![Page 21: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/21.jpg)
Page
Pa
Computer set
Kerned
![Page 22: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/22.jpg)
If letters in a typeface are spaced too uniformly, they make a pattern that doesn’t look uniform enough. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T, L). Because the space between characters expands as the type size increases, designers often fine-tune letterspacing when working with large letters. As the word “rub” gets bigger, the gap between u and b grows more obvious.
![Page 23: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/23.jpg)
Tracking
Adjusting the spacing across a word, line, or column of text is called tracking, also known as letterspacing. It is common practice to letterspace capitals and small capitals, which appear more regal when standing apart. By slightly expanding the tracking across a body of text, the designer can create a more airy field.
Type crime: negative tracking Make the shoe fit, not the foot. Don’t use negative tracking to save space.
![Page 24: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/24.jpg)
Leading (or line spacing)
• Distance between each line of text– Term comes from inserting lead bars between lines of
text
– From baseline to baseline
• Measured in points• Use this equation to specify type
– Point size of type over leading
– 12 / 14• 12 point type, 14 points of leading
![Page 25: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/25.jpg)
![Page 26: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/26.jpg)
Alignment
Newspaper circulation fell 2.6 percent in the six-month period ending in March, according to data released Monday, as more people turned to the Internet and other media outlets for news and information.
The decline in average paid weekday circulation was about the same as the previous six-month reporting cycle for the period ending last September, according to the Newspaper Association of America, a trade group.
Average paid circulation at Sunday newspapers fell 3.1 percent versus the same period a year ago, also a comparable decline with the last time circulation tallies were reported, the NAA said. The figures were based on NAA's analysis of circulation figures
Flush left/ ragged right
Type crime: Bad RagAn ugly wedge-shape spoils the ragged edge.
A bad rag will fall into weird shapes along the rightedge, insteadof looking random
![Page 27: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/27.jpg)
Vertical type
![Page 28: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/28.jpg)
STACKED LETTERS
Roman letters are designed to sit side by side, not on top ofone another. Uppercase letters form more stable stacks than lowercase letters. Centering the column helps to even out the differences in width. (The letter I is a perennial problem.) Stacks of lowercase letters are especially awkward because the ascenders and descenders make the vertical spacing appear uneven, and the varied width of the characters makes the stacks look precarious.
It is more common in the U.S., to run text on the spines of books from top to bottom.
In other words, avoid stacked type at all costs!
![Page 29: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/29.jpg)
CREATING EMPHASIS WITHIN RUNNING TEXT
Emphasizing a word or phrase within a body of text usually only requires only one “signal.” Italic is the standard form of emphasis. There are many alternatives, however, including boldface, SMALL CAPS, or a change in color. You can also create emphasis with a different font, just adjust the sizes so the x-heights align.
18 point16 point
Type crime:
Too many signals. Emphasis can be created with just one signal.
BOLD, ITALIC, UNDERLINED CAPS!
![Page 30: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/30.jpg)
![Page 31: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/31.jpg)
![Page 32: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/32.jpg)
![Page 33: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/33.jpg)
![Page 34: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/34.jpg)
![Page 35: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/35.jpg)
![Page 36: Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch.](https://reader036.fdocuments.net/reader036/viewer/2022081519/56649e5d5503460f94b56a0a/html5/thumbnails/36.jpg)