Typografi - grunder

Från Webbling
Version från den 18 januari 2016 kl. 23.38 av PGJ (diskussion | bidrag)
Hoppa till: navigering, sök

Typografi handlar om hur man utformar hur text för att den ska bli så snygg och bra som möjligt. CSS innehåller en uppsjö av egenskaper som har med text att göra. Dessa egenskaper bestämmer alltifrån vilket teckensnitt som ska väljas till hur textens layout ska se ut.

En av de mest grundläggande egenskaperna för text, har vi redan tittat på förut - nämligen textfärgen.

color

Textfärgen kan ändras med hjälp av egenskapen color. I avsnittet om färger tittade vi närmare på hur man kan ange färgvärden på olika vis. Alla de möjliga värden som presenterades där, går att använda med denna egenskap.


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

Se till att välja en färg som ger god kontrast mot backgrunden. Det är viktigt att texten blir lättläst. Kom ihåg att kontrast kan vara extra viktigt för dem som har lässvårigheter som dyslexi.

font-size

Med hjälp av egenskapen font-size, kan man styra hur stor texten ska vara. 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 ojNNRW 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.