Concepts and Terms. production assignment 01 review V. Different Typefaces Same Name. I. Vector vs Raster Graphics

Transcription

1 production assignment 01 review 01.0 Concepts and Terms I. Vector vs Raster Graphics A. Vector graphics (aka object graphics) are resolution independent. Illustrator is vector- or object-based drawing software. B. Raster graphics (aka pixel graphics) are resolution dependent. Photoshop is raster-or pixel-based. II. Resolution for Print and Screen A. Print Resolution 300 ppi B. Screen Resolution 72 ppi III. Anti-Aliasing IV. Digital Type Formats for Print A. PostScript B. TrueType C. OpenType D. dfont V. Different Typefaces Same Name A. Not all Garamonds are the same VI. Digital Type Formats for Web A. WOFF B. EOT VII. Type Hinting + Outlining Type + Rule Lines A. Hinting B. Outlining C. Rules VIII. Units of Measurement A. Points B. Pica C. Em

2 production assignment 01 review No. I Vector vs Raster Graphics A. Vector Graphics 1. Vector software is also called drawing software. Illustrator is drawing software. Type, image and shape created in Illustrator are vector-based. 2. Vector or object graphics are resolution independent. Resolution independence means a vector or object drawing can be scaled up or down without losing image quality. 3. Vector graphics are made with mathematically defined lines. Vectors are mathematically defined lines or paths. These vectors may be curved or straight. Curved paths are controlled with Bézier curves. Digital type is vector-based. Bézier curves enable a user to control the shape of the type. Pierre Bézier ( ) French engineer for whom Bézier curves and paths are named. Bézier developed this method of drawing while working for the French car manufacturer Renault in the late 1960s. The computer drawing technique is based on mathematical equations. original enlarged Vector shapes and images are also created with Bézier curves and can be scaled up or down without loss of quality.

3 production assignment 01 review No. I Vector vs Raster Graphics B. Raster or pixel graphics 1. Pixel software is also called painting software. Photoshop is painting software. Images created or saved in Photoshop are raster or pixel-based. 2. Pixel or raster graphics are resolution dependent. Resolution dependence means a pixel or raster image cannot be scaled up without losing image quality. Because of resolution dependence, a photographic image or file from Photoshop will become pixelated if scaled up or enlarged. 3. Rasterization The process of converting outlines to a pattern of dots is called rasterization. Type and shapes from Illustrator can be placed in Photoshop. These vector graphics can remain as vectors while working in Photoshop. This makes uncompromised scale change possible, but vectors should be rasterized before final production. By rasterizing the vector graphics they are converted from Bézier curves to pixels and can no longer be correctly scaled up. Photographic images are always pixel-based. They may be traced in Illustrator, but at that point they are no longer considered Photographic. They have become vector graphics. detail of an image that has been enlarged resulting in a blocky appearance. original 300 dpi image enlarged image showing pixelation or blocky pixels.

4 production assignment 01 review No. II Resolution for Print and Screen A. Print Resolution 1. Print resolution is 300 ppi Resolution dependent images targeted for offset lithography or a professional printing press must be 300 dpi (dots per inch). Most images from the Web cannot be increased to 300 dpi without loss of image quality. Once printed, an low-res image that has been increased in size will appear pixelated or blocky. To the trained eye this is a sign of unprofessional production. B. Screen Resolution 1. Screen resolution is 72 ppi Resolution dependent images targeted for the Web or screen presentations should not be more than 72 ppi (pixels per inch). A 300 dpi pixel-based image can down sampled to 72 dpi for use on the Web. Print design by Andrea Castelletti. Images for print must be 300 ppi. Images for Web sites only need to be 72 dpi. A 300 ppi image can be scaled down for the Web.

5 production assignment 01 review No. III Anti-Aliasing A. Anti-Aliasing 1. Anti aliasing optically smooths jagged lines in raster and vector lines by shading pixels near the edges of lines. This softens or blurs lines and makes them appear less rough. You can manually control anti-aliasing in InDesign for image display by selecting High Quality Display. This slows InDesign performance. Do this only to check work. The default setting is Typical Display. Not anti-aliased. Notice the jaggy lines along the outline of the legs. Anti-aliased. The leg outlines are much smoother with anti-aliasing turned on. Not anti-aliased Anti-aliased

