1. No category

italic
Serif
Introduction to typography
Introduction to typography
Introduction to typography
Bold
Introduction to typography
Introduction to typography
Introduction to typography
Light Italic
Regular
Condensed Bold
Type
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
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
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.1765-1122BC) is a kind of
Chinese characters similar to
drawings.
After the first emperor of the Qin Dynasty
(221-207BC) unified China, he unified Chinese
characters and formed Xiaozhuan
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. - 1050 A.C.
Lidt historie
Calligraphy (fra Græsk κάλλος kallos "skønhed" + γραφή graphẽ "skrivning") - er en visuel kunstart
Kalligraphi
Udviklingen
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
Den Trojanske søjle
Det Latinske alfabet
- også kaldet det Romerske alfabet
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
Capitals Rustica
Irsk halvunicial
Fra (Blokbogstav) majuskler til
minuskler
Unicial
Carolingian minuskel
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”
A little history
Johan Gutenberg
Gutenberg (1390 - 1468), 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).
Leonardo da Vinci
(1452 – 1519)
The Art of Calligraphy
Leonardo Da Vinci (1452 – 1519)
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. Claude Garamond
(1480-1561),
fransk stempelskærer og skriftstøber, virkede
i Paris fra 1515.
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
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
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
Examples: Futura, Helvetica, Univers, Trebuchet, Tahoma, Arial
Script
Resembles
handwriting
Slants to the right
Letterforms are joined
“grotesque”
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
45-65 characters (including spaces) (screen)
7 pkt. -10 pkt. smallest
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
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)
Læselig eller læsbar
Læsbarhed/Readability
måles hvor nemt/svært det er at se forskel bogstaverne
Readability versus Legibility
Læselighed/Legibility hvor meget har man lyst
til at læse det
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
Læsbarhed
Linje længde:
40-65 bogstaver (incl. komma på skærmen)
Brød/Body tekst print:
Ikke mindre end 7-8 pkt.
Brød/Body tekst skærm:
Ikke mindre end 10 pkt.
Copyright tekst:
Eneste mindre tekst, er 4-8 pkt
©
®
Læsbarhed børn
Kim Pedersen & Anders Kidmose the Graphic College of Denmark
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
Konklusion: både sans og sans serif er brugbare
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
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 www.dafont.com
Target group - who is it for? Adults / kids/ businessmen / another culture
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
Fonte/Typefaces
Type
Bredde
Type type type type type type
W i d t h width w i d t h
Posture Posture posture
Posture (expression)
Vægt
Weight WEIGHT Weight
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
Bogstav Anatomi
ASCENT LINE
CAP LINE
MEAN LINE
BASELINE
DESCENT LINE
CAP
HEIGHT
X-HEIGHT
Ligaturer
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
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
Alignment/Flugtning
Bogstavernes hældning
Regler
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 600 - 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
TEST inden eksamen i forskellige browsere
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
Overskrifter testes
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)
I en
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.
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
Exclusive
Shape
Masser af luft
(Whitespace)
god
kvalitet papir
Typography
Illustrations
Didot
Professionelle
Tegninger/illustrationer
Color
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
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.
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....
http://idsgn.org/posts/know-your-type-cheltenham/
History about the font New York Times
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. Målgruppen for typografi
1. Distance/afstand
2. Oplysning
3. Kontrast
4. Exponerings tid
5. Placing
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.
1957 by Max Miedinger with Eduard Hoffmann at the Haas'sche Schriftgiesserei
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 1927. It is
based on geometric shapes that became
representative visual elements of the Bauhaus design
style of 1919–1933. Futura was commercially released
in 1927.
The family was originally published in Light, Medium,
Bold, and Bold Oblique fonts in 1928.
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.
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 1845. 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).
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
Xavier Dupree
Gestalt
“Student work”
Anti-aliased Bitmap Image
Smooth Vector Image
From Photoshop (also called Raster) 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!
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.
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
Lostfonts
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:
Ubegrænset
Format:
Webpage layout eller til en A2 poster
Afsender:
Greenpeace - HUSK LOGO!!!! andre farver kan bruges
NO PHOTOS only typogingen fotos!
Links for Typography
http://www.artdesignschools.com/careers/top-20-most-influential-fonts-in-graphic-design/
http://ilovetypography.com
http://www.youtube.com/watch?v=Ki6rcXvUWP0
http://www.webdesignerwall.com/general/brief-history-of-western-typography/
http://typekit.com/gallery
http://www.kathymarks.com/archives/2006/11/best_fonts_for_the_web_1.html
Links for Tutorial
http://blog.spoongraphics.co.uk/tutorials/how-to-create-typography-illustrations-the-easy-way