Tipografija i boje

Lekcija 5. Tipografije i boje

Uvod

Tipografija i boje su ključni elementi vizuelnog identiteta svake web stranice. Tekst mora biti čitljiv, dobro raspoređen i estetski usklađen sa bojama koje prenose osećaj i poruku. U ovoj lekciji naučićemo kako da koristimo fontove, veličine, razmake i boje u CSS‑u.

Primer tipografije i boja

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tipografija i boje</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        color: #333;
      }
      h1 {
        font-size: 32px;
        color: darkblue;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        color: #555;
      }
      .highlight {
        background-color: yellow;
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Naslov stranice</h1>
    <p>Ovo je paragraf sa osnovnim stilom.</p>
    <p class="highlight">Ovaj paragraf ima žutu pozadinu i crveni tekst.</p>
  </body>
</html>

Analiza primera

font-family: određuje tip fonta (npr. Arial, sans-serif).
font-size: veličina teksta (npr. 16px, 32px).
line-height: razmak između redova, poboljšava čitljivost.
color: boja teksta (HEX, RGB, HSL ili nazivi boja).
background-color: boja pozadine elementa.

Boje u CSS‑u

HEX: #ff0000 (crvena).
RGB: rgb(255, 0, 0) (crvena).
HSL: hsl(0, 100%, 50%) (crvena).
Nazivne boje: red, blue, green.

Zaključak

Tipografija i boje oblikuju vizuelni identitet stranice. Dobro odabrani fontovi i kontrastne boje čine sadržaj čitljivim i privlačnim. Ovo je temelj za kreiranje profesionalnog dizajna.