6 production assignment 01 review No. IV Digital Type Formats for Print A. PostScript Type 1 Developed by Adobe ca Up to 256 characters: this format is limited and does not allow for a large set of characters. Requires Two files: Printer & Screen fonts are necessary for typeface to work. Mac OS and Windows: use different file types; in other words, a PostScript Type file for the Mac will not work on a Windows machine and vice versa. What is PostScript? PostScript is a page description language (PDL) or a computer language that translates the fonts, vector shapes and images you make and see on your computer screen to printed dots on paper that comes from a printer. B. TrueType Developed by Apple and Microsoft ca Up to 256 characters (not documented) One file : Only one file is required for the typeface to work. Mac OS and Windows: use different file types C. OpenType Developed by Adobe and Microsoft ca Up to 65,000 characters: The increased number of characters makes OpenType very desirable and much more powerful than PostScript or TrueType. One file: Only one file is required for the type to work. Mac OS and Windows: use same file; this greatly simplifies the use of OpenType

7 production assignment 01 review No. IV Digital Type Formats for Print A. PostScript Type 1 Developed by Adobe ca Up to 256 characters Two files: Printer & Screen fonts Mac OS and Windows: use different file types The PostScript outline or printer font (file) for a PostScript version of Akzidenz Grotesk Roman The two file types of a PostScript Type 1 font One the left is the object-based printer font. This is required to print the font and is sometimes called the printer font. Notice the outlines and Bézier curves? On the right is the pixel-based screen font. This is required to view the font on screen and is sometimes called the screen font or font suitcase. The PostScript suitcase or screen font (file) for a PostScript version of Akzidenz Grotesk

8 production assignment 01 review No. IV Digital Type Formats for Print B. TrueType: file extension.ttf Developed by Apple and Microsoft ca Up to 256 characters (not documented) One file Mac OS and Windows: use different file types C. OpenType: file extension.otf Developed by Adobe and Microsoft ca Up to 65,000 characters One file Mac OS and Windows: use same file

9 production assignment 01 review No. IV Digital Type Formats for Print A quick check of Suitcase shows the type format of a any given typeface. PostScript TrueType OpenType

10 production assignment 01 review No. IV Digital Type Formats for Print D.dfont.dfonts are used by the Mac OS.dfonts are locked. You cannot turn.dfonts off dfonts are often TrueType fonts, though not exclusively so. Do not use.dfonts for design Why? Because they are usually not very interesting fonts. They ship with every Mac computer and their primary function is to provide fonts for the Mac interface. Since they are common and intended to be used for the Mac, they appear generic. As a designer you want to select the most appropriate typeface for any given project, not a default solution.

11 production assignment 01 review No. IV Digital Type Formats for Print Appropriate Type Usage An old saying goes like this: Don t use a typeface named for a city or state. This isn t always true, but don t use Geneva, Monaco or Georgia. Georgia is the serif companion to Verdana. Released in 1996, both were designed by Matthew Carter and intended for screen use. The orginal versions are good for the Web, but not good for print. IKEA does Verdana! In 2009 IKEA created an uproar among designers when the company changed its print catalog and website typeface from a custom version of Futura known as IKEA sans to Verdana. Futura was designed by Paul Renner between 1924 and Read more know-your-type-futura/ Verdana and Georgia received facelifts in These new versions are more suitable for print. Read more verdana-and-georgia-grow-up/

12 production assignment 01 review No. V Different Typefaces Same Name Different Typefaces Same Name A typeface design may be drawn or made by different typeface foundries, which results in variations of that one typeface. For example, there are several versions of Garamond. Here is one by Adobe and another by Monotype. You can see by comparing certain earmarks that these two Garamonds are not the same. Compare the tails of the Q and R. Notice the brackets of the serifs are thinner in the Monotype version. What s the point? Don t substitute one version of Garamond for another in a design project. The variation in letterforms will cause your type to reflow. FYI: Garamond is not the only typeface with these variations. Many older faces have been remade by various foundries. Adobe Garamond Pro What is a Foundry? The word foundry comes from the days of metal type when letterforms for printing presses were made with lead, hammers and heat. Today, digital foundries make type. Here are few. Darden Studio Emigre Hoefler & Frere-Jones OurType Process Type Foundry Typonine Underware Monotype Garamond

