Typografi
Typografi er et designsprog, som består af skrifttyper.
En skrifttype (eller bare skrift) er et bestemt design af tegnene i et alfabet; en variation af bogstavernes form og farve.
Skrifttyper udgør familier af skriftsnit (på engelsk font). Skriftsnit er varianter af en skrifttype, f.eks. kursiv.
I daglig tale bruges ordene "font", "skriftsnit" og "skrifttype" som om, de betyder det samme.
I dette kapitel forklares en række fagtermer, som hører til den typografiske verden. Sidst i kapitlet får du et par tips til, hvordan man bruger skrifttyper i designprocessen og hvordan man bruger typografi på WWW.
Skrifttyper
Der findes en række overordnede grupper af skrifttyper:
Proportional- og monospatieret skrift
Bogstaverne i en proportional skrifttype har en bredde, som varierer alt efter om bogstaverne skal se smalle eller brede ud. F.eks. er iii lidt smallere end xxx.
Det meste af den tekst I læser til hverdag, er sat med en proportional skrifttype.
En monospatieret skrifttype (på engelsk monospace) er en skrifttype, hvor alle bogstaver har samme bredde.
Monospatieret skrift bruges ofte i tabeller eller til visning af programkode.
Bogstaverne iii har samme bredde som bogstaverne xxx.
Antikva
Antikvaskrifter (på engelsk roman eller serif) er bogstaver med seriffer. Seriffer er små "vinger" på endepunkterne af bogstavet. Antikvaskrifter er inspireret af romerske (som i Romerriget) bogstaver.
Grotesk
En grotesk skrift (på engelsk sans-serif) er en skrifttype uden seriffer. Grotesker fremstår ofte mere moderne end antikvaer, og de bruges som regel i grafiske brugergrænseflader.
Titelskrift
Ekspressive skrifttyper, som er beregnet på overskrifter og titler, kaldes for titelskrifter (på engelsk display type).
Der findes andre ekspressive skrifttyper som f.eks. skriveskrift (typer som ligner håndskrift eller kalligrafi).
Dingbats og Emoji-skrifttyper 🤪
🙛 Skrifttyper forbindes normalt med bogstaverne i et alfabet, men skrifttyper indeholder også symboler, som ikke er bogstaver 🙙
Dingbats er symboler, der anvendes som typografisk dekoration. Man kalder dem også for piktogrammer.
Emojis er også piktogrammer, som ikke kun bruges til dekoration, men også til at udtrykke sig hurtigt når man sender beskeder på mobiltelefonen 🤳
Kromatiske skrifttyper
En kromatisk skrifttype er en flerfarvet skrifttype.
Denne form for skrifttype ser man ikke så tit, men den findes og den bliver stadig mere almindelig.
Et eksempel på en flerfarvet skrifttype er Noto Color Emoji. 😂❤️😍🤣😊🥺🙏💕
Du kan skifte farvetemaet på emoji'erne ved at bruge CSS-egenskaberne font-palette og font-palette-values. Se MDN for vejledning.
Skriftvarianter
Hver skrifttype har en række forskellige varianter:
Små bogstaver
Små bogstaver (på engelsk lowercase) kaldes også for minuskler.
Store bogstaver
Store bogstaver (på engelsk uppercase) kaldes også majuskler eller versaller.
Kapitæler
En kapitæl (på engelsk small caps) er et stort bogstav, som har samme højde som en minuskel.
Skrå skrift
Skrå skrift (på engelsk oblique) er en skrå udgave af en almindelig skrifttype.
På dansk kalder man de skrå skriftsnit for kursiv, selvom kursiv egentligt betegner sammenhængende håndskrift (skråskrift).
På engelsk kalder man også de skrå skriftsnit for italic, selvom italic egentligt er en variant af de almindelige skrifttyper, som ikke kun er skrå, men som ligner skriveskrift lidt.
Fed skrift
Fed skrift (på engelsk bold) er en tykkere udgave af en almindelig skrifttype.
Hvordan bruger man typografi som et designsprog?
Typografi handler om teknikken bag fremstillinger af trykt tekst. Terminologien inden for typografi er udviklet sammen med bogtrykkerkunsten.
En typograf udvælger skrifttyper, skriftstørrelser, bestemmer sig for linjeafstande, marginer, indrykninger og andre faktorer, som i deres helhed giver læseren et bestemt indtryk.
Typografi er både funktionelt og æstetisk orienteret. Teksten skal fremstå tiltalende, og den skal kunne læses uden alt for meget besvær.
Tekst i et dokument har forskellige roller. Eksempelvis spiller en overskrift en anden rolle end brødteksten.
Hvis man giver hver rolle sin egen skrifttype, forstærker man både kommunikationen af dokumentets struktur og tekstens æstetiske appel.
Valget af designsprog, når virksomheden skal kommunikere sine værditilbud til markedet, afhænger af markedsføringsmediet. Hvis virksomheden skal markedsføre sig på WWW, kan de trykte bogstaver være et vigtigt "ordforråd".
Hvordan bruger man typografi på WWW?
Det er forskelligt fra enhed til enhed, hvilke skrifttyper som er installeret.
Når man angiver et skrifttypenavn i CSS, så virker det måske på ens egen computer, men der er ingen garanti for, at skrifttypen findes på andre brugeres enheder.
Og skrifttyper følger ikke automatisk med, når man skriver HTML og CSS.
Når man anvender fancy skrifttyper på WWW, så skal man enten indlejre skrifttypen i HTML-koden ved hjælp af CSS eller vælge en skrifttype, som man ved, er installeret på brugerens computer.
Der findes en række skrifttyper, som har været udbredt siden tidernes morgen og som derfor med høj sandsynlighed findes på alle computere. Det er de gamle og kedelige skrifttyper:
ArialVerdanaTahomaTrebuchet MS
Når man koder CSS, kan man angive skrifttyperne som en liste af alternativer:
body {
font-family: "Lucida Grande", "Segoe UI", sans-serif;
}
Browseren vælger så den første skrifttype fra listen, som er installeret.
Hvis brugerens anvender en Apple-enhed, vil browseren vise tekst med Lucida Grande og hvis brugeren anvender Windows, vil browseren med høj sendsynlighed vise tekst med Segoe UI og ellers vil browseren som sidste mulighed vælge en eller anden grotesk skrifttype.
Der findes mange websites, hvor man kan downloade skrifttyper gratis i forskellige formater, for eksempel .ttf og .otf.
For at indlejre skrifttyper på et website anvender man en @font-face erklæring i websitets CSS-kode.
Informationssøgning
Butterick's Practical Typography https://practicaltypography.com/
Google Fonts https://fonts.google.com/
Pictogrammers https://pictogrammers.com/
Emojipedia https://emojipedia.org/
Modern Font Stacks https://modernfontstacks.com