Teksta noformēšana ir viens no CSS pamatuzdevumiem. Parasti vispirms pamatvērtības norāda body elementam — tās attieksies uz visu lapu, ja elementam nav norādīts kaut kas specifiskāks.

font-family — fontu saime

font-family: 'Segoe UI', Arial, Helvetica, sans-serif;

Norāda fontu vai vairākus fontus prioritātes secībā. Ja lietotāja ierīcē nav pirmā fonta, tiks izmantots nākamais. Fontu nosaukumus, kas satur atstarpes, liek pēdiņās. Saraksta beigās vienmēr norāda fonta tipu kā rezervi:

  • sans-serif — fonti bez serifiem (Arial, Helvetica)
  • serif — fonti ar serifiem (Times New Roman, Georgia)
  • monospace — vienplatuma fonti (Courier, Consolas) — kodam

Google Fonts

Mūsdienās populārs risinājums ir Google Fonts, kas piedāvā simtiem bezmaksas fontu. Lai tos izmantotu, pievieno saiti HTML galvenē un norādi fontu CSS:

<link rel="nofollow noopener noreferrer" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

body { font-family: 'Inter', sans-serif; }

font-size — teksta izmērs

font-size: 16px;

Populārākās mērvienības:

  • px — pikseļi (fiksēts izmērs)
  • rem — attiecībā pret saknes elementa izmēru (ieteicams!). 1rem = saknes font-size
  • em — attiecībā pret vecākelementa izmēru
  • % — procentuāli no vecākelementa

Modernajos projektos ieteicams izmantot rem, jo tas nodrošina labāku mērogošanu un pieejamību.

font-weight — fonta biezums

font-weight: bold;
font-weight: 700; /* tas pats, kas bold */
font-weight: 300; /* plāns (light) */

Skaitliskās vērtības no 100 līdz 900. Visbiežāk lietotās: 400 (normal) un 700 (bold).

font-style — slīpraksts

font-style: italic; /* slīpraksts */
font-style: normal; /* normāls */

line-height — rindu augstums

line-height: 1.6;

Norāda attālumu starp teksta rindām. Ieteicamā vērtība lasāmam tekstam ir 1.4–1.8. Labāk norādīt kā skaitli bez mērvienības.

text-align — teksta līdzinājums

text-align: left; /* pie kreisās malas (noklusējums) */
text-align: center; /* centrēts */
text-align: right; /* pie labās malas */
text-align: justify; /* pie abām malām */

text-decoration — teksta dekorācija

text-decoration: underline; /* pasvītrojums */
text-decoration: line-through; /* svītrojums cauri */
text-decoration: none; /* noņem dekorāciju */

Bieži izmanto, lai noņemtu pasvītrojumu saitēm: a { text-decoration: none; }

text-transform — burtu reģistrs

text-transform: uppercase; /* VISI LIELIE */
text-transform: lowercase; /* visi mazie */
text-transform: capitalize; /* Katra Vārda Pirmais Lielais */

letter-spacing un word-spacing

letter-spacing: 2px; /* atstarpe starp burtiem */
word-spacing: 5px; /* atstarpe starp vārdiem */

text-indent

text-indent: 2em; /* atkāpe pirmajai rindai */

Saīsinātā font īpašība

Vairākas fonta īpašības var apvienot vienā rindiņā:

/* font: style weight size/line-height family; */
font: italic 700 18px/1.6 'Inter', sans-serif;