Introduction to typography

Transkript

1 Serif Introduction to typography Bold Regular italic Introduction to typography Introduction to typography Introduction to typography Introduction to typography Introduction to typography Light Italic Condensed Bold T y p e

2 Introduktion til typografi Lidt historie Typeface Kategorier Tekniske termer Space/Luft Readability/Læsbarhed 3 slag typografi Alignment/Flugtning At vælge den rette font

3 Lidt historie Ægypterne skrev kun konsonanter. hieratiske tegn og det Græske Alfabet i Ægypten 300 før Kristus (B.C.) Inkaerne in Peru. Brugte bestemte knuder på reb til at kommunikere med, kaldet Quipu 7-16 århundrede

4 Lidt historie Sanskrit is documented back to app. 500 years B.C. Today still one of the 18 different spoken languages in India. Jiaguwen of the Shang Dynasty (c bc) is a kind of Chinese characters similar to drawings. After the first emperor of the Qin Dynasty ( BC) unified China, he unified Chinese characters and formed Xiaozhuan

5 Lidt historie The vikings characters are called RUNER. The first runes are found in Denmark at the Iron Age. The period for the Vikings: 793 A.C A.C.

6 Lidt historie Calligraphy (fra Græsk κάλλος kallos "skønhed" + γραφή graphẽ "skrivning") - er en visuel kunstart Kalligraphi

7 Udviklingen

8 Lidt historie Det Latinske alfabet, også kaldet det Romerske alfabet, er det mest udbredte brugte alfabet skrivesystem i verden, i dag. Det udvikledes af den vestlige udgave af det græske alfabet, kaldet Cumaean alfabetet, som var lånt og modificeret af Etruskaerne, som regerede det tidlige Rom. Sidenhen blev det videreudviklet af de tidlige romere til det skrevne latisnke sprog. ~700 før Kristus

9 Den Trojanske søjle Det Latinske alfabet - også kaldet det Romerske alfabet

10 DET SMUKKESTE EKSEMPEL PÅ ROMERSK AKURATESSE OG ÆSTETISK SKØNHED ER INSKRIPTIONEN PÅ TROJAN SØJLEN I ROM FRA ÅR 113. DEN ER KENDT FOR SINE KVADRATISKE KAPITALER, SOM ARKETYPEN PÅ KAPITALER Majuscles Store bogstaver/uppercase Det smukkeste eksempel på romersk akkuratesse og æstetisk skønhed er inskriptionen på Trojan søjlen i Rom fra år 113. Den er kendt for sine kvadratiske kapitæler, som er arketypen på kapitæler Minuscles Små bogstaver/lowercase

11 Capitals Rustica Irsk halvunicial Unicial Carolingian minuskel Fra (Blokbogstav) majuskler til minuskler I det 9ende århundrede ønsked the kejser Charlemagne at introducere en simplere og mere læsbar skrift til hans befolkning (det meste af Europa) I forbindelse med en ny udgave af Bibelen på latin In 796 he requested the English bishop Alcuin to start a school near Paris, to rewrite the bible using the new standard script I takt med at romerrigets splittelse i det 5 århundrede, og kristendommens fremgang, spredtes kirkens hverdags skrift Fra Henrik Birkvig sort på hvidt

12 A little history Johan Gutenberg Gutenberg ( ), a goldsmith by profession, developed a complete printing system, which perfected the printing process through all its stages by adapting existing technologies to printing purposes, as well as making groundbreaking inventions of his own. They took carolingian scripts that were common in early Middle age (before the blackletter had become dominant style across the Western Europe).

13 Leonardo da Vinci ( ) The Art of Calligraphy Leonardo Da Vinci ( ) Italian polymath: painter, sculptor,... Keeping diaries and notebooks became a widespread practice, not only amongst artists and scientists but also amongst the wealthy upper classes.

14 Claude Garamond ( ), fransk stempelskærer og skriftstøber, virkede i Paris fra Blandt de første, der havde skrift fremstilling som hovederhverv. Han skabte en elegant antikvaskrift, der fra midten af 1500-t. blev benyttet af tidens bedste bogtrykkere og som i lidt varierende design stadig er meget benyttet under navnet Garamond. Granjon, designed by Robert Granjon is the closest typeface to the original Garamond

