Mikael Becker, Mittuniversitetet 2005

Transcription

Skärmtypografi
Mikael Becker, Mittuniversitetet 2005
Introduktion
Detta häfte är gjort med i huvudsak Georgia. Gjort av Matthew Carter för Microsofts räkning (det
bästa Microsoft har gjort i mitt tycke).
Georgia är egentligen lite för stor och klumpig för att göra sig riktigt bra på papper. Men ämnet
är som sagt skärmtypografi och då är Georgia ett av de bästa typsnitten man kan välja. För papper
är t.ex. Caslon och Garamond både vackrare och mer funktionsdugliga. Och möjligheterna till
typografiskt finlir är betydligt större, gemena siffror, anfanger, äkta kapitäler, ligaturer, typsnittet i
olika varianter och tyngder.
Varning! Detta är bara en pytteliten introduktion i ämnet. Det finns rejält med referenslitteratur på
slutet. Eller varför inte läsa några av våra kurser på MKV, www.miun.se/itm/mkv. Titta efter våra
kurser i grafisk design. Grundkursen typografi och form. Kursen avancerad typografi är tyvärr bara
öppen för de som läser hela programmet.
Observera att typsnitten inte kommer till sin fulla rätt här. Skärmtypografi ska studeras på
skärm och inte på papper. Ett typsnitt som är bra för skärm behöver inte vara bra för papper och
vice versa.
Mikael Becker
Sundsvall hösten 2005
Kurser i grafisk design på avdelningen
MKV 2004
Typografi och form
Tidningsdesign
Digital bildhantering
Reklam och kommunikation
Webbdesign
Avancerad typografi
Grafiskt projekt
Arbetsplatsförlagt projekt
Funktionell design
Dagspressredigering I
Dagspressredigering II
Grafisk design och profil
Grafisk design, inriktning tidningsdesign 10p
distans
Medie- och kommunikationsvetenskap
Interpersonell kommunikation
Organisation och kommunikation
Masskommunikation
Massmedier och rätt
Interkulturell kommunikation
Strategisk kommunikation
Politisk kommunikation
Journalistik
TV-produktion
Journalistik och webbpublicering
Dynamisk webbpublicering
Övrigt
Berättarformer i media
Följande typsnitt följer med Internet Explorer från och med Windows 98 och Mac OS 8.6. Alltså
nära 100% av alla användare. Naturligtvis finns det fler typsnitt som följer med tex Office-paketet
eller Windows. Men där finns så många varianter och det är ju färre som använder Office än som
surfar med Internet Explorer.
Man kan givetvis använda andra typsnitt men om användaren inte har just det typsnittet
installerat så ersätts det oftast av det standardtypsnitt som finns angivet i webbläsaren. Så om man
vill använda något annat så spara det som grafik.
Eller så måste man förmå användaren att ladda hem typsnittet och installera det. Det har börjat
komma tekniker för att automatiskt ladda ned typsnitt men då kommer nog brandväggar och
virusprogram att gå igång. Eller mer vana användare som själva vill bestämma vad som ska laddas
ner och installeras.
Sist men inte minst, tex Garamond som är ett av de bästa typsnitten genom tiderna finns i 3040 olika varianter, Adobe Garamond, Stempel Garamond ... Det är så gott som omöjligt att veta
vad användaren har för variant. Och i stilmallen måste man ange det exakta namnet.
Glöm inte upphovsrätten (bra typsnitt är inte gratis) och att många gratistypsnitt saknar å, ä, ö
och andra europeiska specialtecken.
Mikael Becker, Mittuniversitetet
Andale Mono*
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
* hette tidigare Monotype.com
Linjär (skrivmaskin)
Linjär
Linjär
Handstil, fantasi
Skrivmaskin
Seriff
Linjär
Seriff
Linjär
Linjär
abcdefghijklmnopqrstuvwxyzåäö1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
Se till att använda rätt specialtecken, det skiljer amatören från proffset.
De vanligaste som följer med de flesta typsnitt. Äldre varianter av typsnitten saknar oftast eurotecknet.
. , : ; … · „ ? ¿ ! " ” ´`´ ` ¨^~^ ' ’ ˙ ‹ › ‘ ’ ¸ ˛ « » “ ” ¯ ˘ ˚ ˆ ˜ ˝ ˇ
() [] {} < > ≤ ≥
§°¶•¡©@#£¥€$¢%∞‰&/|\*™
Ω é ® † µ ü ı œ ¹ ð ß ∂ ƒ √ ª fi ø æ ÷ ≈ ç
° É √ ‡ Ü Œ ∏◊ ∑ ∆ ∫ ¬ º fl Ø Æ ⁄ Ç
S.k. dingbats finns i typsnittet Webdings
Ett smakprov: qwertyuiopsdfghjklÕ<m
Inställningar
Börja med att bekanta dig med
inställningarna i din webbläsare. Detta är
ett exempel på Internet Explorer 5 för
Mac men de flesta webbläsare har
liknande inställningar.
Typsnitt och storlek
Standard för PC är 16 punkter som
textstorlek och 96 dpi som skärmupplösning.
Och sedan kan jag ange vilka typsnitt
som jag tycker ska gälla. Men om
webbplatsen jag surfar på har en stilmall
så kommer den att gälla.
Att 12 punkter resp 72 dpi är typografiskt
mer korrekt är inget som Microsoft eller
den vanlige surfaren bryr sig om.
I teorin så ska 16-96 och 12-72 ge
samma resultat men i praktiken så blir
text oftast något större på PC.
Varning! Utvecklar ni er webbplats i
PC-miljö så blir texten ca 20% mindre för
Mac-användarna, vilket kan göra liten
text oläslig.
Webbinnehåll
Jag som användare kan bestämma färg på
text, bakgrund och länkar. Samma sak
här, finns det en stilmall för webbplatsen
så kommer den att gälla.
Jag som användare kan också ange en
egen stilmall. Lägger jag till attributet
!important så kommer min stilmall att
ersätta den som finns på webbplatsen.
Colorsync är en teknik för att få färger
att se likadana ut i olika miljöer. Men
standardinställningen är att den rutan
inte är kryssad.
Viktigt! Du måste kontrollera din
webbplats i olika miljöer. Äldre windowsvarianter, Mac, Unix, Linux. Olika
webbläsare, även äldre versioner.
Kriterier för god läsbarhet
God typografi, förutom att skriva bra och
intressant.
Val av typsnitt. Storlek och radavstånd.
Radlängd och justering. Spalter och marginaler.
Färg/nyans på text och bakgrund.
Användningsområde, som lång löpande text
eller kortare rubriker.
Serifftypsnitt är den familj av typsnitt som är
mest lättläst. I alla fall så länge vi pratar om
papper. För skärm anses linjärer vara bäst. Men
en svensk undersökning har visat att Georgia,
seriff, kan vara mer lättläst än Verdana, linjär.
Kanske är det viktigare att välja ett typsnitt
som är konstruerat för skärmbruk än vilken
familj typsnittet kommer från.
Georgia och Verdana skapades av Matthew
Carter för Microsoft i mitten av 90-talet just för
att de skulle vara lätta att läsa på skärm.
Använd normal stil för brödtext. Använd max
tre typsnitt och de ska inte komma från samma
familj. Det är ingen bra idé att blanda två
typsnitt som är nästan lika, tex Verdana och
Trebuchet, eller Georgia och Times. Välj
typsnitt som är rejält olika varandra, kontrast.
Tex Verdana och Georgia passar bra ihop eller
Arial och Times.
För att märka ut särskilda stycken så använd
fet stil eller kursiv. Men använd dessa sparsamt,
de blir jobbiga att läsa om man ska läsa längre
textstycken.
Skuggad, outline osv är strängeligen
förbjudet. Text ska inte vara understruken,
möjligtvis kursiv. Längre tillbaka i tiden
betydde understruken maskinskriven text att
texten skulle vara kursiv i boken/tidningen.
Detta är oläsbart:
Snälla söta rara gör inte som det
här exemplet.
Storlek
Brödtext, 8.5 - 9.5 punkter är det vanligaste i
tidningar och magasin. Men så smått kan vi inte
ha texten för skärmbruk. Tumregeln är två
punkter större. Så om typsnittet ni valt fungerar
bra i 10 punkter på papper så krävs förmodligen
12 punkters storlek för skärmbruk.
För papper är tumregeln för radavstånd,
bokstavsstorleken plus två punkter. För skärm
behövs ofta ytterligare en eller två punkter.
Storlek och radavstånd skrivs som 9/11, 10/13
osv. Den första siffran anger storleken och den
andra radavståndet. Uttalas nio på elva.
Radavståndet får absolut inte vara negativt,
alltså att radavståndet är lika med eller mindre
än storleken. Då kommer tex Å, Ä och Ö att
snudda vid g, j och y.
Radlängd
För papper är tumregeln att varje textrad ska
vara 45-65 tecken lång. Som tecken räknas
också mellanslag, punkt, komma osv. Idealet är
då 55 tecken per rad.
För skärm så ska raderna vara kortare. Den här
texten har textrader på ca 50-55 tecken.
För skärmbruk så ska raderna naturligtvis
vara något kortare, säg max 55 tecken.
Desto längre textrader, desto större radavstånd krävs.
I böcker och tidningar används oftast
marginaljusterad text, alltså att både vänsteroch högerkant av texten är jämn. En del
magasin har valt att använda vänsterställd text,
precis som jag har valt i den här texten.
Med marginaljusterad text så måste en del
ord avstavas, annars blir ordmellanrummen
alldeles för stora eller för små. Vänsterjusterad
text kräver inga avstavningar, ordmellanrummen är alltid desamma men den högra
marginalen blir naturligtvis ojämn.
För webb så har vi just inget val eftersom
ingen webbläsare ännu kan avstava ord korrekt.
Då blir det bara vänsterjusterad text kvar.
Centrerad text är bara lämpligt för kortare
texter, max 5-6 rader. Och högerjusterad text
används ännu mer sparsamt.
Spalter
Används alltid i tidningar och magasin. Men
sparsamt för skärmbruk. Helt enkelt för att det
är för jobbigt att scrolla upp och ner. Texter i
spalter kan också vara svårt för en blind person
eftersom alla webbläsare inte läser texten spalt
för spalt utan rad för rad.
Goda marginaler är alltid bra att ha. Olika
objekt får inte komma för nära varandra. Saker
som hör ihop ska vara närmre varandra än
saker som inte hör ihop. Tex så ska en
mellanrubrik vara närmre texten under än
texten ovanför.
Färg
Använd färg sparsamt. Det viktigaste är att text
och bakgrund har stor kontrast. Störst kontrast
har naturligtvis svart och vitt. En del tycker att
en helt vit skärmbakgrund kan vara jobbig att
titta på. Så en svagt gultonad eller gräddfärgad
bakgrund kan vara effektivt. Undvik bilder och
mönstrade bakgrunder. Starkt färgade bakgrunder är naturligtvis inte heller bra. Och så
har vi ju dom som är färgblinda, vanligast är väl
rött och grönt.
Nytt stycke ska markeras med blankrad eller
indrag. Inte både och. Vanligast för skärm är
radbrytningar men det börjar komma alltmer
med indrag. Indrag på papper brukar vara lika
stort som radavståndet. Ibland kan jag tycka att
det blir något litet för webb, förmodligen för att
många har för kort radavstånd.
Mer om typsnitt och typografi
Karakteristiskt för bra typsnitt för skärm är att
de är något bredare än typsnitt för papper. Den
inre ringen i tex ”o” ska vara extra stor.
Hur brett är det här typsnittet. Times.
Hur brett är det här typsnittet? Georgia.
Times Georgia
Och att den sk x-höjden, höjden av asvceoxnm
är större för bra skärmtypsnitt.
Däremot så ju höjden för versalerna densamma.
TIMES GEORGIA
Typsnitt beskrivs fortfarande i punkter. En
kvarleva från blytiden. Måttet går från toppen
av Å till botten av g. De ska ju få plats på
samma ”grundmall”, blytyp.
Skiljetecken
Se till att använda korrekt skiljetecken och
liknande. Citat ska tex inte göras med ´´, shift +
2 ger tumtecken och inte tecknen för citat. I alla
fall på en Mac så finner man korrekta
citattecken genom att trycka shift + alt + 2, ”.
Citat kan också göras med ”gåsfötter” »citat«
Observera att olika språk har olika traditioner
vad gäller tex citat och andra skiljtecken.
- Detta är ett bindestreck och det ska inte
förväxlas med – som är ett talstreck. Talstreck
fås genom att trycka alt + -.
- Det kortaste strecket är bindestreck.
– Det i mitten svenskt talstreck.
— Och det längre är amerikanskt bindestreck,
de ska väl alltid vara värst.
Vissa typsnitt skiljer även mellan
minustecken och bindestreck, men många gör
ingen skillnad.
Några klassiska exempel:
bil-drulle, bild-rulle
Benådas ej, hängas
Benådas, ej hängas
Parkera ej, utfart
Parkera, ej utfart
D
etta är en så kallad anfang. Anfang
kommer från tyskan som betyder
början. En tradition från medeltiden
när man inte kunde använda bilder i samma
utsträckning som vi kan göra nu. Vackra
bokstäver fick då ersätta bilderna.
       
     .
