Digital Typography and Hypermedia

Transcription

1 Digital Typography and Hypermedia 1

2 Typography Typography exists to honor content Rober Bringhurst Typography is a means to an end, and not an end in itself, and it is subject to certain restraints Hebert Spencer Type well-used is invisible as type Beatrice Ward 2

3 Typography The act or art of expressing by means of types or symbols Hypermedia is fundamentally text Understanding typography (and its digital variant) helps in producing legible applications 3

4 Type Gives Personality The font used in the logo is part of the image of a company 4

5 Perception changes with time IBM logo's evolution

6 But at the end it needs to be read And the rules have not changed since Gutenberg s press Problem: digital output devices are not very good compared to paper 6

7 Nomenclature Type Typeface Font Point, pica 7

8 Nomenclature 8

9 Typeface The features by which a character 's design is recognized, hence the word face Times New Roman Helvetica Garamond 9

10 Font A particular collection of characters of a typeface A particular instance of values for orientation, size, posture, weight, etc., values It can be metal, photographic film, or digital 10

11 Point Original Point System (Didot) 72 points per inch (French inch!) United States Typefounders Association in 1886 defined as: Point was set to be 1/12 of a pica, and an 83-pica distance was made equal to 35 centimeters: 1/72.27 But PostScript defined it as 1/72 11

12 Vector vs. Bitmap 12

13 Hinting At small resolutions, pixels don't align with the shape of the letters Hinting specifies, at slow resolutions which pixels should be turn on A hint is mathematical specification of how to modify the original shape to match the dot grid 13

14 Hinting 14

15 History of type: Starts with Blackletter, such as Old English Old Style typefaces follow, based on classical designs: Garamond 15

16 History of type: Transitional Because they are between traditional and modern Baskerville Modern type Small serifs: Bodony 16

17 Sans Serif Also known as gothic or grotesque Appears around 1815 Acknowledged as harder to read, but good for titles Helvetica: 17

18 Slab Serif Also known as Egyptian Block-like rectangular serifs sticking out horizontally or vertically, often the same thickness as the body stroke Lubalin: A variant: Claredons or Ionic Century Schoolbook 18

19 Synthesis Combination of different styles Best example: Times New Roman\ Designed by Lardent/Morison, 1931, it has old style, transitional and modern elements. Sans Serif: Optima, by Zapf,

20 Grunge Typography Typography is beyond letters. Some fonts are so decorative, they almost become 'visuals' and when put in text form, they tell a story beyond the words a canvas is created by the personality of the collection of words on the page." Carlos Segura 20

21 Other types 21

22 Typeface protection Like other artistic forms, type is created by skilled artisans Designing a good typeface can take years Protection for typefaces: Trademark protects the name: Lucida Times roman 22

23 Typeface protection Copyright Two types: Design, not currently availableeverywhere Font: the actual implementation which is software It is possible to copy the font 23

24 Typeface protection Patent It is not a common process (too expensive) Design patents, protecting the design, not the invention Invention patents, such as IBM typewriter ball, protected Courier 24

25 Typeface protection Trade secret Many fonts are encrypted Adobe's font uses eexec (encrypted execute) PostScript operator It s long cracked 25

26 Typeface protection Ethics Most professional design organizations attempt to promote ethical standards of professional behavior to avoid plagiarism and piracy. 26

27 Like software, fonts are licensed Some are in the public domain Some are copyrighted but free Many have to be licensed Vera Fonts were recently released to the Unix community, with a Open Source License A font license can cost from few dollars to hundreds 27

28 A license (House Industrial) It allows use in up to 6 devices PDF embedding requires a different license Type and cost dependent on whether the document is editable or not It does not allow embedding of fonts in software 28

29 Type technology evolution Starts with Gutenberg press (ok, Chinease were first) Metal types Few changes until late

30 Type technology evolution Line-casting machines Pantographs used to create the punches 30

31 Type evolution Photocomposition Characters are projected onto photosensitive paper. Lenses are used to adjust the size of the image In some senses this technology was an ``improvement,'' allowing new freedoms, such as overlapping characters. 31

32 First laser printer Xerox developed in 1959 the first Xerographic machine Called EARS by Xerox Palo Alto Research Center Gary Starkweather adapted Xerox copier technology adding a laser beam to it to come up with the laser printer 1978, first commercial laser printer by Xerox Xerox 9700 Electronic Printing System US $500,

33 Computer Screens 33

34 Knuth s work In 1976, his Volume 2 had to be reprinted in photocomposition machines He did not like that March 1977, he starts his work to create software for typesetting TeX He spend 10 years Developed a family of fonts Computer Modern 34

35 Bitmap fonts First attempt to create digital fonts for printing Described using splines, but digitized into bitmaps Best example is Knuth s Computer Modern 35

36 Postscript Type 1 Developed by Adobe for Laser printers It uses quadratic B-splines Uses hinting at low resolutions 36

37 Postscript Type 3 Bitmap oriented fonts Resolution dependent Prints well, but illegible on screen (La)Tex is one of the few using it 37

38 TrueType Developed by Microsoft in response to Adobe royalty requirements for Postscript Type 1 Described using quadratic B-splines Conversion between PS type 1 and TrueType is possible but it is imperfect Better hinting than PS type 1 38

39 OpenType Developed by Microsoft and Adobe Intended to unify PostScript and TrueType 39

40 Cleartype Developed by Microsoft for LCDs 40

41 Differences in output devices Technology CRT Type Screen Approx. Resolution Typographic Quality Fair to good LCD Screen Fair to good Plasma Screen <1-100 Fair Laser Printer Good to excellent Digital Typesetter Film output Excellent All of them are bitmap oriented! 41

