Egenskaper för text har delats i två delar: på denna sida beskrivs egenskaper för typsnitt (eng. fonts) och stilar (d.v.s. egenskaper som börjar med "font-" :-) samt på nästa (Text) beskrivs egenskaper som mer har med textmassor att göra (indrag, avstånd, m.m., eller egenskaper som börjar med "text-" :-).
Egenskaper som behandlas på denna sida visas nedan med exempel på giltiga värden för respektive egenskap.
Egenskaperna beskrivs i den ordning de används i "genvägen" font (se längre ner på sida).
Ett typsnitt (eller typstil, enligt mer kunniga i typografi) är en samling med bokstäver i samma stil, t.ex. Times New Roman, Arial, Helvetica och MS Comic Sans. Typsnitts utseende kan påverkas med bl.a stilar, t.ex. kursiv eller fet.
Egenskapen font-style används för att ändra text till en kursiv stil (eng. italic eller oblique). Giltiga värden för egenskapen är:
Värdet "normal" är standard, d.v.s. värdet är främst användbart om vi vill motverka stil som (eventuellt) applicerats av en stilmall (se avsnittet Egenskapen font-weight nedan för exempel).
Detta stycke använder stilen normal.
Detta stycke använder stilen italic.
Detta stycke använder stilen oblique.
Som de två styckena i exempel ovan visar så ser de antagligen väldigt lika ut (d.v.s. fungerar främst med typsnitt som kostar pengar).
Exempel 4a.1.0 - Stilarna kursiv (italics) och kursiv (oblique)
För att använda större och mindre versaler för text (s.k. kapitäler) används egenskapen font-variant. Giltiga värden för egenskapen är:
Detta stycke använder varianten normal.
Detta stycke använder varianten small-caps.
Värdet normal fungerar som för font-style, d.v.s. är standard och kan användas för att motverka en annan stilmall.
Vikten, eller "svärtan", hos text avgör hur fet den ser ut. Giltiga värden för egenskapen är:
Värdet normal är (inte så chockande) standard, ett värde som är användbart om vi vill "motverka" fet stil i ett stycke. I exempel nedan finns två stilmallar (klasserna fet och ejfet) samt (X)HTML-kod som visar på hur det skulle kunna användas.
.fet { font-weight: bold; }.ejfet { font-weight: normal; }
<p class="fet">Lite
<span class="ejfet">icke fet</span>
text i ett stycke fet text.</p>Lite icke fet text i ett stycke fet text.
Egenskapen font-weight ska (enligt standard) kunna anta värden som 100, 200, ... , 900 (400 = normal, 700 = bold). Men alla dessa värden stöds inte av så många typsnitt (endast de som kostar pengar...). Detta innebär att värdena bolder och lighter inte är till så mycket nytta heller...
Till början på sida
Storlekar och radavstånd är två sammanlänkade egenskaper och beskrivs nedan.
Egenskapen font-size används för att ändra storleken på typsnitt och vi kan använda någon av nedanstående mått eller måttenheter (se även Storlekar och måttenheter för måttenheter).
CSS använder samma sju "fördefinierade" storlekar för typsnitt som i HTML:s FONT-tagg, fast i CSS används nyckelord istället för siffror. Storleken på de fördefinierade storlekarna avgörs av webbläsare, eller av eventuella ändringar som besökare gjort i sin webbläsare. (Numera förordas att webbläsare använder ett förhållande av ca. 1.2 mellan storlekarna.) De fördefinierade storlekarna visas nedan, från minsta till största, och värdet medium är standard.
Utöver de fördefinerade storlekarna kan vi använda två nyckelord för att minska respektive öka storleken på typsnittet (relativt omgivande element) och de är:
I exempel nedan visas hur de sju fördefinerade storlekarna tar sig ut. Efter ett horisontellt streck (HR) har typsnittstorlek ökats till 20 pixlar (20px - för att testa om det påverkar, viket det inte verkar göra). Sist visas hur de relativa storlekarna smaller och larger tar sig ut.
Exempel 4a.1.1 - Fördefinerade storlekar
Observera att de sju fördefinierade storlekarna i CSS inte helt matchar de i HTML:s FONT-tagg!
Vi kan även använda relativa måttenheter (se Storlekar och måttenheter för förklaringar) för att ange storlek på typsnitt. Storleken är då relativ till övergripande/omslutande element (eller förälder). Nedan visas måttenheter för relativa storlekar.
I exempel nedan så skapas en stilmall för BODY där typssnittsstorleken ändras till 17 pixlar samt en klass (minklass) för stycken som har storleken 0.8em. Stycken som använder klassen kommer då ha en punktstorlek på ca. 14 pixlar (17*0,8=13,6) då BODY är övergripande element för stycken (P).
body { font-size: 17px; }p.minklass { font-size: 0.8em; }
<body>
<p>Stycke ärver storlek från BODY.</p>
<p class="minklass">Stycke som använder
storlek i klass.</p>
</body>Stycke som ärver storlek från BODY.
Stycke som använder storlek i klass.
Observera att negativa värden för egenskapen font-size inte får användas (vilket är tillåtet för andra egenskaper - se bl.a. Boxar)!
Vi kan även använda någon av de absoluta måttenheterna för att ange storlek, men dessa passar bäst för andra media än skärmar (som ännu inte behandlas i denna underwebb, så jag överlåter till er att experimentera med måttenheterna själva). Nedan visas de absoluta måttenheterna (se Storlekar och måttenheter för förklaringar).
Egenskapen line-height används för att ändra radavstånd inom t.ex. ett stycke (P). Några av värden eller måttenheterna som är giltiga för egenskapen är:
Standardvärde för denna egenskap är 1.2em (eller rekommenderas vara mot tidigare 1.5em). I exempel nedan så skapas en klass (ingress) för stycken (P) där radavstånd är dubbelt (och stilen är kursiv).
p.ingress
{
line-height: 2em;
font-style: italic;
}Ett stycke som ska föreställa en ingress i en artikel (även om typsnittet har fast teckenbredd - se mer längre ner på sida).
Ett andra stycke som är "vanlig" text, d.v.s. detta stycke har ett standardavstånd av 1.2em om webbläsare följer rekommendation.
I exempel nedan visas hur stycken (P) med "standardstorlek" tar sig ut med bl.a. radavstånden 1em, 2em, 3em och 4em. Det sista stycket har givits ett radavstånd av 0.5em, d.v.s. halva typsnittstorleken. I detta sista stycke har även färgen på en mening ändrats till blå för att visa på hur webbläsare hanterar när radavstånd är för litet (enligt standard så ska efterföljande rader skrivas över föregående).
Om vi använder en relativ måttenhet för radavstånd så baseras avståndet på elementets faktiska typsnittsstorlek (oavsett om elementet innehåller text eller inte). Med faktiska menas att om även typsnittsstorleken är relativ så beräknas den faktiska typssnittstorleken innan radavstånd beräknas. Värde för denna egenskap får inte vara negativt. För att minska avståndet mellan stycken kan vi använda marginaler istället (se Boxar).
Till början på sida
Typsnitt har getts namn, bl.a. efter personer som skapade dem (t.ex. Garamond och Baskerville), och tillhör någon typsnittsfamilj (eller typkaraktär). Nedan beskrivs egenskaper som används för att ändra typsnitt och/eller typsnittsfamiljer.
Innan någon som vet bättre än jag hetsar upp sig angående mina kunskaper i typografi, eller vad det heter, så vill jag meddela att jag är medveten om att jag har brister i ämnet - jag är en nörd, d.v.s. intresserad av datorer och inte design/layout! :-) Så ha överseende med min okunskap.
När vi vill ändra typsnitt så kan vi antingen använda namnet på ett visst typsnitt (eller typsnittsfamilj - se Typsnittsfamiljer nedan) eller en lista med typsnitt (eller typsnitt och/eller typsnittsfamiljer). Använder vi endast ett visst typsnitt så måste besökaren ha det typsnittet installerat på sin dator. Saknar besökaren det typsnittet kommer webbläsaren ändå att använda standardtypsnittet (se tabell nedan). Om namnet på typsnittet innehåller mellanslag måste namnet inneslutas inom citattecken (återigen, detta är det enda tillfället då citationstecken får användas i CSS).
{ font-family: Verdana; }{ font-family: "Times New Roman"; }
Genom att använda en lista med typsnitt (och/eller typsnittsfamiljer), där typsnitten rangordnas efter vilket vi först vill ha, så är chansen större att besökaren har något av typsnitten i listan installerad på sin dator. Rangordningen sker så att det typsnitt som står först (längst till vänster) är det som vi vill ha först och namnen (på typsnitten/familjerna) separeras med komma.
{ font-family: Verdana, Arial, sans-serif; }{ font-family: "Times New Roman", Times, serif; }
Observera att typsnittsfamiljer kommer runt det här med mellanslag i namn genom att använda bindestreck (-), t.ex. sans-serif. Vi ska alltså inte använda citationstecken kring typsnittsfamiljer.
Olika operativsystem, så som Windows, Linux och MacOS, använder tyvärr olika namn på samma/liknande typsnitt. Nedan visas en tabell med "standardtypsnitten" i Windows och MacOS för typsnitt med resp. utan serifer samt fast teckenbredd (se Typsnittsfamiljer nedan).
| Windows | Macintosh | |
|---|---|---|
| Med serifer | Times New Roman | Times |
| Utan serifer | Arial | Helvetica |
| Fast teckenbredd | Courier New | Courier |
Två andra typsnitt som blir alltmer vanliga i Windows, bl.a. då besökare uppgraderar sina datorer med nya operativsystem och webbläsaren Internet Explorer, är Verdana och Georgia. Dessa kan även fås till Linux och (?) MacOS. I nästa stycke visas exempel på Georgia (om du har den installerad :-).
Denna hemsida använder Raleway som huvudsakligt typsnitt, främst då den är lättare att läsa på skärmen än Times New Roman. Ett alternativ vore att att använda Georgia (som i detta stycke) som påminner om Times New Roman, men som är gjort för att vara lättare att läsa på skärmen.
För att vara (relativt) säker på att vi använder ett typsnitt utan serifer, och som besökaren lär ha installerat, så skulle vi kunna använda stilmallen "utanserifer" nedan. På motsvarande sätt kan vi använda stilmallen "medserifer" nedan för att vara (relativt) säker på att få ett typsnitt med serifer. D.v.s. det är mycket vanligt att man ser stilmallar med nedanstående värden på egenskap för typsnitt.
.utanserifer {
font-family: Verdana, Arial,
Helvetica, sans-serif;
}
.medserifer {
font-family: Georgia, "Times New Roman",
Times, sans-serif;
}När vi vill ändra typsnitt för text kan vi antingen ange ett visst (eller flera) typsnitt eller en familj av typsnitt. I det första fallet måste besökaren ha typsnittet (eller något av typsnitten) installerat på sin dator för att texten ska visas med det önskade typsnittet. Om vi istället använder en familj av typsnitt så överlåter vi till webbläsaren att avgöra vilket typsnitt som kommer användas, men vet vi ungefär hur det kommer att ta sig ut. De typsnittsfamiljer som stöds i CSS visas nedan samt standardtypsnittet i Windows (sist jag hittade någon som visste/publicerade på Internet).
| Typsnittsfamilj | Windows | macOS | Linux |
|---|---|---|---|
| serif | Times New Roman | Times | |
| sans-serif | Arial | Helvetica | Nimbus Sans L |
| monospace | Courier New | Courier | Nimbus Mono L |
| cursive | Script eller Comic Sans MS | ||
| fantasy | ? |
Observera att Script inte är ett TrueType-typsnitt. Ett TrueType-typsnitt klarar av att visas i olika storlekar utan att bokstäverna i texten bli "taggig". Teckensnitt som inte är av typen TrueType brukar bli "taggiga" när de blir för stora. För övrigt så är typsnittet Script smått oläsligt i "normal" punktstorlek i en webbläsare (se exempel 4.1.2).
En serif är en utsvängning, oftast längst ut på varje streck, i en bokstav. Serifer används för att göra text mer lättläst, d.v.s. så att vi människor lättare kan läsa texten (tyda bokstäverna). Detta gäller främst tryckt material då skärmars upplösning (antal punkter/tum, eng. dots per inch - dpi) inte är så hög som tryckt material. Times New Roman är ett typiskt exempel på ett typsnitt med serifer och typsnittsfamiljen serif är standardtypsnittet i de flesta webbläsare.
Text som skrivs med typsnittsfamiljen serif.
Motsatsen till typsnittsfamiljen serif är sans-serif som inte har några utsvävningar alls. Ett typiskt exempel på ett typsnitt i familjen sans-serif är Arial, men även Verdana (som används i denna text). Typsnittsfamiljen sans-serif är att föredra för hemsidor då den är lättare att läsa på skärmen, dock inte då den skrivs ut, då serifer inte blir så tydliga på en skärm. Nedan visas ett stycke (en rad) som använder typsnittsfamiljen sans-serif och som kommer visas med typsnittet Arial i Windows.
Text som skrivits med typsnittsfamiljen sans-serif.
Det mesta av texten som vi läser i tryckt, eller annan media, använder typsnitt där bokstäver har olika bredd (så som text på denna hemsida). Bokstaven 'i' behöver t.ex. inte lika mycket plats (bredd) som bokstaven 'm'. Denna form av typsnitt har s.k. anpassad teckenbredd. Typsnitt i familjen monospace har fast teckenbredd, d.v.s. alla bokstäver har samma bredd. Denna familj används lämpligen när man vill visa text som innehåller t.ex. programkod eller annat som ska skrivas av. (När vi läser text behöver vi ofta inte läsa varje bokstav utan vi använder "erfarenhet" för att tolka ord, d.v.s. vi känner igen mönster. Detta är bl.a. ett skäl till varför vi kan läsa text som innehåller stavfel och ändå förstå texten.) De mest använda typsnitten i familjen är Courier eller Courier New.
Text som skrivits med typsnittsfamiljen monospaced.
Typsnittsfamiljen cursive består av typsnitt som ska påminna om handskriven text medan fantasy är de mer fantasifulla typsnitten. Båda bygger på mycket runda bokstäver och tecken. Exempel i familjen cursive är typsnittet Script och i familjen fantasy MS Comic Sans. Som exempel nedan visar på (kan visa på) så stödjer inte alla webbläsare dessa typsnittsfamiljer.
Text som skrivits med typsnittsfamiljen cursive.
Text som skrivits med typsnittsfamiljen fantasy.
I exempel nedan visas stycken i de olika typsnittsfamiljerna. Observera att endast typsnittsfamiljerna serif, sans-serif och monospaced har brett stöd i dagens webbläsare!
Till början på sida
Skyggor är nytt i CSS3. För att lägga till en skugga anger man hur mycket stor förskjutning ska vara i X- och Y-led, eventuell "längd" på skugga (eng. blur) samt eventuell färg.
text-shadow: 2px 2px 2px;text-shadow: 2px 2px 10px red;
Detta stycke har en skugga med "längden" 2px.
Detta stycke har en röd skugga med "längden" 10px.
Till början på sida
Genvägar (eller förkortningar, eng. shorthand) används för att ändra flera egenskaper på en gång. En sådan "genväg" är font, med vilken vi kan ändra alla egenskaper ovan med.
Med "genvägen" font räcker det med att använda en egenskap (font) för att ändra några eller alla egenskaperna ovan. De olika värdena separerade med mellanslag. Ordningen som värden anges är viktig och visas nedan. Värden som är frivilliga har placerats inom "hakparenteser" ([ och ]), d.v.s. vi måste alltid ange storlek (font-size) och typsnitt (font-family). Radavstånd (line-height) följer efter typsnittsstorlek (font-size) efter ett snedstreck (/), t.ex. 14px/2em för storlek 14px och radavstånd 2em ("dubbelt").
font: [<font-style>] |
[<font-variant>] |
[<font-weight>]
| <font-size>[/<line-height>] |
<font-family>För att erhålla text med fet stil, punktstorlek 11 och typsnittet Verdana skulle vi kunna skriva följande
.minstil {
font-weight: bold;
font-size: 11pt;
font-family: Verdana;
}.minstil { font: bold 11pt Verdana; }
Observera att om vi använder egenskapen font och utelämnar någon av de frivilliga egenskaperna så återställs deras värden (eng. reset) till deras standardvärden. Effekten av detta blir att stilmallen för klass ovan är det samma som nedanstående stilmall.
.minstil {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 11pt;
line-height: normal;
font-family: Verdana;
}Till början på sida
Nedan finns länkar med mer information.
Till början på sida