'

Typecurious: A Typography Crash Course

Понравилась презентация – покажи это...





Слайд 0

Typography A CRASH COURSE. HELMETS NOT INCLUDED.


Слайд 1

Stop Stealing Sheep AND FIND OUT HOW TYPE WORKS.


Слайд 2

A wards Cer t i f icat e “In 1936, Frederick Goudy was in New York City to receive an award for excellence in type design. Upon accepting the certificate, he took one look at it and declared ‘Anyone who would letterspace black-letter would steal sheep.’” Erik Spiekermann Stop Stealing Sheep & Find out How Type Works


Слайд 3

So Stop Stealing Sheep The term “to steal sheep” references a person who would rather steal livestock than work hard rearing it themselves. Goudy compares this to his particular situation in order say that the person who scripted his award took the easy way out, rather than scripting closely-laid blackletter forms (below). Handwritten Black Letter Type Latin Bible of AD 1407


Слайд 4

Vocabulary IT’S PRACTICALLY ITS OWN LANGUAGE.


Слайд 5

A Little Context Most typefaces are based off of the written word. Manuscripts were written with pens or quills that generated thick and thin strokes within letterforms. These influences are made clear in traditional serif and some sans-serif typefaces.


Слайд 6

Typeface vs. Font Avenir 35-Light, 34pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !@#$%&? Baskerville Italic, 34pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !@#$%&? A typeface is the whole package. Literally referring to the look or “face” of the type. ie: Baskerville, Avenir, Garamond A font is a piece of the greater whole. ie: Baskerville Italic, 34pt, Avenir 35-Light. 34pt


Слайд 7

Letterform A A The graphic form of a letter of the alphabet, either as written or in a particular font. Avenir 45-Book 500pt. Originally designed by Adrian Frutiger in 1988 Sans-Serif Baskerville Regular 530pt Orignally designed by John Baskerville in 1735 Transitional Serif


Слайд 8

Anatomy of a Font The cap height is the height of the capital letters. The x-height is the height of the lower-case x. The baseline is where the type sits. CAP HEIGHT X-HEIGHT BASELINE


Слайд 9

Anatomy of a Font Some letterforms extend below the baseline to give the illusion of being aligned. If curves sat right on the baseline, they would appear to sit above it. This is called an overshoot.


Слайд 10

Anatomy of a Font The lines that make up letterforms are called strokes. The width of those strokes is called the stroke-width. STROKE WIDTH


Слайд 11

Anatomy of a Font The Stem is a vertical stroke in a letterform. Serifs are the stroke-like protrusions on the ends of letterforms STEM SERIF


Слайд 12

Anatomy of a Font Descenders extend below the baseline. Ascenders extend above the x-height and sometimes above the cap height. ASCENDER DESCENDER


Слайд 13

Anatomy of a Font Counters are the open spaces within most letterforms. Bowls are the containing strokes around counters. COUNTER BOWL COUNTER


Слайд 14

Anatomy of a Font A Bar extends from a letterform without being attached on both ends. A Crossbar touches a stem on each end. BAR CROSSBAR


Слайд 15

Ligature Ligatures represent the connecting of two or more letterforms for the sake of legibility and to reduce un-designed overlapping. Some ligatures are purely for aesthetic purposes. ff fi fl ffi ffl fj fffifl ffi ffl � st � NON-LIGATURED LIGATURES AESTHETIC LIGATATURES


Слайд 16

AA AV MB MD ME FF FI FL HE LA MP NK NT OC OG OO THE TE TR TT TW TY Th UB UD UL UP UR VA ae æ cky ct ee fi fl ff ffi ffl ffb ffh ffj ffr fft fb fh fj fr ft ffy fy gi gy ip it ky oe py sp st tty tt ty tw Sampling of ligatures from the font Mrs Eaves


Слайд 17

Classifying Type MORE THAN JUST A SERIF.


Слайд 18

Serif & Sans-Serif A A Serif fonts have the stroke-like extensions attached to the ends of the letterforms. (left) Sans-serif fonts do not. (right) Baskerville Regular 530pt Orignally designed by John Baskerville in 1735 Transitional Serif Avenir 45-Book 500pt. Originally designed by Adrian Frutiger in 1988 Sans-Serif