15 The Industrial Revolution Startede i det sene 18århundrede og tidlige 19th århundrede i England. - med stor indflydelse på arbejdsmetoder og industrien James Watt's steam engine

16

17 Typeface categories Typeface is the design of a single designed set of letterforms Roman (old style) Late 15th century Has serifs ( feet ) Thick and thin strokes Vertical upright strokes (Used for books) antique Examples: Caslon, Garamond, Palatino, Times New Roman, Baskerville, Century Schoolbook Sans serif (modern) Early 19th century! No serifs Mono line stroke weight (equal stroke thickness). Used for both books and on the screen grotesque Examples: Futura, Helvetica, Univers, Trebuchet, Tahoma, Arial Script Resembles handwriting Slants to the right Letterforms are joined

18 Legibility Serif, Readable Readability: do you want to read it Most common used in body text Caslon, Garamond, Palatino, Times New Roman, Baskerville, Century Schoolbook Sans Serif, Legible Legibility: refers to how easy it is to recognize Specielt til overskrifter for headlines, skilte knapper. mm Uden serif er skriften mere klar Futura, Helvetica, Univers, Trebuchet, Tahoma, Arial Linje længde: Body text screen characters (including spaces) (screen) 7 pkt. -10 pkt. smallest

19 Læselig eller læsbar Readability versus Legibility Sådan skimmer vi tekst Vi læser fra toppen og ned Så brug ALDRIG for mange store bogstaver... Læsbarhed:er selve designet af skrift familien. Læselighed: er afhængig af hvordan skriften er brugt. Hvor indbydende den er at læse Max.65 anslag er maximum for vidden af en kolonne af tekst incl. luft og tegnsætning

20 Læselig eller læsbar Readability versus Legibility Læsbar: (kan skrifttypen læses tydeligt) Læselig: (Hvor indbydende) For the purpose of creating a typographic statement, - viser en speciel følelse til grafisk kommunikation. - at skille sig ud. - personalighed (Det kan gå ud over hvor nemt det er at læse)

21 Læselig eller læsbar Readability versus Legibility Læsbarhed/Readability måles hvor nemt/svært det er at se forskel bogstaverne Læselighed/Legibility hvor meget har man lyst til at læse det

22 Læsbarhed Størrelse, line længde og line afstand For most people it is as natural to read as to breathe. Reading is not a talent you are born with, something that you will learn gradually in school. You have to choose and decide if this is readable for the people who are going to read it. How does it work? Can everybody learn to read. When we read our eyes register all the visual input, but the brain is For most people it is as natural to read as to breathe. Reading is not a talent you are born with, something that you will learn gradually in school. You have to choose and decide if this is readable for the people who are going to read it. How does it work? Can everybody learn to read. When we read our eyes register all the visual input, but Undgå hvide floder i teksten ved for stor linjeafstand

23 Læsbarhed Linje længde: Brød/Body tekst print: Brød/Body tekst skærm: Copyright tekst: bogstaver (incl. komma på skærmen) Ikke mindre end 7-8 pkt. Ikke mindre end 10 pkt. Eneste mindre tekst, er 4-8 pkt

24 Læsbarhed børn Kim Pedersen & Anders Kidmose the Graphic College of Denmark

25 Læsbar Brugertest resultat a test fra Grafisk Højskole, Denmark, Lettest læselige fonts : Times Antique Olive Bodoni Clarendon Rockwell Helvetica Konklusion: både sans og sans serif er brugbare

26 Konklusion: både sans og sans serif er brugbare

27 Ny research Denmark: Mest læsbar most readable Times Antique Olive Bodoni Clarendon Rockwell Helvetica Helvetica +80% Cooper Black Baskerville Italic Times -45% Peignot Poplar Caustic Biomorph USA: Mest læsbar most readable Arial, Courier, and Verdana. Mest ulæselig: Comic Sans

28 At vælge den rette font Design af font Historie af skriften (gammel/ny) Typeface personlighed Associationer Skærm eller print Overskrift eller brød tekst Farve? Look for FREE fonts at Target group - who is it for? Adults / kids/ businessmen / another culture

