Webb­utveckling

Typsnitt

Det finns tre stora klasser med typsnitt och som man brukar dela upp alla typsnitt i:

1. Serif
2. Sans-serif
3. Monospace

Det finns lite olika åsikter om vilken sorts tysnitt som är lättast att läsa. Serif-typsnitt är populära i tryckt media. Medan sans-serif är populärt på skärmar. Monospace-typsnitt är populärt i programmeringsmiljöer.

Serif

Ett serif-typsnitt har små hakar i ändarna på bokstäver och är det som är standard i webbläsaren. Times New Roman är ett typiskt typsnitt som anväder sig utav serifer.

I CSS har man utöver de tre stora facken två andra:

1. Cursive
2. Fantasy

Terminologi

Specificera typsnitt

Det finns två sätt du kan specificera vilket typsnitt som gäller:

1. font-famliy
2. @font-face

font-family

Genom att ange font-family så letar webbläsaren efter ett typsnitt med motsvarande namn på datorn. Om datorn inte hittar typsnittet så kör den på standardtypsnittet. (Du kan hitta en lista på typsnitt som alla datorer borde kunna använda här)

p{
	font-family: helvetica;
}

Detta är exempel med helvetica. Det är sans-serif. Om du vill ha ett mer specifikt typsnitt, men är rädd för att användaren inte har det på datorn så kan man ange en backup så här:

p{
font-family: helvetica, monospace;
}

Om din dator inte har helvetica installerat så kommer den att visa det här med monospace. Oftast är det en bra idé att lägga upp en backup som är snarlik den man vill ha. Och då borde vi ha angett sans-serif istället för monospace i vår CSS-kod.

@font-face

Om du vill vara säker på att din användare ser hemsidan med rätt typsnitt så kan du skapa ett eget type-face där du laddar in ett typsnitt.

@font-face{
	font-family: 'MittTypsnitt'
	src: url('platsen den ligger på')
}
p{
	font-family: MittTypsnitt;
}

I din url kan du antingen länka till en plats på datorn eller en plats på internet.

Google Fonts

Det kanske lättaste sättet att få det typsnitt man vill ha är att använda sig utav fonts.google.com. Där kan man välja ett typsnitt som man gillar. Där finns HTML-kod du kan kopiera in i din header och sen kan du använda det som anges på hemsidan.

Här är ett exempel du nog inte har på din dator men som vi kan ladda hem från Google när sidan laddas.

Teckenstorlek

Man brukar mäta teckenstorleken på tre olika sätt:

1. Pixlar, px
2. Procent, %
3. Em

Standardstorleken för typsnitt i webbläsaren brukar vara 16 px vilket då motsvarar 100 % och 1 em.

För att bestämma teckenstorleken skriver du så här i din CSS-kod:

p{
	font-size: 12px;
}
				

Den här texten är skriven i 12 px. Den är tydligt mindre än den som är i 16 px.

px

I skrivprogram brukar man kunna välja teckenstorlek i punkter. Lite slarvigt har man tidigare kunnat säga att en punkt är ungefär lika stor som en pixel. Nu när skärmar har blivit pixel-tätare så kan man inte längre uttrycka sig på det viset. Punkt-storlekarna kommer från när tryckpressarna uppfanns på 1400-talet och lever kvar idag.

Eftersom vi inte vet hur stor en pixel på en skärm är så vet vi inte hur många det går på en punkt, därför har man frikopplat det och mäter teckenstorleken i antal pixlar. Så om teckenstorleken är 16 px så är avståndet mellan cap height och baseline 16 px.

procent

Om du anger teckenstorleken i procent så utgår du från standardstorleken på 16 px. Så om du anger att något ska vara dubbelt så stort: så här typ, så skriver du:

p{
	font-size: 200%;
}

em

En em är oftast lika med bredden på stora bokstaven M. Det vanligt att mäta i em:s när man jobbar i typsättningsprogrammet LaTeX.

p{
	font-size: 1.5em;
}

Den här texten är skriven i 1.5 em vilket är samma sak som 150 % och 24 px.

Standardstorlekar

Textdekorering

Vi har tidigare kollat på HTML-kommandon som ändrar textens utseende:

Idag ska vi kolla på hur vi kan göra samma sak med CSS-kod.

Fetstilt

Om man vill göra sin text fetstilt med CSS skriver vi så här:

p{ /* Stycken */
	font-weight: bold; /* Fetstilt */
}
a{ /* Länkar */
	font-weight: normal /* Normalt */
}

Diskussionspunkt

Varför kan man tänka sig behöva "normal" font-weight?

Kursivt

Om du vill göra din text kursiv eller sned med CSS:

p{
	font-style: italic;
}
a{
	font-style: oblique;
}

Vill man återställa från kursivt till normalt så kan man ange font-style: normal;

Understruket

Här kommer koden för att stryka under text med CSS:

p{
	text-decoration: underline;
}

Genomstruket

Här kommer koden för att stryka genom text med CSS:

	p{
	text-decoration: line-through;
}

Överstruket

Här kommer koden för att stryka ovanför text med CSS:

p{
	text-decoration: overline;
}

Superscript

Här kommer koden för att höja upp text med CSS:

p{
	vertical-align: super;
}

Subscript

Här kommer koden för att sänka ner text med CSS:

p{
	vertical-align: sub;
}

Ny dekorering

Med hjälp av CSS kan vi förändra vår text ytterliggare än vad vi kunnat tidigare med HTML.

Transformering

Genom kommandot text-transform så kan vi göra om text till stora eller små bokstäver:

Uppercase

Här kommer koden för att göra alla bokstäver till versaler med CSS:

p{
	text-transform: uppercase;
}

Lowercase

Här kommer koden för att göra alla bokstäver till gemener med CSS:

p{
	text-transform: lowercase;
}

Capitalize

Här kommer koden för att göra första bokstaven till versal med CSS:

p{
	text-transform: capitalize;
}

Avstånd

Radavstånd

Era svenskalärare har genom tiderna tjatat om att ni ska ha 1.5 i radavstånd. När man väljer radavstånd så är det bra att välja ett avstånd som är större än avståndet mellan orden i texten. Detta för att det hjälper ögat att följa texten vågrätt istället för lodrätt. Det här stycket är skrivet med radhöjden 1.4em. Radavstånd rekommenderas att mätas i em istället för px.

p{
	line-height: 1.4em;
}

Mellan ord

Den här texten har avståndet 0.5em mellan alla ord, standard är 0.25em.

p{
	word-spacing: 0.5em;
}

Mellan tecken

Den här texten har avståndet 0.1em mellan varje tecken, standarden är ännu lägre.

p{
letter-spacing: 0.1em;
}

Alignment

Detta har inget med Dungeons and Dragons att göra, utan handlar istället om hur texten fyller sidan. Det finns fyra alternativ:

1. left, som vänsterjusterar (standard)
2. right som högerjusterar
3. center, som centrerar
4. justify, som alltid börjar längst till vänster och sluter längst till höger (om det når så långt)

p{
	text-align: justify;
}