Typography
Upcoming SlideShare
Loading in...5
×
 

Typography

on

  • 412 views

Для внутренней конференции

Для внутренней конференции

Statistics

Views

Total Views
412
Views on SlideShare
412
Embed Views
0

Actions

Likes
1
Downloads
31
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Typography Typography Presentation Transcript

  • Typography
  • History
  • Blackletter Modern Old Style Slab SerifTransitional Sans Serif
  • Rocco the Clown Entertainer
  • Williams and Glun Financial Advisers
  • Rocco the Clown Entertainer
  • Williams and Glun Financial Advisers
  • « В наше время выходит такое количество печатных материалов, что обесценивается значимость отдельных работ. Мы просто не можем перечитать все, что издается сегодня. Задача типографики — разделить, организовать и растолковать эту массу печатных материалов таким образом, чтобы читатель имел шанс найти то, что интересно ему».           Эмиль Рудер, типограф
  • Text settings
  • Myriad Pro RegularMyriad Pro ItalicMyriad Pro SemiboldMyriad Pro Semibold ItalicMyriad Pro BoldMyriad Pro Bold ItalicMyriad Pro CondensedMyriad Pro Condensed ItalicMyriad Pro Bold CondensedMyriad Pro Bold Condensed ItalicType families
  • epyTType measurement
  • The anatomy of letterforms
  • In the forest, there was a crooked tree and a straightIn the forest, there was a crooked tree and a straighttree. Every day, the straight tree would say to thetree. Every day, the straight tree would say to thecrooked tree, "Look at me...Im tall, and Im straight,crooked tree, "Look at me...Im tall, and Im straight,and Im handsome. Look at you...youre all crookedand bent over. No one wants to look at you." Andthey grew up in that forest together. And then onethey grew up in that forest together. And then oneday the loggers came, and they saw the crooked treeday the loggers came,and they said, the crooked treeand the straight tree, and they saw "Just cut theand the straight tree, and they said, "Just cut thestraight trees and leave the rest." So the loggersturned all the and leave the rest." So the andstraight trees straight trees into lumber loggerstoothpicksthe straight And the crooked tree is stillturned all and paper. trees into lumber andthere, growing stronger and stranger every day.”toothpicks and paper. And the crooked tree is stillthere, growing stronger and stranger every day.” Leading
  • WASP WASPKerning
  • THIS IS BADTHIS IS GOODLetter spacing
  • 01 2 34 56 78 9 012345 67 89Figures (Numerals)
  • I thought one puppy would be wonderful: areal companion, not to much trouble. ThenI wondered whether it would be lonely andwhether two puppies would’t be better.What about three of four? No thank you.I didn’t want to start a kennels, just to havea pet (or two). So off we went to the dogrescue recommended by our vet.How difficult it proved! There were 10 tochoose from, all of them absolutelygorgeous. Next we visited the local kennels.The kennels had between 12 and 15 dogswhen we visited, but could take up to 36.Numbers in text
  • I thought one puppy would be wonderful:I thought one puppy would be wonderful:I real companion, not to be wonderful: aathought one puppy wouldmuch trouble. a puppy would be wonderful:a real companion, not to much trouble.real companion, not tobe wonderful: a realThenIThen I wondered whether ittrouble. be companion, would much trouble.Then one puppy not to much wouldI thoughtwondered whether it would beThen Iwonderednot to much trouble. Thenlonely andlonely andwhether it it would bewondered whether would be I lonely andI wondered whether two puppies would’tcompanion, whether two puppies would’tlonely and What about three of four? Nobe better.whether two puppies would’t be better.whether it wouldpuppies and whether two puppies be lonely would’t be better.be better. What about threeof four? No thank of four? Nowould’t be better. What about three thank you.What about three of four? No thank you.thank you. three of four? Nothank you.you.I didn’t want to start a akennels,just to to didn’t want to start a kennels, just tohave want to start kennels, just haveIdidn’t want to (or two). Sokennels, just to didn’t pet start astart a just to have a petto want to kennels, off we went (orhave (or two). So off we went to the doga pet a two). So off we went to the doghave aoff we went to the dog rescue went to the pet (or two). So off wetwo). dog rescue recommended by our So recommended by our vet.rescuethe our vet.recommended by our vet.dog rescue recommended by our vet.How difficult it proved! were 10 were 10 tovet. difficult it proved! ThereThere were 10 to difficult it proved! There to choose from,How difficult it proved! There were 10 toHow difficult it proved! There were 10 toHow from, all of them absolutelychoose absolutelyof them absolutely theall of them all gorgeous. Next we visitedchoose from, all of them absolutelygorgeous. Nextkennels had between 12 and 15choose from, all ofvisited absolutelylocal kennels.Nextwe visited the local The we visitedthe local themgorgeous. the localkennels. Thevisited, but couldbetween36. andgorgeous. Next we visited the local anddogs when we kennels had between 12 kennels had take up to 12kennels. The kennels had between 12 and15 dogs when we visited, but could take upkennels. The kennels had between 12 up visited, but could take15 dogs when we visited, but could takeand 15to 36. dogs when we visited, but couldup to 36.take up to 36.Colour
  • Responsive Typography: The BasicsResponsive Typography: The BasicsWhen we built websites we usually started by defining the body text. The body text When we built websites we usually started by defining the body text. The body text definitiondefinition dictates how wide your main column is, the rest used to follow almost by itself. dictates how wide your main column is, the rest used to follow almost by itself. Used to.UntilUsed to.Until recently, screen resolution was more or less homogenous. Today we deal with recently, screen resolution was more or less homogenous. Today we deal with a variation ofa variation of screen sizes and resolutions. This makes things much more complicated.screen sizes and resolutions. This makes things much more complicated.In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing In the heat of the relaunch I wrote a quick blog post on responsive typography, focussingsolely on the aspect of our latest experiment: responsive typefaces. Without knowing the solely on the aspect of our latest experiment: responsive typefaces. Without knowing thehistory of iA, you’d miss some key aspects to the responsive typography and design in our history of iA, you’d miss some key aspects to the responsive typography and design in ourrelaunched site. Instead of mashing up all our articles on the matter, I decided to start from scratch and explain responsive typography step by step. This is step one.relaunched site. Instead of mashing up all our articles on the matter, I decided to start fromscratch and explain responsive typography step by step. This is step one.While both have advantages and disadvantages, we believe that adaptive with as few as possible break points is the way to go, because readability is more important than having While both have advantages and disadvantages, we believe that adaptive with as few asa layout that is always as wide as the viewport. This is a debatable opinion on a apossible break points is the way to go, because readability is more important than havingcomplex matter in itself, but optimal readability requires a certain amount of control over layout that is always as wide as the viewport. This is a debatable opinion on a complex matterthe measure (column width) of the text, and in this regard a liquid layout creates more in itself, but optimal readability requires a certain amount of control over the measureproblems than it solves. More about that another time.(column width) of the text, and in this regard a liquid layout creates more problems than itsolves. More about that another time.Legibility and readability
  • Inthe forest, there was aacrooked tree and a In the forest, there was crooked tree and astraight tree. Every day, the straight tree would say straight tree. Every day, the straight tree would say toto the crooked tree, "Look at me...Im tall, and the crooked tree, "Look at me...Im tall, and Im Im straight, and Im handsome. Look at you...youre straight, and Im handsome. Look at you...youre all crooked andand bent over. oneone wants to at all crooked bent over. No No wants to looklook at And they grew up in that forest forest together. you." you." And they grew up in that together. And thenAnd thenthe loggers came, and they and the one day one day the loggers came, saw crooked tree and the straight tree, and they said, they saw the crooked tree and the straight tree, and "Just cut said, "Just cut theand leave the rest." So they the straight trees straight trees and the loggers turned all the straight trees into lumber leave the rest." So the loggers turned all the straight and toothpicks and paper. And the crooked tree is still there, growing and toothpicks and paper. trees into lumber stronger and stranger every And the crooked tree isday.”there, growing stronger still and stranger every day.”Shape
  • I thought one one puppy would be wonderful: a companion, notI thought one puppy would be wonderful: aareal companion, not to I thought puppy would be wonderful: a real companion, would be wonderful: real real companion,tomuch trouble. ThenI Iwondered Iwhether ititwhether lonely andmuch not to much trouble. Then whether would be itlonely and much trouble. Then I wonderedwondered would be lonely be trouble. Then wondered whether would be wouldand whether puppies and whetherbe better. What about be better.whether two two puppies would’t two puppies would’t three of whether two puppieswould’t be better. What about three of four? lonely would’t be better. four?four? thank you.you. want to start three of four? No have aa petNo thankthankI Ididn’t want to start a kennels, just to thank pet No No you. didn’t What about just to have you.I didn’ttwo). off off we went to the dog rescuearecommendedSo off(or two). So So start a kennels, just to have recommended by our (or want to we went to the dog rescue pet (or two). bywe went How difficult it proved! There were 10 choose from, allallvet. Howto the dog rescue recommended10 to tovet. ourvet. difficult it proved! There were by our choose from, ofHow them absolutely gorgeous.were 10 to choose from, all of Thethem difficult it proved! There Next visited the the local kennels. of absolutely gorgeous. Next we we visited local kennels.themThehad between between15 we visited the localwe visited,kennels kennelsgorgeous. Next dogs15 dogswe visited, but could absolutely had 12 and 12 and when when kennels. Thekennels to 36.take up had between butand 15 take up to 36. visited, but could 12 could dogs when wetake up to 36.Alignment
  • It’s about capturing ideas. It’s quick and dirty. It dirty. It is there to jot something down. It is It’s about capturing ideas. It’s quick and is there for you for you to jot somethingbasically is notebook.aA drawing app could be anything, though, like a quicklike a quickdown. It a basically notebook. A drawing app could be anything, though, wireframingand sketching tool, or a tooltool,professional painters. However, Paper is not. The UI notwireframing and sketching for or a tool for professional painters. However, Paper is not.only UI not only communicateshelps but it helps you puta state where statefeel free to feelThe communicates that, but it that, you put yourself in yourself in a you where youexpressexpress ideas without evaluatingThe UI The UIstory a story and sets afor the entirefree to ideas without evaluating them. them. tells a tells and sets a mood mood for theentire experience.experience. ❡ This interface tells a completely different story. If I want to spend an hour ortwo realizing one of my ideas, this interface would inspire me. If I’m out to take some quicknotes, this interface may however discourage me from doing so. Ito spend an hour or two This interface tells a completely different story. If I want don’t want my quick, uglynotes to be framed in and put up on a wall for display. me. If I’m out to take some quicklyrealizing one of my ideas, this interface would inspire I would think twice before quickjotting this interface may this app. discourage me from doing so. I don’tPhoto my quick, uglynotes, down anything in however ❡ Again, let’s look at the function of want Booth: takepictures, be framed in and put up on a wall them. The first version of Photo before quicklynotes to record videos and apply filters to for display. I would think twice Booth made allthis really easy and accessible.app. not, however, communicate the purpose of Photojotting down anything in this It didBooth: fool around and have fun. ❡ While this may be more functional, more clean, andmore true to the functions of the interface,Photo Booth:Itake pictures, be creating music in Again, let’s look at the function of it’s not fun. could as well record videos andExcel. filters toGarageband interface not only presents made all in a clear and andapply Apple’s them. The first version of Photo Booth features this really easyunderstandable way, it adds to a beautiful, fun and memorable experience.fool around andaccessible. It did not, however, communicate the purpose of Photo Booth:have fun. While this may be more functional, more clean, and more true to the functions ofthe interface, it’s not fun. I could as well be creating music in Excel. Apple’s Garagebandinterface not only presents features in a clear and understandable way, it adds to abeautiful, fun and memorable experience.Paragraphs
  • TIMES New ROMAN, , , Times s NEW Roman,nJOANNA,Typefaces TIMES NEWeROMANmJoanna, TimesNew Roman,Ja Joanna, i m e N w R o , OANNAPERPETUA e e t u a P Pilgrim areJ ERPETUA,and Linotype and Linotype areP o a n n a PandINOTYPEPilgrim are 20th-Perpetua andLpLINOTYPE PILGRIM 20th-Perpetua and r LinotypeILGRIM are 20th-20th-century typefaces that print well onPilgrim are 20th-century typefacesuncoated,century typefaces that print well on thatuncoated, on paper. Coated papers, also ofprint well good-quality paper. Coated papers,good-quality uncoated, good-quality paper.also quality, are better better suited toCoatedgood quality,of good quality, are bettergoodof papers, also aresuited to transitionaltransitional faces, such as MONOTYPEsuitedsuch as Monotype Scotch Roman, ,faces, to transitional faces, such asRoman, MONOTYPE SCOTCH R Monotype Scotch OMANSCOTCH ROMAN, c h R o m aand BBulmer,M o n o t y pBELLc oBaskervillen ,BELL,Fournier, e S , Bt FOURNIER,Fournier, ,Bell, Baskerville and and ULMER,FOURNIER Bell, ASKERVILLE Bulmer,BASKERVILLE l l , B a k e r vF owell as to, the and BULMER,iofl typefaces,as u r n i e r B emodernsgroup l e andas well Walbaum to BODONI. ofsuch asas ,to the modernBodoni. typefaces, groupB u l m eWalbaum asandthe modern group of r as well WALBAUM and Bodoni.such as WALBAUM a l b a u m andtypefaces, such as Wand BODONI. B o d o n i .Emphasis in text
  • “I’ve always been a word guy, I like weird“I’vewords and IIlike American slang and all that words and like American slang and all thatand words that are no longer being used… I and words that are no longer being used…like to to drag them out of the box and wave I like drag them out of the box and wavethem around… this is an interesting one, it’s them around… this is an interesting one,amazing how how in addition to punctuation it’s amazing in addition to punctuation justajust a pause in the wrong placeplace can little little pause in the wrong can justcompletely transform the meaning of of just completely transform the meaningsomething.” something.”“Its very hard to stop doing things youre“Itsused to doing. You almost have to dismantle used to doing. You almost have to dismantleyourself and scatter it all around and then yourself and scatter it all around and thenput aablindfold on and put it back together so put blindfold on and put it back togetherthatthat you avoid old habits.” so you avoid old habits.”Hanging punctuation
  • We,       therefore,      therepresentatives of the UnitedStates of America...We, therefore, the represen-tatives of the United Statesof America...Hyphenation
  • The quick BROWN FOX jumpsover the lazy dog.The quick BROWN FOX jumpsover the lazy dog.Capitals and small capitals
  • It’s about the hands­on experienceof setting metal type.The Edinburgh–London train nis ready to depart.I wish you’d—oh, never mind. MThree rules
  • The lounge measures 23′ 6″ by 12′ 9″″Undoubtedly, it′s the best (if notthe toughest) course I′ve everbeen on″“Undoubtedly, it’s the best (if not the toughest) course I’ve ever been on” Apostrophes and quotation marks
  • fi fi Difficult, fine, officeLigatures
  • & & &Ampersands
  • (0123456789) (HELLO)(0123456789) (HELLO)Ampersands