The computer screen and text. Curved letters must be formed out of square picture elements, or pixels, each with a red, green and blue primary pixel.

Transcription

1 The computer screen and text Curved letters must be formed out of square picture elements, or pixels, each with a red, green and blue primary pixel.

2 The computer screen and text OpenType and TrueType fonts use the vector files to describe letter shapes. The fonts, using vectors and data points, stay smooth no matter the size.

3 The computer screen and text Before text can be displayed or printed, the smooth letters must be turned into a bitmapped image made up of pixels. The process is called rasterizing. Vector file Bitmapped letter

4 The computer screen and text A laser printer typically has a resolution of 300 or 600 dots (of toner) per inch (dpi). Laser printer 12-point type at 60x (left) and 200x.

5 The computer screen and text A computer screen has lower resolution than a printer, 72 or 96 pixels per inch. Some fonts may not look good at small sizes where few pixels are available. Computer screen, 12-point type at 60x (left) and 200x.

6 The computer screen and text When text is rasterized, it can take on a jagged look, even at small sizes. The screen compensates for this with a process called antialiasing. Rasterized type, no antialiasing Rasterized type with antialiasing Gray pixels blur the edge, removing jaggies.

7 The computer screen and text Some fonts contain data that is used in a related method called type hinting. The data adjusts primary pixels to more clearly render a font. Verdana carries such data. Antialiased type, 8-point Verdana at 60x and 200x.

8 ANATOMY OF TYPE 1 a b 9 10 c d CAP LINE MEAN LINE BASE LINE DESCENDER LINE a. actual height b. ascender height c. descender height d. x height 1. apex 2. bowl 3. link 4. counter 5. stem 6. ear 7. terminal 8. serifs 19. arm 10. leg Typefaces get personality from the characteristics designed into them. Type is classified based on anatomy. Sketch and notes of a design by Frederic Goudy.

9 KEY IDENTIFIERS Serifs typefaces Georgia Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Times New Roman Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Times Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Sans-serif typefaces Verdana Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat. Arial Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Helvetica Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

10 Measuring and specifying type The traditional way of measuring type is in points and picas. A pica is 1 6 of an inch, with 12 points to a pica, 72 points to an inch. Picas kpx a b c ascender line meanline baseline descender line The actual type size is slightly smaller than what you specify, a practice left over from the days of hot-metal type. You cannot accurately measure type with a ruler.

11 FONT-FAMILY All the weights and styles: Roman or regular Bold or demibold Italic or oblique Bold italic or bold oblique Heavy (for display purposes) Georgia Handgloves Handgloves Handgloves Handgloves Arial, Arial Black Handgloves Handgloves Handgloves Handgloves Handgloves

12 Measuring and specifying type Type is measured horizontally in ems, the width of the capital letter M squared. This is because as type gets taller, its width and its spacing must grow proportionally. We can use em measurements effectively in style specifications where type size might change. M M M M M

13 FONTS A font can include hundreds of characters and symbols. The character set for Verdana, for instance, includes 695 characters. But browsers use a basic set of 256 characters, called ISO Latin-1. A subset of this is the 128 ASCII characters that have been used since the days of teletype. (ASCII stands for American Standard Code for Information Interchange.) To overcome these limitations and make full use of a font s character set, we use entity codes. The ASCII character set, not including 32 non-printing control characters:,! # $ % & ( ) * + -. / : ; < = A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z { } ~ (SPACE) (DELETE)

14 Measuring and specifying type Type specified in pixels looks much smaller than type specified in points. Whether you use pixels or points, use the same system consistently throughout your pages. 14-point Georgia (left), 14-pixel Georgia (right).

15 Cascading Style Sheet specifications We control the look of our type using CSS, Cascading Style Sheets. As with HTML, the syntax is always the same for the basic specification. body { font-family: georgia, times, serif; } Selector Curly bracket Declaration Close bracket Property colon value semicolon Selectors can be HTML tags, class selectors or ID selectors.

16 Typical CSS specifications Here are some things that can go in a CSS type specification. Note that the default type size and font family could go in the body tag specification: p { font-family: georgia, times, serif; font-size: 14pt; line-height: 16pt; text-indent: 1em; margin: 0 0.5em 0; } Selector (HTML tag) Font string Font size Line height 1st-line indent Margin (space above, right, bottom, left)