42 Displays are low-resolution Computer displays usually have a resolution of 50 to 100 dpi (dots per inch). Far lower than 300 dpi resolution in laser printers The number of dots that are available to form a character is limited. 42

43 Effect of low resolution in type There are just not enough pixels available 43

44 Antialiasing 44

45 The Effect of Flicker 45

46 Pixels of CRT and LCD CRTs make elliptical ones LCDs make them rectangular Better shape: Hexagonal 46

47 Psychology of reading We don t read every character We recognize shapes Downstyle type is more readable 47

48 Is this true? Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae Anidroccg to crad cniyrrag lcitsiugnis planoissefors at an uemannd, utisreviny in Bsitirh Cibmuloa, and crartnoy to the duoibus cmials of the ueticnd rcraeseh, a slpmie, macinahcel ioisrevnn of ianretnl cretcarahs araepps sneiciffut to csufnoe the eadyrevy oekooln 48

49 Tinker research 49

50 Type affects legibility Tinker (1963) observed significant differences in readers speed (on paper) Serifs are faster 50

51 Comparison of typefaces Important for user satisfaction Serifs are faster 51

52 Reader satisfaction 52

53 Tinker results Tinker found that all capitals slow reading from to 10 to 13% Italic is also slower by approx 10% Boldface is read at the same speed as roman Material printed in different typefaces retards reading Legibility of one letter does not translate to legibility of text A legible type is one that can be read rapidly and easily 53

54 More results Readers tend to prefer 11pt Leading is optimal at 2pt Width depends on size: 10pt 2pt lead: picas (6 to 13cm) 12pt 2pt lead: picas (7 to 15.6cm) 6pt 2pt lead: 9-25 picas (4 to 10cm) Indentation of paragraphs increases readability by 7% 54

55 More results White on black is more readable than viceversa Readers prefer white on black (75%) Isolated words and discrimination between ll, li, il, and ii are more perceptible at a distance when printed black on white Sans serif (Kabel Light) was equaly legible at 10 and 14pt ll, li, il ii ll, li, il ii 55

56 And more results Paper that is too glossy slows reading Microfilm can be as legible as paper Sideways text is as legible in either direction The margin size has no effect, as long as the page is flat The greater the brightness contrast between background and type, the more legible 56

57 Online reading is slow 20-30% slower It is tiring Not user friendly 57

58 Attracting attention Some typefaces are used to attract attention Mainly for advertising 58

59 Engineer s View Using print economically to achieve a goal What is really necessary in a type? What constraints exist? How can cost be reduced? 59

60 Principles of Digital Typography Typography should be invisible Typography is part of the quality of the HCI Technology and typographic quality are linked Letterforms have evolved according to our ability to perceive them Radical changes in typography will not be easilty accepted 60

61 Text Alignment Justified online text suffers from poor spacing and excessive hyphenation Fine adjustments are not possible in low resolution screens Centered and right justified text is difficult to read Left justified is the most legible option 61

62 Line Length Many online documents violate an important rule of typography: The lines are too long Long lines require the reader to move their heads Ideal length: 3 inches, characters 62

63 White Space Leading affects legibility Too much leading wastes space Too little leading confuses the two lines of type, because the ascenders get jumbled with the descenders of the line above In print usually size+2 point In computer screens, slight more might work better 63

64 Indentation Used to marked the beginning of a paragraph In computer screens, an indent is usually replaced with longer leading It makes the page easier to scan 64

65 Typefaces Typefaces can be used for: Legibility and Effect Some are designed for the screen Georgia, Verdana, Andale Mono Traditional typefaces might be unreadable on the screen Some are adapted for the screen This is an example of Times Roman This is an example of Times New Roman 65

66 Type Size It is an usability issue (discussed later) A page should allow resizing without affecting its legibility 66

67 Case Capitalize normally DO NOT USE ONLY CAPITAL LETTERS Do Not Capitalize Every Single Word 67

68 Emphasis Emphasis creates landmarks in a document It stablishes information structure It also adds visual variety Italics: avoid large blocks of text in italics, they are hard to read and very difficult to read in low resolution screens Bold: its contrast adds emphasis, but only when used sparingly 68

69 Emphasis Underlined: inherited from the days of the typewritter On the Web, it has taken a whole new meaning: anchors It is a very strong convention Do not override it, unless you know what you are doing 69

70 Colour We ll discuss colour later in the course 70

71 Consistency Hypermedia documents should use typography consistently It makes a site look polished 71

72 Web Site Typography Typical problems of on-screen typography Plus, variability Web pages are build on the fly, at the client side The author does not normally have total control over the way the page will be displayed 72

73 On the Web you never know What font the reader will have available Even worse, under Windows and OS X the same font might look different The author can only recommend typefaces Many systems might not have antialised fonts! 73

74 Web Writing (Nielsen) Nielsen did research on the effect of writing style on understanding content on a Web site His results indicate that promotional language imposes a cognitive burden Original text: Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 74

75 Concise text: 58% better Using half the words: In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park. 75

76 Scannable layout: 47% better Using a layout that facilitates scanning: Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60,002) Buffalo Bill Ranch State Historical Park (28,446). 76

77 Combined layout: 124% better Using a layout that facilitates scanning: In 1996, six of the most-visited places in Nebraska were: Fort Robinson State Park Fort Robinson State Park Scotts Bluff National Monument Arbor Lodge State Historical Park & Museum Carhenge Stuhr Museum of the Prairie Pioneer Buffalo Bill Ranch State Historical Park. 77

78 Objective Language: 27% better Neutral language rather than exaggerated, marketing oriented one: Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 78

79 Cross Platform Issues In OS X and Linux, typefaces look smaller A given typeface might not be available 79

80 Differences in Browsers 80

81 The End 81

82 82