CSS erbjuder många egenskaper för anpassning av typografi. Dessa sträcker sig från typsnitt till typstil och skuggor.
Bland CSS-typografigenskaper förstås information om typsnitt, typstil och typvikt. Dessa egenskaper är naturligtvis främst meningsfulla för HTML-element som innehåller text (p, i etc.). De kan också användas för tabeller.
Med font-family kan du ange vilket typsnitt som ska användas.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Detta är en paragraf med ett <strong>fet ord</strong>.</p>
<h2>Detta är en rubrik med ett <strong>fet ord</strong>.</h2>
</div>
</body>
</html>Resultatet i webbläsaren ser ut såhär:
Tydliga typsnitt inkluderar till exempel Arial, Helvetica och Times Roman. Genom CSS-egenskapen font-family tilldelar du önskade typsnitt. Om flera typsnitt anges är ordningen avgörande. Om det första angivna typsnittet är tillgängligt används detta. De önskade typsnitten anges genom kommatecken. Som sista instruktion bör du normalt sett ange en s.k. generisk typsnittsfamilj. Med en sådan generisk typsnittsfamilj ger du webbläsarna möjligheten att välja ett typsnitt som åtminstone är liknande det angivna.
• serif = ett typsnitt med serifer
• sans-serif = ett typsnitt utan serifer
• cursive = ett typsnitt för kursiv skrift
• fantasy = ett typsnitt för ovanlig skrift
• monospace = ett typsnitt med tecken av lika bredd
Typstil
Med egenskapen font-style kan du ange typstil. Om det valda typsnittet tillåter det kan du tvinga fram kursivt skrivsätt med värdet italic.
Andra typsnitt kan lutas genom att använda oblique.
Nästa CSS-egenskap som påverkar typografin kallas font-variant. Genom detta kan s.k. kapitäler definieras.
Detta uppnås genom att tilldela font-variant värdet small-caps.
Typstorlek
Det är också mycket viktigt att ange en typstorlek. CSS erbjuder egenskapen font-size för detta ändamål. Typstorlekar kan anges i olika enheter.
• EM
• REM
• Pixlar
• Procent
• Nyckelord
Följande varianter finns tillgängliga som nyckelord:
• xx-small – mycket, mycket liten
• x-small – mycket liten
• small – liten
• smaller – mindre än i föräldraelementet
• medium – medelstor
• large – stor
• x-large – mycket stor
• xx-large – mycket, mycket stor
• larger – större än i föräldraelementet
Här är ett exempel på hur typstorleken kan sättas:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Och så ser det hela ut i webbläsaren:
OBSERVERA att definitionen av typstorlek är mycket komplex eftersom de olika enheterna har sina för- och nackdelar.
För en bra översikt över vilken enhet som bäst bör användas när hittar du på sidan http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. För den som inte vill läsa igenom detta: Använd relativa värden som em för visning på skärmen. För utskriftsdesigner bör du däremot satsa på absoluta enheter som pt.
Typvikt
Nästa steg är typvikten. Genom detta kan man bestämma typens tjocklek och styrka. Egenskapen som används för detta är font-weight.
.fett {
font-weight:bold;
}
Genom denna syntax visas den utmärkta texten i fetstil.
Möjliga värden är bold (fet), bolder (extra fet), lighter (tunnare) och normal. Dessutom är de numeriska värdena 100, 200, 300, 400, 500, 600, 700, 800 och 900 tillåtna. Dessa sträcker sig från extra-tunn (100) till extra-fet (900).
Sammanfatta definitioner
I samband med skriftdefinitioner spelar också egenskapen line-height en viktig roll, genom vilken radhöjden definieras. Jag kommer senare att återkomma mer ingående till denna egenskap. Vid detta tillfälle behöver den bara nämnas, eftersom den spelar en viss roll i samband med egenskapen font som visas nedan.
Ni kan kombinera de hittills presenterade uppgifterna om skärmdisplayen med varandra. För detta används den allmänna egenskapen font. Denna innehåller följande individuella uppgifter eller inkluderar dem
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Genom font kan olika skriftformateringar kombineras med varandra. Ni kan ange de tidigare nämnda egenskaperna, men behöver inte använda alla. Obligatoriska är dock egenskaperna för textstorlek och typsnittsfamilj.
Tack vare det korta skrivsättet kan CSS-filer hållas kortare och mer överskådliga.
Den ordningsföljd som visas nedan måste dock följas. Om de två egenskaperna font-size och line-height noteras, skiljs de åt med en snedstreck. Om det endast anges en värde vid detta tillfälle, står det för font-size.
Ett exempel:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust utvecklades för att kunna visa teckensnitt ungefär lika stora. Olika typsnitt har olika x-höjder med samma teckenhöjd. Dock är teckensnitt med större x-höjd lättare att läsa. Det kan då hända att ett dokument blir svårläst om det ursprungliga typsnittet inte finns och ersätts av ett annat med en mindre x-höjd. Med font-size-adjust ska denna skillnad kunna kompenseras.
Ett exempel:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
I nästa handledning får ni lära er ytterligare möjligheter att anpassa webbplatsens typografi.
