kaxigt.com

Välkommen till tredje lektionen!

Font är detsamma som teckensnitt eller typsnitt. Varje dator har sina uppsättningar av fonter och många av dessa är samma, men inte alla. Macdatorerna har i regel sin defaultfont som inte är densamma som i vanliga PCdatorer. Det kan vara bra att veta om man inte har angett ett specifikt typsnitt på sin font. Typsnitt är bland annat utseendet på fonten.

Vi ska börja med att gå igenom följande egenskaper för en font.

• font-family
• font-style
• font-variant
• font-weight
• font-size

Font-family

Genom att ange en specifik font för ett HTML-element så prioriteras denna font. Ofta skriver man in flera alternativ för om din besökares dator inte har stöd för den första fonten som du har angivit så kommer den att avsöka alternativ två.

Finns det stöd så används den fonten, i annat fall söker den vidare tills den hittar en font som överensstämmer med den uppsättning fonter som datorn har.

Använder du däremot ovanliga fonter, eller inte har lagt till några alternativ som exempelvis stöder Macdatorer, så kommer din besökares dator att använda defaultvärdet – defaultfonten – om inte den specifika fonten finns installerad.

När man anger sina fonter så är det en god idé att även avsluta alternativen med ett släktnamn, exempelvis serif, så man vet att sidan kommer att visa en snarlik font från samma ”släkte” om inte besökarens dator har den specifika fonten installerad.

1. Familjenamnen (font-family) Georgia, Times New Roman och Garamond tillhör samma släktnamn (generic-family) serif. De har ”fötter”.
2. Familjenamnen Verdana, Arial och Trebuche tillhör släktnamnet sans-serif. De har inga ”fötter”.
3. Familjenamnen Courier samt Courier New tillhör släktnamnet monospace. Dessa har en fast vidd.

När man anger sina fontalternativ bör man därför hålla sig till de familjenamn som ingår i samma släkte och avsluta alternativen med själva släktnamnet. De familjenamn (fonter) som innehåller blanksteg i sitt namn, exempelvis Times New Roman måste omslutas med citattecken eller enkelfnuttar – ”Times New Roman”.

Css-syntaxen för font-family ser ut så här:

vald selector {font-family: arial, verdana, sans-serif;}

Font-style

Det finns tre egenskaper för fontens stil, det vill säga font-style. Dessa är italic, normal och oblique. Italic betyder kursiv stil medan oblique betyder snedställd.

De är lika till sitt utseende. Den mest vanliga egenskapen är dock ’normal’. Det här är italic och det här är oblique.

CSS-syntax är denna:

vald selector {font-style:italic;}
vald selector {font-style:normal;}
vald selector {font-style:oblique;}

Font-variant

Font-variant ger fonten följande (två) värden, normal|small-caps|initial|inherit;

Small-caps är lite speciell men snyggt att använda till exempelvis rubriker eftersom varje bokstav är ”kapitaliserad”, det vill säga är stor bokstav, men i mindre storlek. Den första bokstaven i varje mening är dock lite större än de andra. Det här är small-caps.

Css-syntax:

vald selector {font-variant:small-caps;}
vald selector {font-style:normal;}

Font-weight

Med font-weight kan man välja hur kraftig eller tjock fonten skall vara. Med följande två värden kan vi väja om en text ska vara bold – tjock – eller normal – det vill säga ha normalläge. Css-syntaxen:

vald selector {font-weight:bold;}
vald selector {font-style:normal;}

En del webbläsare klarar även att läsa in tjockleken på fontens värde om man anger dessa i nummer; 100-900 eller som light, lighter.

Font-size

Slutligen har vi då kommit fram till själva storleken på fonten, det vi kallar för font-size. Det finns fyra alternativ att välja mellan när man vill ange en fonts storlek.

Vi har följande värden: px, em, %, och pt. Vad som kan vara bra att veta är förutsättningarna för storlekarna beroende på vilken typ av värde vi använder.

Em och px

Em och px är dock de två enheter som rekommenderas av W3C när det handlar om en fonts storlek. Men det stannar inte med det.

Beroende på om det är på en skärm (screen) fonten visas eller med något ska skrivas ut (print) bör man välja rätt enhet för fonten.

Tabell hämtad från https://www.w3.org/Style/Examples/007/units.en.html

Hur stor är exempelvis em om man jämför med procent(%) eller pixel(px) och pt(point)? Pixel to em har en bra konverterare online och överblick om detta.

CSS-syntax:

p {font-size:12px;}
p {font-size:1em;}
p {font-size:10pt;}
p {font-size:100%;}

En allmän kort och enkel jämförande överblick

8px  = 0.5em   = 50%   = 6pt
9px  = 0.563em = 56.3% = 7pt
10px = 0.625em = 62.5% = 8pt
11px = 0.688em = 68.8% = 8pt
12px = 0.75em  = 75%   = 9pt
13px = 0.813em = 81.3% = 10pt
14px = 0.875em = 87.5% = 11pt
15px = 0.938em = 93.8% = 11pt
16px = 1em     = 100%  = 12pt

Det finns fler omvandlingar hos Px to EM Conversions

px to rem conversion if :root

:root {
font-size: 16px;
}

Källa: http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/

Egenskaper för font (typsnitt)

Egenskaperna för font kan användas som shorthand declarationgroups och ska då användas i denna ordning:

font:italic normal 11px/150% arial, times, helvetica;

Som css-syntax:

font-style - font-variant - font-weight - font-size - font-family

I lektion 4 ska vi se hur vi formaterar och sätter stil på själva texten. Välkommen dit!