13 production assignment 01 review No. VI Digital Type Formats for Web A. WOFF 1. WOFF WOFF stands for Web Open Font Format. WOFF fonts are exclusively for the Web and cannot be used as a print typeface or accessed from Illustrator or InDesign. Compatability: Firefox 3.6+, Chrome 5+, Internet Explorer 9+, Safari 5.1+, Opera 10+. B. EOT 1. EOT EOT stands for Embedded OpenType. EOT fonts are exclusively for the Web and cannot be used as a print typeface or accessed from Illustrator or InDesign. Compatability: Internet Explorer 8+

14 production assignment 01 review No. VII Type Hinting + Outlining Type + Rule Lines A. Hinting Hints are parameters and/or instructions that are put in fonts for the purpose of helping the rasterizer the program that converts the vector outlines into groups of pixels or dots make better decisions about how to fit a scalable outline onto a fixed grid. Original outline of Fedra Sans Screen Hinted version of Fedra Sans Screen, modifying the original outline to fit the grid of the computer screen. Outlines of Fedra Sans Screen at various sizes. Notice how different the outlines are in order to achieve the optimal legibility of screen. Peter Bil ak -

15 production assignment 01 review No. VII Type Hinting + Outlining Type + Rule Lines B. Outlining Type 1. When you outline text, for example by using the Convert to Outlines command in Illustrator, the type becomes thicker. This is subtle and may not be apparent at large sizes, but close inspection of small type does reveal a slight thickening of the letterforms. Why? Because the text is no longer type and so it loses its hinting. 2. Is outlining ever okay? You may outline type for a special effect, like making a mask. Sometimes logos are outlined. This simplifies file transfer for clients and ensures the logo will always be the same. While there may be good reasons to outline type, be sure you are not doing it out of laziness or because you don t want to make the time to include the typeface file with your print file.

16 production assignment 01 review No. VII Type Hinting + Outlining Type + Rule Lines C. Rule Lines 1. Hairlines Most software no longer offers the option a Hairline width for rule lines. But if you see it, don t use it. A hairline width is one-pixel width of the output device that prints the line. A hairline that is visible on a laser printer may be invisible on a high resolution output device pt The best fine-line rule to use is.25 points. The width may vary depending on the output device, but it will always be visible. top to bottom:.25,.5,.75, and 1 point rule lines.

17 production assignment 01 review No. VIII Units of Measurement A. Point A point is a unit of measurement for specifying type size and leading value. There are 72 points in an inch. A point is 1/72 of an inch. There are 12 points in a pica. 14 points may be written as: 1p2 (12 points = 1 pica or 1p) B. Pica A pica is a unit of measurement used in typesetting. There are 6 picas in an inch. A pica is 1/6 of an inch. C. Em An em is a relative unit of measurement. It is equal to the type size of any given typeface. The em for 24 point type will be 24 points. This example is not drawn to scale. 1 inch 1 pica = 1/6 of an inch 1 point = 1/72 of an inch This example is drawn to scale.

18 production assignment 01 review No. IX Bonus Terminology Typeface or Font The terms typeface and font are used interchangeably by many people. However, they are not the same things. Typeface A typeface is the appearance or design of a set of characters. This is what makes Helvetica not Garamond. These typefaces are distinct designs. Font A font is the physical embodiment of the typeface, whether it be the metal pieces of type or a digital file. (Mark Simonson) Song or MP3 The difference between a typeface and a font is like the difference between a song and an MP3. When you get new music, you don t say I got a new MP3. You say I got a new song. The MP3 is the file format of the song, not the creative work. (Nick Sherman & Stephen Cole)