Слайд 19

Serif Faces AAA The three traditional categories of serif faces are Oldstyle, Transitional, and Modern. Oldstyle Adobe Garamond Pro Regular Less stroke-width variation, rounded serifs, calligraphic qualities, “ink-bleed.” Transitional Baskerville Regular More stroke-width variation, flat-edged serifs, more crisp qualities, sharp lines. Modern Didot Regular Extreme stroke-width variation, minimal rectangular serifs, little-to-no serif transition, ultra crisp.


Слайд 20

Slab Serif Faces There are two major classifications of Slab Serifs: Clarendon and Neo-Grotesk AA Clarendon Slab Serif Clarendon Regular Very little stroke-width variation, serifs are nearly as large as strokes, smooth serif transitions. Neo-Grotesk Slab Serif ITC Lubalin Graph Demi Little-to-no stroke-width variation, serifs are as large as strokes, sharp angular serif transitions.


Слайд 21

Glyphic Serif Glyphic Serif faces emulate carved inscriptions rather than pen-strokes. A A Friz Quadrata Medium Designed by Ernst Friz in 1978 Albertus MT Regular Designed by Berthold Wolpe, 1930s


Слайд 22

Sans Serif Faces The three traditional categories of sans serif faces are Grotesque, Geometric, and Humanist. Ag Ag Ag Grotesque Berthold Akzidenz Grotesk Book Strokes modulate (change width) around curves. They are not the same width all the way around. Geometric Avenir 45-Book Strokes have less modulation around curves and are nearly the same width all the way around. Humanist Meta Book Stokes have severe modulations to emulate pen-strokes while still being sans-serif.


Слайд 23

Miscellaneous Most typefaces can’t be defined by either serif or sans-serif. Some may be Script, Symbol, or Ornamental. There are also experimental typefaces and ones that can’t be categorized at all. Ag Ag  Ag Ag Ag Ag  Edwardian Script Edward Benguiat Script Springtime Unknown Script Webdings Multiple Designers, 1997 Symbol Pinnocio Normal Unknown Ornamental Rosewood Carol Twombly, 1994 Ornamental Cutouts Gail Blumberg, 1990 Ornamental Dead History P. Scott Makela, 1990 Experimental


Слайд 24

Setting Type BE GLAD YOU HAVE A COMPUTER


Слайд 25

(Above) (Above) (Above) (Below) (Below) (Below) Lead type in a case with a composing stick. Lead type and ornaments. Lead type set into a press block. Wood type set into a press block. Linotype machine Linotype slugs.


Слайд 26

Typesetting Leading is the space between lines of type. The rag is the jagged edge at the side of a paragraph. A widow is when you have 12 characters or less at the end of a column. An orphan is when you have 12 characters or less at the beginning of a column. RAG ORPHAN Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse ultrices posuere cubilia Curae; Vivamus a tellus dui sit amet posuere cursus. Integer ornare at est viverra condimentum a et enim. Curabitur quam quis ligula porttitor, sed lacinia est mattis. ante orci, pretium vel lobortis ut, ultricies vel Mauris semper mi quam. Phasellus fringilla urna velit. Fusce semper dignissim scelerisque. Cras sit amet elit auctor maximus ac id justo. Quisque mauris vivamus tellus. ex purus, rhoncus eget fermentum eu, varius Curabitur ut accumsan purus, vitae interdum eget enim. Integer rhoncus magna et metus WIDOW ante ipsum primis in faucibus orci luctus et potenti. In sit amet rutrum odio. Sed suscipit LEADING Aliquam mattis ac diam in volutpat. Vestibulum orci. Quisque vitae fringilla velit. Maecenas sed vehia. dolor vel dui vulputate imperdiet euismod fusce laorect.


Слайд 27

Letterspacing Tracking is the measure of the overall spacing between letters. Kerning is the measure of the spacing between individual letters TRACKING KERNING


Слайд 28

Good vs. Bad Kerning Type Type Type GOOD Letterforms have the appearance of being evenly spaced. BAD Letterforms have a measured and even distance between them (monospaced). This leaves them poorly spaced visually. WORSE Letterforms do not have even visual spacing and are touching.