29 Forskellige fonte? Are they different? Harrington 24 Are they different? Jazz Let 24 Are they different? Moms typewriter Are they different? Santa Fe Let 24 Are they different? Verdana 24 Are they different? Rockwell 24

30 Fonte/Typefaces Type Type type type type type type Bredde Width width w i d t h Posture (expression) Posture Posture posture Vægt Weight WEIGHT Weight

31

32 Læsbarhed X-højden igennem tiden I 1930 var den 65% af H højden, I 1980 var den 72% af H højden X-height En brugertest udført af Grafisk Højskole i Danmark af Henrik Birkvig. Viste at den lettest læselige font var : Times, Antique Olive, Bodoni, Clarendon, Rockwell and Helvetica X-højden er afgørende for, om teksten er læsbar, og nemmere at læse ved høj x-højde

33 Bogstav Anatomi ASCENT LINE CAP LINE MEAN LINE BASELINE DESCENT LINE CAP HEIGHT X-HEIGHT

34 Ligaturer

35 Typografi Bogstaverne har deres egen plads og bør have den rette spatsering/luft Højden er skrift størrelsen 1 Pica =12 points 1 Pica = 4,233 mm 1 Point = 0,353 mm Det er vigtigt at holde øje med at bogstaverne har den rette spatsering / luft imellem sig In Europe bruger vi Cicero, og en cicero er 4,5 mm

36 Optisk bedrag I følge brugertest er den optiske måde vi ser en firkant på, at den er 1.0% plus til minus 1.0% til 1.5% til 1.5% højere end bred En trekant ses optisk som samme højde, som når den er 5.0% til 1 % bredere A H O A H O

37 Alignment/Flugtning

38 Bogstavernes hældning

39 Regler

40 Nettet er ikke PRINT brug Browser Photo A printed page always looks the same - web different Skærm opløsning/resolution: En skrift og størrelse som ser flot ud ved 800 x muligvis ulæselig ved 1024x768 - flere pixels to mindre plads! Jo større opløsning skærm, jo mindre virker det Skærm størrelse: Mange skoler og folk med begrændset plads og (penge) bruger stadig små skærme. Andre har måske 19 inch monitors som virker som film skærme. Forskellige platforme og browsers: PCer og Mac systemer viser forskellige fonte anderledes Samt Mac skærme er lysere

41 TEST inden eksamen i forskellige browsere

42 3 slags typografi Display typography Headlines Aesthetics before readability Reading typography Body text Readability important. Often sans serif Consult typography Specific information, For sale Readability and decoding of message is first priority

43 Overskrifter testes I en Headline er det vigtigt at lave spatsering. Bogstaverne kan være for tætte! Her er der brugt knibning Headline. Headline (ingen knibning/kerning) Headline (let knibning/ kerning) Store font størrelser behøver knibning for at undgå for meget luft imellem. Hvis en skriftfamilie har lange ascenders/descenders har det brug for linje afstand.

44 Termer Udtryk Knibning/Kerning = Spatsering i mellem specifikke par af bogstaver /Tracking = Word adjustment of space for the hole body of text Leading = Line spacing, larger leading more readable

45 ExclusiveShape Typography Illustrations Color Masser af luft (Whitespace) Didot Professionelle Tegninger/illustrationer god kvalitet papir Sort og blå Fotos fra cd s Billigt Kedeligt Tæt og klemt tekst fyldt til kanten Cooperblack Clip art standard illustrationer Gule & stærke skrigende farver

46 Aesthetics /Æstetik A kind of sensing of symbolic shape, holds an interpretation of us and the world, to communicate to and from and about feelings Gill Sans, 24 pkt. Æstetik er en sanselig symbolsk form, der rummer en fortolkning af os selv og verden, og som kan kommunikere fra, til og om følelser Helvetica, 24 pkt.

47 Never ever... ALDRIG brug store områder af tekst med FED, italic eller STORE BOGSTAVER (små områder er ok) Times New Roman or COMIC SANS... History about the font New York Times

48 Aesthetics /Æstetik Comic Sans designer Vincent Connare agree that his infamous creation isn't quite the best match for particle physics announcements. NO COMIC SANS Shocking revelation to come out of CERN's Higgs boson announcement was quite unrelated to the science itself.

49

50 Målgruppen for typografi 1. Distance/afstand 2. Oplysning 3. Kontrast 4. Exponerings tid 5. Placing

