Typografi - typsnittsegenskaper

Från Webbling
Version från den 12 januari 2019 kl. 20.41 av PGJ (diskussion | bidrag) (→‎font-weight)
(skillnad) ← Äldre version | Nuvarande version (skillnad) | Nyare version → (skillnad)
Hoppa till: navigering, sök

Det finns en uppsjö egenskaper som kan anges för att välja hur typsnitt ska visas upp i en webbsida. Vi kommer inte att gå igenom alla, men vi ska titta på ett urval som täcker de flesta behov.

font-size

Med hjälp av egenskapen font-size, kan man styra textstorleken. Storleken kan anges med hjälp av alla CSS-måttenheter. Om vi använder oss av procent, så kommer procenten att räknas utifrån den grundstorlek som texten skulle ha fått om vi inte angivit något storleksförändring. I de flesta fall har då grundstorleken ärvts ifrån föräldraelementet.


See the Pen EwwxWo by Patrik Grip-Jansson (@PGJ) on CodePen.


Kom ihåg att många kan ha svårt att läsa på skärm, t.ex. äldre eller de med vissa typer av synfel. Är texten för liten blir det svårläst. Självklart kan användaren zooma in för att få texten till en storlek som passar, men det är ju bra att ha ett grundutseende som de flesta kan läsa.

font-weight

Denna egenskap styr hur fet en font ska vara. Detta går att ange på lite olika vis.

normal
Normal fethet. Detta är defaultvärdet. Samma som 400.
bold
Något fetare stil. Samma som 700.
bolder
Ett snäpp fetare än föräldraelementet.
lighter
Ett snäpp smalare än föräldraelementet.
100, 200, 300, 400, 500, 600, 700, 800, 900
Olika fethetsnivåer, där 400 är normal.

See the Pen reyjWY by Patrik Grip-Jansson (@PGJ) on CodePen.

Vad denna egenskap resulterar i kan variera beroende på vilket teckensnitt som används. Vissa teckensnitt har inte många varianter för fetheten. Då kan det bli mer eller mindre samma resultat oavsett vad man anger med denna egenskap.

Nästa aktivitet

Typografi - textegenskaper