Слайд 29

Letterspacing Tracking can be modified to extremes. These extremes are referred on a scale of loose to tight. TIGHT Typography TYPOGRAPHY NORMAL Typography TYPOGRAPHY Ty p o g r a p h y T Y POGR A PH Y LOOSE


Слайд 30

Letterspacing Different letterforms, fonts, and typefaces respond to tracking in different ways. TIGHT Typography TYPOGRAPHY NORMAL Typography TYPOGRAPHY LOOSE Ty p o g r a p h y T YPOGR APHY


Слайд 31

Line Spacing Leading can also be modified to the loose and tight extremes. Typesetting is expressed in font size/leading size (14pt/18pt) TIGHT (14/14) NORMAL (14/18) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. LOOSE (14/30) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque.


Слайд 32

Line Spacing Line spacing can differ based on typeface, capitalization, and font weight. Note the use of negative leading for the first headline TIGHT (72/55) EXPRESS YOURSELF NORMAL (72/72) EXPRESS YOURSELF LOOSE (72/90) EXPRESS YOURSELF


Слайд 33

Line Spacing With lower case letters, it’s important to pay attention to your ascenders and descenders. This particular example works with negative leading, but others may have crashed together. TIGHT (72/55) NORMAL (72/72) LOOSE (72/90) Express Yourself Express Yourself Express Yourself Hyper Soft Hyper Soft Hyper Soft


Слайд 34

Ragging Left or right-aligned type should have a “saw-tooth” rag. Meaning, an even and regular pattern of protrusions. LEFT ALIGNED JUSTIFIED GOOD BAD GOOD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. BAD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a reet leo. Suspendisse potent. ametiam rutrum odio. Edsuscipitdui sitamet ponsccursus. Integer ornar am quis ligula portti, ed lacinia est mattis. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac id justo. Quisque ex purus, rhoncu fer eu, varius eget enim. Integer rhoncus magn metus. Aliquam mattis ac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac idjusto. Quisqueex purus, rhon fer eu, variusegeteni. Integer rhoncus magn metus. Aliquam maisac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque.


Слайд 35

Ragging Left or right-aligned type should have a “saw-tooth” rag. Meaning, an even and regular pattern of protrusions. Justified type should look evenly spaced within the text block. Watch out for ponds and rivers. LEFT ALIGNED JUSTIFIED GOOD BAD GOOD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. BAD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a reet leo. Suspendisse potent. ametiam rutrum odio. Edsuscipitdui sitamet ponsccursus. Integer ornar am quis ligula portti, ed lacinia est mattis. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac id justo. Quisque ex purus, rhoncu fer eu, varius eget enim. Integer rhoncus magn metus. Aliquam mattis ac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac idjusto. Quisqueex purus, rhon fer eu, variusegeteni. Integer rhoncus magn metus. Aliquam maisac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. POND RIVER


Слайд 36

Ragging Ragging also has an influence on tone and voice. In large headlines, line breaks can be used as pauses. And as always, avoid widows! OKAY BAD CALL ME CRAZY BUT I’M A TYPOPHILE AND I WOULD HAVE GOTTEN AWAY WITH IT TOO IF IT WEREN’T FOR YOU MEDDLING KIDS BETTER GOOD CALL ME CRAZY BUT I’M A TYPOPHILE AND I WOULD HAVE GOTTEN AWAY WITH IT TOO IF IT WEREN’T FOR YOU MEDDLING KIDS


Слайд 37

“There is no bad type.” “Apart from the typefaces that work well because we are familiar with them, there are those that defy the simplistic classifications of usefulness or purpose. They may exist only because the type designer’s first thought one morning was a new letter shape. These private artistic expressions may not appeal to a wide audience, but every now and again the right singer effortlessly transforms a simple song into a great hit. In the right hands, technical constraints turn into celebrations of simplicity and awkward alphabets are typographic heroes for the day.” Erik Spiekermann Stop Stealing Sheep & Find out How Type Works


Слайд 38

Thank You digitalsurgeons.com & John Adie Bē.net/jadie


Слайд 39


×

HTML:





Ссылка: