Noter om typografi. Noter taget i sommer 2019 på Multimediedesigner, MMD. Undervisning afholdt af Andrea Cirone Nørregaard.
Som forberedelse læste vi Typography sektionen/kapitlet fra https://designingfortheweb.co.uk.
Historie
Det første typograhy lignede materiale var huletegnigner i stenalderen.
Det næste store fremskridt var hieroglyffer. Det var svært at forstå, for betydningen af bestemte tegn og sammensætninger kunne ændre sig baseret på geografiske områder.
Symbolik
Symboler er universelt forståeligt i koncept.
De tidlige alfabeter bestod af flere tegn der kunne sammensættes. Et tidligt alfabetet opstod fra dette i grækenland. Alfabetet opstod herfra i Rom. Vi anvender en variation deraf i Danmark.
Manuskripter
Manuskripter blev skrevet af munker, oftest i religiøse sammenhænge. De var skrevet i hånden og betragtet som skatte. Manuskripter var tidskrævende at producere (14-20 dage at skrive en side).
Tidligt print
De tidlige printere tog kun få dage at opsætte, og kun timer at printe og få dage at sammensætte, hvilket åbnede muligheden for print der ikke var religiøs, da print-processen blev meget hurtigere.
Printerne bestod af blokke der blev dyppet i blæk og derefter presset på papiret. Efterfølgende blev det bundet sammen.
Typografi
Typografi er en afgørende del af at sende et budskab.
Hvorfor man bør leje med fonte:
- Det skal være læseligt.
- At tilføje noget extra.
Tekst skal være forståeligt. Det kan give værdi hvis man laver noget interessant med det.
Tegnene er så kendte hos os, at vi ikke behøver at se det hele for at genkende det.
Ved at blande fonter kan man skabe kontrast.
Fonter kan kommunikere tone of voice (stemning). Det kan påvirke perception/associationer. Man kan lide og hade individuelle typefaces (skrifttyper).
Skriftstørrelser er vigtige, og bør ikke være for store eller for små.
Vigtige udtryk
- Sans-serif – uden kanter eller fødder. Der er typisk samme afstand mellem tegn.
- Serif – Med kanter eller fødder. Det lader tekst flyde sammen og før det lettere at læse.
- Typeface – Font familie.
- Font – Skrifttype.
- Characters – Bogstaver.
- Uppercase – STOR SKRIFT.
- Lowercase – lille skrift.
- Script fonts – Dekorativ tekst der ser ud til at være håndskrevet. De er svære at læse i brødtekst. Det er godt til overskrifter. Deres hovedformål er at give et budskab (noget extra).
- Novelty and decorative fonts – De er dekorative og giver et budskab. Modsat script fonts så ligner de ikke håndskrift.
- Headline – Overskrift
- Block text – brødtekst/læseafsnit (tekst i store sektioner)
- Regular – Normal skrift tykkelse
- Light – Tynd skrift tykkelse
- Bold – Fed skift tykkelse
- Leading – Afstand mellem linjer i skrift. Man anvender normalt points til at bestemme afstanden. På hjemmesider bestemmer man det oftest i pixels ved hjælp af line-height. Nogen gange padding eller margin. Teknisk set kan man også bruge positioning.
- Kerning – Afstanden mellem specifikke bogtaver i et ord.
- Tracking – Afstanden mellem bogtaver i et ord.
- Legibility – Læsbarhed.
- Rivers – Dårlig afstandstyring mellem ord kan give fornemmelsen af at der opstår bække (eng: rivers). Det kan være svært at se når man står tæt på.
- Orphan – En kort linje af tekst, eller et enkelt ord, der står øverst i en kolonne. Det opstår ved sætninger der afsluttes på næste side.
- Widow – en kort linje, eller enkelt ord, af tekst der afsluttes i bunden i en sætning. Det er på samme side som den øvrige tekst, i modsætning til orphan.
- Dark pattern – En måde at styre folks opmærksomhed med dårlige designregler. Man bør undgå disse, men de kan være nyttige.
Legibility
Centrering
Fordele ved centrering – Ligesom med højre og venstre sidestilling, en designer kan styre afstanden mellem bogstaver.
Ulemper ved centrering – Det kan være svært at finde start og slut i en sætning, når man ikke kan finde starten af linjer til venstre, pga. manglende alignment.
Justify
Fordele ved justify – Det kan give indtrykket af at være uniform og klart. Det giver et kasse design.
Ulemper ved justify – Det er svært at styre afstanden mellem ord.
Forberedelsesmateriale noter
Der var nogle elementer fra forberedelsesmaterialet jeg mener kunne være særdeles brugbart, der ikke blev dækket i undervisningen. Jeg har derfor valgt at opdatere indlægget med denne information. Der er flere brugbare ting, men jeg vælger at fokusere på hvad jeg personligt mener er vigtigt.
Vigtige udtryk
- X–height (ex) – højden af et lille x i en font. Man bruger denne som en højde reference.
- Stress – skævhed. Altså hældningen på en font.
- Weight – Tykkelsen. F.eks. Bold eller Light.
- Millimetres (mm) – Et defineret mål. Brugt til bl.a. print design.
- Pixels (px) – En pixel, brugt til bl.a. at definere højde på fonte i CSS.
Hierarkisk design
Fonte har et klassisk hierarki, der er blevet brugt over 400 år. De blev listet som følgende:
6pt: nonpareil
7pt: minion
8pt: brevier or small text
9pt: bourgeois or galliard
10pt: long primer or garamond
11pt: small pica or philosophy
12pt: pica
14pt: english or augustin
18pt: great primer
21pt: double small pica or double pica
24pt: double pica or two–line pica
36pt: double great primer or 2–line great primer
https://designingfortheweb.co.uk/part3/chapter13/
De bruges ikke så meget i nyere design. Designere vælger oftest størrelser som de lyster.
Skriftstørrelser på internettet
Til hjemmesider definerer man oftest skriftstørrelser i CSS. Man kan definere størrelser på mange parametre. I browsere er alting rendered med pixels, hvilket giver det mest nøjagtige mål. Forskellige browsere og styresystemer differentierer dog stadig mellem visningen og størrelser på tegnene.
11px / 16.5px – Body copy and leading.
Et udsnit fra https://designingfortheweb.co.uk/part3/chapter13/ . Dette udsnit definerer en måde at lave et harmonisk design, baseret på Gergia-fonten i skriftstørrelse 11px som reference. Det sker ved at definere størrelserne med udgangspunkt i det hierarkiske skriftsystem beskrevet tidligere.
24px – Main heading used as section headings on the home page, portfolio home page and entries.
18px – Headings for journal entries and portfolio subheadings.
16px – All navigational and content tertiary headings.
13px – All other headed elements.
This would give me the following styles visually:
These translate in the following way in CSS, using percentages for scaling purposes, basing the scaling from an 11px base size.
11px / 1.5em – Body copy and leading.
218% – Main heading used as section headings on the home page, portfolio home page and entries.
164% – Headings for journal entries and portfolio subheadings.
145% – All navigational and content tertiary headings.
118% – All other headed elements.
So, within my CSS file, it looks like this:body { font: 11px/1.5em "Georgia"; } h1, h2, h3, h4, h5, h6 { font-family: georgia, times, sans-serif; font-weight: normal; } h1 { font-size: 218%; } h2 { font-size: 164%; } h3 { font-size: 145%; } h4 { font-size: 118%; }
Web print-design
Ofte ikke så højt prioriteret, så er print til websider noget man kan, og ofte bør designe. Siderne har en rimelig defineret brede, og bør kunne indeholde de samme elementer. Skriftstørrelser bør også defineres i pt frem for px. Brødtekst bør ikke være større end 12pt.
Materiale
Vi spillede eller fik foreslået at spille:
- “Who shot the serif” via designbreak.io.
- “Kern me” via type.method.me.
Man kan finde gratis fonter til ukomerciel brug på dafont.com. Enkelte fonter kan have egne regler.
Man kan finde gratis web fonts fonts.google.com.