17 Typical CSS specifications Other important specifications:.rednoindent { color: #600; text-indent: 0; margin: 1em 0 1em 0; border-width: 1px 0 1px 0; border-color: #600; border-style: solid; padding: 16px 0 16px 0; } Class selector Font color No indent Margin added Border top, bottom Border color dark red Border solid Padding (space inside border)

18 Measuring and specifying type The code: <p> Cum adiamconsed dolut irit lore min vullan ullam, sustrud magnis exer aci blamcommod tem iureet ex eugue vel utpat lobore elessectem dolor ipit init praese ent at, vullam, quis nibh ea alit incilla ndiam, quamet aut velit, velit la faccum del utpat, sectet, corpercing euipis nullut dui blan henim quisi. </p> <p class= rednoindent > Cum adiamconsed dolut irit lore min vullan ullam, sustrud magnis exer aci blamcommod tem iureet ex eugue vel utpat lobore elessectem dolor ipit init praese ent at, vullam, quis nibh ea alit incilla ndiam, quamet aut velit, velit la faccum del utpat, sectet, corpercing euipis nullut dui blan henim quisi. </p> The Web page display: The font-family, font size, & line-height cascade into the second paragraph. The class specification add other qualities.

19 Rule 1 Avoid novelty or cursive fonts, and use bold and italic and especially bold-italic sparingly. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor GIDDYUP: Very limited use, definitely not for the text. BLACKLETTER: Sorry, no. SCRIPT: Note how hard to read this sample is. COMIC SANS: Forbidden! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

20 Rule 1 Before using bold, italics or especially bold italics, ask if you really need it. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Bold and italics are tiring to read in large blocks.

21 Rule 2 Choose font families users will have on their computers. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Verdana Georgia Arial Helvetica Times Times New Roman

22 RULE 3 Match your font choices to the personality of the text. Letterforms have tone, timber, character, just as words and sentences do. BEOWULF An excerpt translated by Seamus Heaney Beowulf s name was known through the north. And a young prince must be prudent like that, giving freely while his father lives so that afterwards in age when fighting starts steadfast companions will stand by him and hold the line. Behaviour that s admired is the path to power among people everywhere. BEOWULF An excerpt translated by Seamus Heaney Beowulf s name was known through the north. And a young prince must be prudent like that, giving freely while his father lives so that afterwards in age when fighting starts steadfast companions will stand by him and hold the line. Behaviour that s admired is the path to power among people everywhere.

23 Rule 4 In your stylesheet, come up with one font string and use it consistently. You can do this most easily by putting the font string in your body specification. body { font-family: Georgia, Times New Roman, serif; } p { font-size: 10pt; line-height: 12pt; text-indent: 1em; } h1 { font-family: Verdana, Helvetica, sans-serif ; } Enter font string here in the body specification. No font string needed elsewhere unless you want to use a sans-serif font string for your headings.

24 Rule 5 Give full typographic attention to even small details or especially small details! <h1>wit & Wisdom of Oscar Wilde</h1> <p> Most modern calendars mar the sweet simplicity of our lives by reminding us that each day that passes is the anniversary of some perfectly uninteresting event. </p> <p class="attribute"> Oscar Wilde</p> Use character entities to put a typographical polish on your Web pages. Wit & Wisdom of Oscar Wilde Most modern calendars mar the sweet simplicity of our lives by reminding us that each day that passes is the anniversary of some perfectly uninteresting event. Oscar Wilde

25 TYPE STYLES YOU LL NEED The three basic text styles necessary for establishing a good type hierarchy are: DISPLAY Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Headings can be the same font as your body text, or in an alternative font. ACCESSORY For captions, graphic devices. Usually this is the same font string as your headings. BODY TEXT This type is set up for readability, with proper line spacing to fit the width of the window.

26 GOLDEN RULE OF TYPE For readability, increase line-height for wider columns. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum te feugat nulla facilisi. Duis te feugi facilisi. Duis autem consequat, et iusto odio. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent. WIDE Window: 520px font-size: 12pt line-height: 22pt MEDIUM Window: 296px font-size: 12pt line-height: 18pt NARROW Window: 164px font-size: 12pt line-height: 14pt