Typography: noter fra undervisning og forberedelsesmateriale

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:

  1. Det skal være læseligt.
  2. 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.
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%; }

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.

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:

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.