51 Helvetica A neutral typeface, in that it takes on the mood and attitude of its surroundings. Helvetica could be argued to be the most versatile typeface out there. It s literally suitable for virtually any kind of design application, and looks good at both large and small sizes by Max Miedinger with Eduard Hoffmann at the Haas'sche Schriftgiesserei

52 Most common FUTURA Futura er en meget popular skrift familie Brugt til logoer, kommercielle produkter, film og reklamer Futura was designed by Paul Renner in It is based on geometric shapes that became representative visual elements of the Bauhaus design style of Futura was commercially released in The family was originally published in Light, Medium, Bold, and Bold Oblique fonts in 1928.

53 Myriad is a humanist sans-serif typeface created specifically for Adobe Systems by Robert Slimbach and Carol Twombly. It s easily distinguishable from other sans-serif fonts because of its special y descender and slanting e cut.

54 Clarendon Clarendon er en slab-serif typeface, og er fastslået til at være to den først registerede skriftfamilie. Designet af Robert Besley for The Fann Street Foundry i Senere kopieret meget. Slab-serif: also called mechanistic, square serif or Egyptian) typeface is a type of serif typeface characterized by thick, block-like serifs. Serif terminals may be either blunt and angular (Rockwell), or rounded (Courier).

55 Mest brugte Times New Roman Er en serif type skriftfamilie Ehvervet af den britiske avis The Times i 1931 Designet af Stanley Morison & Victor Lardent Morison superviserede og Victor Lardent tegnede, (en illustrator fra reklame afdelingen af The Times). Morison brugte fonten Plantin, som basis for hans design, men lavede rettelser for læsbarhed og økonomisering af pladsen Morison's nye udgave blev til Times New Roman og havde dens debut d. 3. Oktober 1932 udgaven af The Times avisen - brugt i over 40 år

56 Xavier Dupree

57 Gestalt Student work

58 Anti-aliased Bitmap Image From Photoshop (also called Raster) Smooth Vector Image From Illustrator The larger you display a bitmap, the more jagged it appears, while a vector image remains smooth at any size. That is why PostScript and TrueType fonts always appear smooth - they are vector-based. Live Trace in Illustrator will allow you to convert photographs and other raster graphics into Vector graphics!

59 Terms Baseline: The line on which all letters rest. Beardline: The line reached by the descenders of lowercase letters. Bowl: The round or elliptical parts of a letterform. Cap line: The line reached by the top of uppercase letters. Counter: The white space enclosed by a letterform, whether completely or partially. Extenders: Extenders are the parts of letters that extend either below the baseline (descenders) or above the midline (ascenders). Midline: The top of lowercase letters such as a, c, e and lowercase letters such as b, d. Serif: A stroke added to either the beginning or end of one of the main strokes of a letter. Stem: The main stroke of a letter that is generally straight and not part of a bowl. Topline: The line reached by the ascenders of lowercase letters. X-height: The distance between the baseline and midline of an alphabet. The x-height is usually the height of the unextended lowercase letters.

60 Terms Antique: French name for Grotesque fonts Latin: Fonts who are pointy & sharp with triangular serifs Linotype: German supplier of graphical equitment ex. Didot Modern: UK/US name for style called new classicism Monoline: fonts who consists of same stroke size Monotype: UK/US graphical supplier, started in 1888, - some of the most popular fonts used like: Times New Roman, Plantin, Gill Sans etc. Oblique: All italic, but in an original true form Open: Only contour, no filling Stencil: Used for templates to SPRAYPAINT Serif: Font who has feet, is called serifs

61

62 Lostfonts

63 Hjemmeopgave: Web/poster layout for Greenpeace - only DESIGN Design et web layout for Greenpeace. Du må kun bruge typografi eller vector grafik. Ingen fotos, men visuelt må du gerne vise former og objekter Headlines: Antarktis smelter og er under fare pga. olieboringer og industrial fiskning. You can Save The Arctic skal indgå! Farver: Format: Afsender: Ubegrænset Webpage layout eller til en A2 poster Greenpeace - HUSK LOGO!!!! andre farver kan bruges NO PHOTOS only typogingen fotos!

64

65 Links for Typography Links for Tutorial