De används ofta som inledning på ett nytt
kapitel eller likande. De ska inte förväxlas med
förkrympta versaler. Äkta kapitäler är något
bredare/fetare än vanliga versaler för att vara
lättare att läsa i små storlekar. VERSALER,
gemener
 FALSKA
Gemena siffror eller medieval siffror är bäst för
löpande text. Tex årtal, 1632, 1939.
Versala siffror eller tabellsifrror är bäst för
tabeller och formler, 1234567890
Om man har möjligheten så ska man välja
typsnitt som har en äkta kursiv stil. När man i
ett ordbehandlingsprogram trycker på knappen
för kursiv stil så får man ofta i själva verket ett
typsnitt som bara lutar. En äkta kursiv är ofta
mer handstilslik. Jämför tex k.
»Vi har fått ben för att ständigt vandra
och ögon för att se allt det vackra«
»Vi har fått ben för att ständigt
vandra och ögon för att se allt det
vackra«
Längre citat är lämpligare att markera
med ett indrag för hela stycket. Har man
för mycket text som är kursiv så blir det
svårt att läsa. Här har jag gjort ett vänster
indrag på 26 punkter. Radavståndet
gånger två.
Ta för vana att använda punkter eller ev pixlar
som mått vad gäller allt som har med text att
göra. Det finns knappast någon som använder
millimeter eller något annat mått.
Ibland pratar man om fyrkantsindrag i
början av ett stycke, alltså om textstorleken är
12 pt så ska indraget vara 12 pt.
Ordmellanrummet är ofta en halv fyrkant eller
en. Måttet em är lika med en fyrkant. En
fyrkant är lika stor som ”M” i den aktuella
textstorleken. En halv fyrkant betecknas en.
Amerikanska pica och points är något mindre
än de europeiska motsvarigheterna. Men det är
de som används för datorer. Tex att 72 points
blir en tum. Härifrån kommer regeln att bilder
på nätet ska vara i upplösningen 72 punkter per
tum, dpi. 12 points = 1 pica. 12 punkter blir en
cicero. En cicero är ca 4.5 mm. 18 cicero är 81
mm, som en kom-ihåg-grej. 12 points = 1 pica.
Quark Xpress (layout- och
redigeringsprogram) är förinställt på points och
pica vilket gör att standard spaltmellanrum är 1
pica 4.223 mm istället för 1 cicero 4.51 mm.
Telefon-, post- och banknummer bör delas upp
i lämpliga sjok. Tex 857 31 eller 060-14 88 12.
Man kan även justera avståndet mellan enskilda
tecken. Minska avståndet kallas för att knipa
eller kerna. Att öka avståndet spärra. I Quark
räknar man i 200-delar av en fyrkant.
Den här texten har jag spärrat tio 200delar.
Den här texten har jag knipit tio 200-delar.
Större rubriker bör justeras.
VOLVO
VOLVO
Cascading stylesheet, CSS, eller
stilmallar
Lämpligt när man bygger en större webbplats är
att använda en stilmall som man sedan
använder på alla sidor.
Jag brukar göra en extern stilmall som jag
sedan anropar från mitt HTML-dokument.
<link rel="stylesheet"
type="text/css"
href="min_stilmall.css">
Placeras mellan head-taggarna.
Så här kan koden se ut i en stilmall
body { font-size: 11pt; fontfamily: Georgia, Verdana,
"Trebuchet MS", serif; line-height:
16pt; text-align: left; }
Body talar om att den här stilen ska användas
för all vanlig text, brödtext. En del använder p
istället för Body, går oftast lika bra.
font-size, inga konstigheter, storleken på
texten.
font-family, vilket typsnitt eller vilken
typsnittsfamilj. Om det första alternativet inte
finns så försöker man med det andra, sedan
tredje osv. Namn med mellanslag måste skrivas
inom citattecken, ”Trebuchet MS”.
line-height, radavstånd
text-align, justering av texten, i det här
fallet vänsterställd text.
Var noga med komma, semikolon, kolon,
mellanslag. Explorer är ganska förlåtande mot
felkodade dokument men varför slarva.
Man kan använda i stort sett vilka måttenheter
som helst, pt punkter, px pixlar, mm millimeter,
em fyrkant, en halv fyrkant, inch tum osv.
Så om jag vill att radavståndet ska vara dubbla
textstorleken så kan jag skriva 2 em istället för
22 pt.
h1 { color: rgb(70,70,70); fontweight: bold; font-size: 20pt;
line-height: 22pt; font-family:
Verdana, "Trebuchet MS", Arial,
Helvetica, sans-serif }
Här har man typograferat alla rubriker, h1.
Rubriken ska ha färgen rgb(70, 70, 70)
man kan också ange traditionella hexadecimala
värden eller tex blue, yellow osv.
font-weight, bold, alltså fet stil
text-decoration, none, underline,
användbart om inte vill att länkar ska vara
understrukna.
font-style, normal, italic (kursiv) osv
a, det utseende man vill ha på länkarna
a:visited, de länkar som man besökt
a:hover, hur länken ska se ut när markören
befinner sig vid länken
a:active, hur länken som just nu är aktiv ska
se ut
Man kan ha sina egna beteckningar på texten
t.ex.:
.mellis { color: #000000; fontstyle: italic; font-size: 13pt;
line-height: 10pt; font-family:
Verdana; }
Viktigt att tänka på är att börja namnet med
”.”. Och i HTML-dokumentet så måste man
skriva till <class=”mellis”>. Personligen
tycker jag att man ska försöka undvika detta så
långt som möjligt. Det behövs mer exakt
kodning och alla som är inblandade i projektet
måste veta exakt vad de ska göra annars har
man snart mycket justeringsjobb att göra. Så
håll er till de vanliga standard-koderna så långt
som möjligt. Tex h1 stor rubrik, h2 liten rubrik,
h3 underrubrik, h4 mellanrubrik, h5 bildtext,
h6 adress.
body { font-family: georgia, "times
new roman", serif; font-size: 11px;
line-height: 15px; }
p { font-family: georgia, "times
new roman", serif; font-size: 11px;
line-height: 15px; }
h1 { font-family: verdana,
"trebuchet ms", sans-serif; fontsize: 30px; line-height: 30px; }
"trebuchet ms", sans-serif; fontsize: 14px; line-height: 15px;
font-weight: bold; }
"trebuchet ms", sans-serif; font-
size: 12px; line-height: 15px;
font-style: italic; }
a { text-decoration: none; }
a:hoover { text-decoration:
underline; }
Andra användbara koder:
background-color, bakgrundsfärg
vertical-align, vertikal justering
width, bredd
height, höjd
text-indent, indrag
text-transform, tex uppercase
font-variant, tex small-caps, kapitäler
margin, marginal
top-margin, marginal uppåt
left-margin, right-margin
border-width, tex 4px
border-color, tex #cc77aa
border-style, tex dotted
Varning!
Använd inte attributet !important i
webbplatsens stilmall för då slår ni ut alla
möjligheter för användaren att påverka
typografin. Det kan göra er webbplats
oanvändbar för personer med dålig syn eller
annat funktionshinder.
Och mycket mycket mer.
Ett varningens finger. Alla stylesheetkoder
fungerar inte i alla webbläsare. Enda sättet att
vara säker är att testa. Exemplen ovan är från
CSS 1. CSS 2 har funnits ganska många år nu
men det finns ännu ingen webbläsare som
stödjer CSS 2 fullt ut.
W3C har en komplett genomgång av alla CSSelement. Om man tycker att det är lite torr och
tråkig läsning så kan jag rekommendera två
svenska webbplatser. Eva von Pepel och Jonas
webresurs. O’Reilly skriver bra databöcker.
www.w3.org
www.jonasweb.nu
www.zoon.se/ref/
Antikva (seriff )
garald (medieval- renässansantikva)
real (övergångsform)
didon (nyantikva)
Linjär (sans-seriff, grotesk)
Semilinjär
Mekan (egyptienne)
Gotisk stil
(fraktur, schwabach,
rotunda och textura)
Skript/skönskrift
Handstil/kalligrafistil
Fantasi extrem
Skrivmaskin och andra
TEXTFORMER TÄNKTA FÖR andra
medier
Andale Mono
Skapare Steven R. Matteson.
http://www.microsoft.com/typography/fonts/font.aspx?FID=11&FNAME=Andale%20Mono
Ett mellanting mellan en linjär och skrivmaskinsstil. Observera 0!
8/9
Where will I wander and wonder? Nobody knows, but
wherever I'm going I'll go in search of a Rose.
Whatever the will of the weather and whether it shines
or snows wherever I'm going I'll go in search of a
Rose I don't know where it's found but I don't mind as
long as the world spins around I'll take my time I'll
savour the softness of Summer I'll wrap up when Winter
blows and wherever I'm going I'll go in search of a
rose.
8/10
rose.
8/11
rose.
8/12
rose.
9/9
Where will I wander and wonder? Nobody knows,
but wherever I'm going I'll go in search of a
Rose. Whatever the will of the weather and
whether it shines or snows wherever I'm going
I'll go in search of a Rose I don't know where
it's found but I don't mind as long as the world
spins around I'll take my time I'll savour the
softness of Summer I'll wrap up when Winter
blows and wherever I'm going I'll go in search
of a rose.
9/10
of a rose.
9/11
of a rose.
9/12
of a rose.
10/11
Where will I wander and wonder? Nobody
knows, but wherever I'm going I'll go in
search of a Rose. Whatever the will of the
weather and whether it shines or snows
wherever I'm going I'll go in search of a
Rose I don't know where it's found but I
don't mind as long as the world spins
around I'll take my time I'll savour the
blows and wherever I'm going I'll go in
search of a rose.
10/12
search of a rose.
11/13
Arial
Skapad av Robin Nicholas and Patricia Saunders.
http://www.microsoft.com/typography/fonts/font.aspx?FID=8&FNAME=Arial
Originalet Helvetica var så bra och blev kopierat med några små justeringar och lanserades under nytt namn, Arial.
8/9
Where will I wander and wonder? Nobody knows, but wherever I'm going
I'll go in search of a Rose. Whatever the will of the weather and whether it
shines or snows wherever I'm going I'll go in search of a Rose I don't
know where it's found but I don't mind as long as the world spins around
I'll take my time I'll savour the softness of Summer I'll wrap up when
Winter blows and wherever I'm going I'll go in search of a rose.
8/10
8/11
8/12
9/9
Where will I wander and wonder? Nobody knows, but wherever
I'm going I'll go in search of a Rose. Whatever the will of the
weather and whether it shines or snows wherever I'm going I'll go
in search of a Rose I don't know where it's found but I don't mind
as long as the world spins around I'll take my time I'll savour the
softness of Summer I'll wrap up when Winter blows and wherever
I'm going I'll go in search of a rose.
9/10
9/11
9/12
10/11
wherever I'm going I'll go in search of a Rose. Whatever
the will of the weather and whether it shines or snows
wherever I'm going I'll go in search of a Rose I don't know
where it's found but I don't mind as long as the world spins
around I'll take my time I'll savour the softness of Summer
I'll wrap up when Winter blows and wherever I'm going I'll
go in search of a rose.
10/12
11/13
Whatever the will of the weather and whether it
shines or snows wherever I'm going I'll go in search
of a Rose I don't know where it's found but I don't
mind as long as the world spins around I'll take my
time I'll savour the softness of Summer I'll wrap up
when Winter blows and wherever I'm going I'll go in
search of a rose.
11/14
search of a rose.
12/14
knows, but wherever I'm going I'll go in search of
Arial Black
Skapare Robin Nicholas och Patricia Saunders.
http://www.microsoft.com/typography/fonts/font.aspx?FID=13&FNAME=Arial%20Black
En fetare variant av Arial, lämplig för rubriker men inte för brödtext.
8/9
wherever I'm going I'll go in search of a Rose. Whatever the
will of the weather and whether it shines or snows
8/10
8/11
8/12
9/9
search of a rose.
9/10
search of a rose.
9/11
search of a rose.
9/12
search of a rose.
10/11
knows, but wherever I'm going I'll go in search
of a Rose. Whatever the will of the weather and
of a rose.
10/12
of a Rose. Whatever the will of the weather and
of a rose.
11/13
softness of Summer I'll wrap up when
Comic Sans MS
Skapare Vincent Connare.
http://www.microsoft.com/typography/fonts/font.aspx?FID=3&FNAME=Comic%20Sans%20MS
En fantasistil men också relativt lättläst. Men passar bara för rubriker och mycket korta texter.
8/9
Where will I wander and wonder? Nobody knows, but wherever I'm
going I'll go in search of a Rose. Whatever the will of the weather
and whether it shines or snows wherever I'm going I'll go in search of
a Rose I don't know where it's found but I don't mind as long as the
world spins around I'll take my time I'll savour the softness of
Summer I'll wrap up when Winter blows and wherever I'm going I'll
8/10
8/11
8/12
9/9
will of the weather and whether it shines or snows wherever
I'm going I'll go in search of a Rose I don't know where it's
found but I don't mind as long as the world spins around I'll
take my time I'll savour the softness of Summer I'll wrap up
when Winter blows and wherever I'm going I'll go in search of
a rose.
9/10
a rose.
9/11
a rose.
9/12
a rose.
10/11
or snows wherever I'm going I'll go in search of a Rose
I don't know where it's found but I don't mind as long
as the world spins around I'll take my time I'll savour
the softness of Summer I'll wrap up when Winter blows
and wherever I'm going I'll go in search of a rose.
10/12
11/13
but wherever I'm going I'll go in search of a Rose.
shines or snows wherever I'm going I'll go in
search of a Rose I don't know where it's found
but I don't mind as long as the world spins around
I'll take my time I'll savour the softness of
Summer I'll wrap up when Winter blows and
wherever I'm going I'll go in search of a rose.
11/14
Courier New
Skapare Howard Kettler.
http://www.microsoft.com/typography/fonts/font.aspx?FID=10&FNAME=Courier%20New
Skrivmaskinsstil, brukar användas för tabeller eller att märka ut kod. Jobbig att läsa.
8/9
rose.
8/10
rose.
8/11
rose.
8/12
rose.
9/9
of a rose.
9/10
of a rose.
9/11
of a rose.
9/12
of a rose.
10/11
search of a rose.
10/12
search of a rose.
11/13
Georgia
Skapare Matthew Carter, justerad av Agfa Monotype's Tom Rickner.
http://www.microsoft.com/typography/fonts/font.aspx?FID=4&FNAME=Georgia
Ett av de allra bästa typsnitten för skärm. Skapades ursprungligen för att läsas på skärm
8/9
shines or snows wherever I'm going I'll go in search of a Rose I don't know
where it's found but I don't mind as long as the world spins around I'll
take my time I'll savour the softness of Summer I'll wrap up when Winter
blows and wherever I'm going I'll go in search of a rose.
8/10
8/11
8/12
9/9
9/10
9/11
9/12
10/11
10/12
11/13
shines or snows wherever I'm going I'll go in search of
a Rose I don't know where it's found but I don't mind
as long as the world spins around I'll take my time I'll
savour the softness of Summer I'll wrap up when
Winter blows and wherever I'm going I'll go in search
of a rose.
11/14
of a rose.
12/14
knows, but wherever I'm going I'll go in search of
Impact
Skapare Geoffrey Lee.
http://www.microsoft.com/typography/fonts/font.aspx?FID=7&FNAME=Impact
Går väl an för en rubrik men knappast någonting annat.
8/9
Where will I wander and wonder? Nobody knows, but wherever I'm going I'll go
in search of a Rose. Whatever the will of the weather and whether it shines or
snows wherever I'm going I'll go in search of a Rose I don't know where it's found
but I don't mind as long as the world spins around I'll take my time I'll savour the
softness of Summer I'll wrap up when Winter blows and wherever I'm going I'll
8/10
8/11
8/12
9/9
going I'll go in search of a Rose. Whatever the will of the weather and
whether it shines or snows wherever I'm going I'll go in search of a
Rose I don't know where it's found but I don't mind as long as the world
spins around I'll take my time I'll savour the softness of Summer I'll
wrap up when Winter blows and wherever I'm going I'll go in search of a
rose.
9/10
rose.
9/11
rose.
9/12
rose.
10/11
weather and whether it shines or snows wherever I'm going I'll
go in search of a Rose I don't know where it's found but I don't
mind as long as the world spins around I'll take my time I'll
savour the softness of Summer I'll wrap up when Winter blows
10/12
11/13
11/14
12/14
Times New Roman
Skapare Stanley Morison och Victor Lardent.
http://www.microsoft.com/typography/fonts/font.aspx?FID=9&FNAME=Times%20New%20Roman
Times skapades för tidningen med samma namn, 1932. Gjort för papper och för att få in mycket text på liten yta.
8/9
snows wherever I'm going I'll go in search of a Rose I don't know where it's
found but I don't mind as long as the world spins around I'll take my time I'll
savour the softness of Summer I'll wrap up when Winter blows and wherever I'm
going I'll go in search of a rose.
8/10
8/11
8/12
9/9
whether it shines or snows wherever I'm going I'll go in search of a Rose
I don't know where it's found but I don't mind as long as the world spins
around I'll take my time I'll savour the softness of Summer I'll wrap up
when Winter blows and wherever I'm going I'll go in search of a rose.
9/10
9/11
9/12
10/11
10/12
11/13
11/14
12/14
Trebuchet MS
Skapare Vincent Connare.
http://www.microsoft.com/typography/fonts/font.aspx?FID=2&FNAME=Trebuchet%20MS
Fungerar också bra på skärm. Observera gemena g som har en unik form.
8/9
I'll go in search of a Rose. Whatever the will of the weather and whether
it shines or snows wherever I'm going I'll go in search of a Rose I don't
8/10
8/11
8/12
9/9
9/10
9/11
9/12
10/11
where it's found but I don't mind as long as the world
spins around I'll take my time I'll savour the softness of
Summer I'll wrap up when Winter blows and wherever I'm
10/12
11/13
search of a rose.
11/14
search of a rose.
12/14
Verdana
Skapare Matthew Carter, justerad av Tom Rickner.
http://www.microsoft.com/typography/fonts/font.aspx?FID=1&FNAME=Verdana
Förmodligen det mest använda typsnittet på webben idag (2004). Också ett av de allra bästa.
8/9
8/10
8/11
8/12
9/9
wherever I'm going I'll go in search of a Rose I don't
know where it's found but I don't mind as long as the
world spins around I'll take my time I'll savour the
softness of Summer I'll wrap up when Winter blows and
9/10
9/11
9/12
10/11
search of a Rose I don't know where it's found but I
don't mind as long as the world spins around I'll
take my time I'll savour the softness of Summer I'll
wrap up when Winter blows and wherever I'm
10/12
search of a Rose I don't know where it's found but I
don't mind as long as the world spins around I'll
take my time I'll savour the softness of Summer I'll
wrap up when Winter blows and wherever I'm
11/13
of a Rose. Whatever the will of the weather
and whether it shines or snows wherever I'm
going I'll go in search of a Rose I don't know
where it's found but I don't mind as long as
the world spins around I'll take my time I'll
savour the softness of Summer I'll wrap up
when Winter blows and wherever I'm going I'll
11/14
Webdings
¤1234567890+«
¡!Ó#Û%&/()=?`
¦©@£$°¤|[]Å±«
¥ÁÓ´¢ä¦\{}À`
qwertyuiop¬
QWERTYUIOP^
¥½¨ µõÏ¹ú~
¡ýÃà÷öÎ¸û^
asdfghjklÕ
ASDFGHJKL*
ð§¶ÄüþÃ»Þ¿¾ª
×·ÆºøùÂ¼ß¯®Õ
<zxcvbnm,.>ZXCVBNM;:_
²ÖÅÜÝÔÕâÉÐ
³ÚÿÇÈÒÓãáÑ
Georgia
of a rose.
Times New Roman
Verdana
where it's found but I don't mind as long as
the world spins around I'll take my time I'll
savour the softness of Summer I'll wrap up
when Winter blows and wherever I'm going I'll
Trebuchet MS
search of a rose.
Arial Black
softness of Summer I'll wrap up when
Arial
search of a rose.
Comic Sans MS
but I don't mind as long as the world spins around
I'll take my time I'll savour the softness of
Summer I'll wrap up when Winter blows and
Andale Mono
knows, but wherever I'm going I'll go
in search of a Rose. Whatever the will
of the weather and whether it shines or
snows wherever I'm going I'll go in
search of a Rose I don't know where
it's found but I don't mind as long as
the world spins around I'll take my
time I'll savour the softness of Summer
I'll wrap up when Winter blows and
wherever I'm going I'll go in search of
Courier
knows, but wherever I'm going I'll go
in search of a Rose. Whatever the will
of the weather and whether it shines or
snows wherever I'm going I'll go in
search of a Rose I don't know where
it's found but I don't mind as long as
the world spins around I'll take my
time I'll savour the softness of Summer
I'll wrap up when Winter blows and
wherever I'm going I'll go in search of
a rose.
Impact
Caslon
Gill Sans
Helvetica
search of a rose.
Garamond
when Winter blows and wherever I'm going I'll go in search
of a rose.
Berling
of a rose.
Clairvaux
Crazy killer
Where will I wander and wonder
Nobody knows but wherever I m going
I ll go in search of a Rose Whatever
the will of the weather and
whether it shines or snows
wherever I m going I ll go in search of
a Rose I don t know where it s found
but I don t mind as long as the world
spins around I ll take my time I ll
savour the softness of Summer
I ll wrap up when Winter blows and
wherever I m going I ll go in search of
a rose
Medici
Parisian
Where will I wander and wonder? Nobody knows, but wherever I'm going I'll
go in search of a Rose. Whatever the will of the weather and whether it shines
or snows wherever I'm going I'll go in search of a Rose I don't know where it's
savour the softness of Summer I'll wrap up when Winter blows and wherever
Palatino
search of a rose.
Optima
Lucida handwriting
Litteraturtips
Typografisk handbok, Christer Hellmark
Bokstaven, ordet, texten, Christer Hellmark
Provboken, Christer Hellmark
Grafisk design, det synliga språket, Hallberg, Bohman
Typografin och läsprocessen, Åke Hallberg
Anatomy of a typeface, Alexander Lawson
Om typografi, Eric Gill
Typografi och grafisk design, Henriette Koblanck
Vandring bland bokstavsformer, Karl-Erik Forsberg
Skrift, handledning i kalligrafi, Geith och Karl-Erik Forsberg
Typiskt typografiskt, Bo Berndal
International handbook of type designers, Eason, Rookledge
Printing types, Daniel Berkeley Updike
Branding with type, Rögener, Pool, Packhäuser
Stop stealing sheep, Spiekermann, Ginger
Skrivguiden, Lars Holger Holm
Svenska akademins ordlista
TT-språket, www.tt.se
Skrivkonstens historia, Donald Jackson
Klarspråk på nätet, Englund, Guldbrand
Svenska skrivregler, Svenska språknämnden
Handbok i svenska, Gösta Åberg
Designing web usability, Jakob Nielsen
www.useit.com, Jakob Nielsen
Creating killer websites, David Siegel
Creative HTML design, Lynda Weinman
Designing web graphics, Lynda Weinman
GUI bloopers, Jeff Johnson
Interactivity by design, Kristof, Satran
HTML, XHTML, CSS, WAI, www.w3c.org
Grafisk kokbok, Johansson, Lundberg, Ryberg
Bättre bilder i tryck, Mattias Nyman
Effektiv visuell kommunikation, Bo Bergström
Titta!, Bo Bergström
Göra tidning, Åke Edwardsson mfl
The newspaper designer’s handbook, Tim Harrower
Minimikrav på läslighet
17 stycken och några till ... som din trycksak kommer att bedömas efter.
Med god läslighet menas egenskapen hos typografiskt satt text att inbjuda även mindre läsvana till läsning. Texten ska vara lätt att uppfatta och genom den typografiska planeringen
och sättningens genomförande faktiskt också visa sig vara lättläst. Här presenteras 17 krav
som är grunden för att skapa läsvänliga texter.
1. Det ideala antalet tecken per satt rad är 45–65,
med ett medelvärde omkring 55. Det gäller främst för löpande text i större mängder. I dagstidningar, magasin och tidskrifter är det inte ovanligt med 25–35 tecken per rad.
För långa rader i mindre grader gör det svårare för läsaren att snabbt hitta tillbaka till början
av den följande raden. För korta rader leder till onormalt många avstavningar. Högst tre rader
med avstavningar efter varandra kan accepteras.
2. Hur stora bokstäverna ska vara, teckengraden, väljs beroende på på vilket avstånd texten
ska läsas och hur belysningen troligen är vid lästillfället. Man bör också ta hänsyn till hur
läskunnig den tänkta läsaren är. Ju mindre läsvana desto större bokstavsstorlekar behövs.
Samma sak gäller givetvis också läsare med synhandikapp. Bokstävernas (typsnittets)
gemena x-höjd är avgörande för hur stora grader man bör använda. Men det är nästan alltid
bättre att välja den mindre om man tvekar mellan två teckengrader. Text blir inte mer lättläst
för att den är satt i större grader.
3. Typsnitt (som också kallas stil eller teckensnitt) väljs i första hand med tanke på streckstyrka, öppenhet (”punsen”) och över- och understapellängd i förhållande till den gemena xhöjden. Även typsnittets karaktär, dvs överensstämmelse med innehållet, kan påverka
läsligheten.
Avståndet mellan tecknen är av stor betydelse. Knipning, generell minskning av avståndet får
inte överdrivas. Spärrning, ökning av avståndet, stör ordbilden och används i undantagsfall
när man använder kapitäler (små versaler). Kerning, luftning eller knipning, mellan versaler
(eller mellan versal och gemen) bör göras med stor omsorg, särskilt i rubriker och andra
texter i stor grad.
4. När det gäller avståndet mellan raderna ska det stå i god relation både till tecknets gemena
x-höjd och till radlängden. För små avstånd kan lura ögat att byta rad vid mitten av raden. För
stora radavstånd gör det svårt att tillräckligt snabbt hitta början av raden under.
En klassisk rekommendation säger att radavståndet bör vara två punkter utöver teckengraden,
alltså ”10/12 p” (uttalas tio på tolv). Att eftersträva det är en god utgångspunkt. Om man har
lite utrymme måste man överväga andra alternativ: som att ändra graden, spaltbredden och i
sista hand minska radavståndet. En annan rekommendation säger att ”ljusrummet”, det
optiska avståndet mellan raderna, bör vara något större än gradens x-höjd.
Att sätta kompakt 10/10 p är helt uteslutet. I stället bör man pröva till exempel 10/11 p och i
yttersta nödfall 10/10,5 p. Då undviker man åtminstone att gemena j:s underkant tangerar den
versala Å-ringens överkant. Kompakt sättning måste ändå accepteras ibland, till exempel där
raderna är satta med konsultationsgrad (6–7 p), är korta (36–55 mm) och få till antalet.
5. Mellanrummen mellan orden bör hellre vara små än stora. Ett normalt avstånd mellan
orden motsvarar gradens gemena ”r” eller ”n”. Ordmellanrummet kan som minst motsvara
gemena ”i”, men bör aldrig överstiga gemena ”m”.
För stora ordmellanrum leder till gluggig sättning, vertikala mönster bildas i den satta texten
(”floder”, man säger att sättningen ”blöder”). God satskvalitet känns igen på små och jämna
ordmellanrum. Rätt vald grad i förhållande till satsbredden underlättar att
uppnå det kravet och gör samtidigt att det krävs färre avstavningar.
Sättning med rak vänster- och högerkant, marginaljustering, leder till att
varje textrad får olika stora ordmellanrum trots avstavningar.
Sättning med ojämn högerkant, vänsterställd text, medför jämna
ordmellanrum (fast utslutning).
. Vid vänsterställd text bör avstavningar undvikas, men för att undvika
för stora skillnader i radlängderna kan man acceptera avstavning av
sammansatta ord. För stora skillnader i radlängderna ger sättningen ett
oroligt intryck och försvårar läsningen.
Eftersom läsare är vana att uppfatta hela ordbilder och inte enstaka
bokstavstecken, bör orden helst inte avstavas utan delas så att ordstammen
behålls intakt. Orden känns igen lättare då.
. Västerlänningar är vana att läsa från vänster mot höger, läsriktningen.
Undvik att arrangera text eller rubriker mot läsriktningen, till exempel
vertikalt eller på snedden, eftersom det blir ett hinder i kommunikationen
– vi läser ju hela ordbilder. Logik och enkelhet är dygder även när det
gäller att främja läslighet.
. Sätt aldrig bokstavstecken tätt intill linjer, ramar, tonplattor eller bilder.
Minsta mått mot ram- eller bildkant i sidled måste vara klart större än ett
normalt ordmellanrum i den aktuella texten. I höjdled måste avståndet
vara klart större än det optiska radavståndet.
Låt aldrig bokstäver i rubriker eller textblock löpa över kanten på
tonplattor eller bilder – vare sig det gäller teckenmellanrummet eller själva
bokstavstecknet. Undvik skuggade och optiskt manipulerade eller
förvrängda bokstäver. Bespara läsarna understrykningar – i synnerhet
sådana som täcker över understaplar. Ordbilden är helig.
. Antalet rader bör inte gärna vara mer än ‒ per spalt eller sida, men
om man använder mellanrubriker kan man ha fler rader. Mellanrubrikerna
ska hålla god kontakt med den efterföljande texten och avståndet till den
skall vara klart mindre än avståndet till föregående textavsnitt.
. Bildtexten bör ha god kontakt med sin bild. I första hand bör man
sträva efter att bildtexten stå under bilden. Man kan också sätta den till
höger om bilden. Då sätter man bildtexten vänsterställd så samhörigheten
med bilden betonas. I nödfall kan man placera bildtexten till vänster om
bilden, då med rak högerkant för att just betona samhörigheten.
Layoutens helhet avgör i sista hand.
. Låt aldrig texten ”bli vad den blir” i korta sättningar. Kortare
annonstexter, ingresser och bildtexter bör fraseras. Det betyder att
radfallet, radlängderna, bestäms redan på manusstadiet för att texten ska
hållas samman enligt språkrytmen. Då blir ordmellanrummen lika
stora och högerkanten ojämn.
Högerjustering, det vill säga sättning med ojämn vänsterkant,
uppfattas som svår att läsa. Och om man sätter man båda kanterna
ojämnt, centrering, blir texten kanske inte ens läst. Läsarna kan uppfatta
texten så avskräckande att de avstår från att ens försöka.
. Marginaler och andra ljusrum bidrar också till att underlätta läsandet.
Av tradition, och från början praktisk nytta, är bokens marginaler störst
nertill på uppslaget och minst in mot vecket i mitten. Topp- och yttermarginaler är lite större
än innermarginalen.
I annonser bör marginalerna inte underskrida 4–5 mm till närmaste ram, till skurna kanter
bör de inte vara mindre än 9–10 mm, gärna större.
Luft och ljusrum mellan stycken fungerar som andningspauser. Rätt dimensionerade
klargör de materialets disposition och lockar till läsning.
I löpande text ska man i pincip inte sätta en blankrad innan nytt stycke, istället ska vanligt
indrag användas. Indraget ska vara lika djupt som radavståndet i punkter, en helfyrkant.
Efter rubrik, ingress och mellanrubrik ska man inte ha indrag, eftersom de i sig signalerar
nytt stycke.
Var vaksam på hur styckenas början och slut hamnar. Ett stycke som börjar med en rad
nederst i spalten eller på sidan kan godtas, ”horunge”. Däremot får sista raden av ett stycke,
utgångsraden, inte hamna överst i en spalt eller på en sida, ”dubbel horunge”. Det
accepteras inte och den måste tas bort genom små justeringar av layouten.
13. Använd i princip hellre gemener än versaler, även när det gäller rubriker. Det eftersom
läsarna från löpande text är vana att uppfatta ordbilder som satts med gemener. Men i
speciella fall – boktitlar, tidskriftsrubriker, affischer, logotyper – kan versaler fungera.
Av samma skäl, sätt hellre texten med rak än med kursiv variant, i synnerhet om texten är
längre än fem rader. För löpande text, använd hellre normal teckenstyrka än fin, halvfet eller
fet variant. Dessutom, använd hellre normal teckenbredd än bred, smal eller – ännu värre –
förvrängd (optiskt manipulerad).
Det normala är vanligast förekommande och därför förstärks läsvanorna i riktning mot det.
Ovan vid avvikelser upplever läsaren det onormala som en hämmande faktor.
14. Sifferuppgifter i löpande text bör bokstaveras upp till tolv. I andra fall ska de helst sättas
med gemena siffror (också kallade medievalsiffror, Old style figures eller textsiffror). Om bara
tabellsiffror (versala siffror) finns, ska de helst sättas med i en grad mindre än texten i övrigt.
Siffrornas inbördes avstånd kan behöva kernas manuellt. Undvik att inleda nytt stycke med
siffror – texter bör alltid börja med stor bokstav i ett fullständigt ord.
15. Färgade plattor (till exempel istället för ramar) eller sidor kan användas för att hålla
samman materialet eller som stämningsvärde. De bör användas med stor försiktighet. Tonen
skall alltid hållas ljus.
Om man sätter svart text i läsgrader bör en grå tonplatta inte ha mer än tio procent svart
rasterton. Om man använder färg, speciellt när det gäller rött eller blått, i samma
sammanhang bör de vara svaga. Text med tonad bakgrund bör helst sättas med större grad.
Mönstrade bakgrunder med starka kontraster är en oacceptabel störning för läsligheten,
men en bakgrund som består av ljusa mönster kan godtas om texttrycket görs kraftfullt
kontrasterande.
16. Färgad text måste vara tillräckligt mörk och färgen mättad, så att den avtecknar sig mot
bakgrunden med stor kontrast.
Negativ (vit) text i tonplatta eller bild är till nackdel för läsningen, även om bakgrunden är
mörk och mättad. Om man ändå vill pröva: sätt texten i en större grad, undvik typsnitt med
serifer och använd gärna en fetare variant.
17. Papperets kvalitet och färgton påverkar läsligheten. Med en matt yta undviker man
reflexer och hög opacitet förhindrar att baksidans och följande sidans text lyser igenom. En
lätt gultoning underlättar vid sträckläsning. Färghållningen vid tryckning bör inte vara alltför
svart eller ljus.
Läshastigheten och läslusten borde variera mycket mellan dessa tre exempel.
Vad tror du själv?

Mikael Becker, Mittuniversitetet 2005

Transcription

Similar documents

2004 - Svensk Raps

PROJEKTFÖRSLAG TILL KURSEN MJUKVARUKONSTRUKTION

En MR fysikers hjärna vilar aldrig: Om ett blodflöde i överflöd, ett