Proiectarea tipografică joacă un rol important în proiectarea site-urilor web. Conținutul text bine format și formatat ajută un site să aibă mai mult succes, creând o experiență de citire plăcută și ușor de consumat. O parte din eforturile dvs. în lucrul cu tipul va fi să alegeți fonturile potrivite pentru designul dvs. și apoi să utilizați CSS pentru a adăuga aceste fonturi și stiluri de fonturi pe afișajul paginii. Acest lucru se face folosind ceea ce se numește a stiva de fonturi.
Stive de fonturi
Cand tu specifică un font de utilizat pe o pagină web, este o bună practică să includeți și opțiuni alternative în cazul în care alegerea fontului dvs. nu poate fi găsită. Aceste opțiuni de rezervă sunt prezentate în stiva de fonturi. Dacă browserul nu poate găsi primul font listat în stivă, acesta se mută pe următorul. Continuă acest proces până când găsește un font pe care îl poate folosi sau rămâne fără opțiuni (caz în care alege doar orice font de sistem pe care îl dorește). Iată un exemplu de cum ar arăta o stivă de fonturi în CSS atunci când se aplică elementului „body”:
corp {
font-family: Georgia, „Times New Roman”, serif;
}
Fontul Georgia apare mai întâi, deci în mod implicit, acesta este ceea ce va folosi pagina, dar dacă fontul respectiv nu este disponibil din anumite motive, pagina revine la Times New Roman.
Închideți Times New Roman între ghilimele duble, deoarece este un nume cu mai multe cuvinte. Numele fonturilor cu un singur cuvânt, cum ar fi Georgia sau Arial, nu necesită ghilimele, dar numele fontului cu mai multe cuvinte cu spații încorporate are nevoie de ele, astfel încât browserul știe că toate aceste cuvinte cuprind numele fontului.
Stiva de fonturi se termină cu cuvântul serif. Acesta este un nume generic de font-familie. În cazul puțin probabil că o persoană nu are Georgia sau Times New Roman pe computerul lor, site-ul ar folosi orice font serif ar putea găsi. Browserul va alege un font pentru dvs., dar cel puțin oferiți îndrumări, astfel încât să știe ce tip de font ar funcționa cel mai bine în cadrul designului.
Familii de fonturi generice
Numele generic al fontului disponibil în CSS este:
- cursiv
- fantezie
- monospațial
- serif
- sans-serif
Deși există multe alte clasificări de fonturi disponibile în designul web și tipografie, inclusiv seria de plăci, blackletter, display, grunge și multe altele, aceste cinci nume de fonturi generice sunt cele pe care le-ați folosi într-o stivă de fonturi în CSS.
- Fonturi cursive - de multe ori prezintă forme de scrisori subțiri, ornamentate, care sunt menite să reproducă textul scris de mână. Aceste fonturi, datorită literelor lor subțiri, înflorite, nu sunt adecvate pentru un bloc mare de conținut, cum ar fi copia corporală. Fonturile cursive sunt utilizate în general pentru titluri și pentru nevoile de text mai scurte, care pot fi afișate în dimensiuni mai mari de caractere.
- Fonturi fantezie - sunt fonturile oarecum nebune care nu se încadrează cu adevărat în nicio altă categorie. Fonturi care replică sigle bine-cunoscute, cum ar fi formele de litere din Harry Potter sau Inapoi in viitor filme, intră în această categorie. Aceste fonturi nu sunt adecvate pentru conținutul corpului, deoarece sunt adesea atât de stilizate încât citirea unor pasaje mai lungi de text scrise în aceste fonturi este mult prea greu de realizat.
- Fonturi Monospace - prezintă forme de literă de dimensiuni și spații egale, așa cum ați fi găsit pe o mașină de scris veche. Spre deosebire de alte fonturi care au lățimi variabile pentru litere, în funcție de dimensiunea lor (de exemplu, cu majuscule W ocupă mult mai mult spațiu decât un litere mici eu), fonturile monospațiale utilizează o lățime fixă pentru toate caracterele. Aceste fonturi sunt adesea folosite pentru citirile de cod, deoarece arată clar diferit de celelalte texte de pe pagina respectivă.
- Fonturi Serif - folosiți puține ligături suplimentare pe formele de litere. Aceste piese suplimentare sunt numite serifuri. Fonturile serif comune sunt Georgia și Times New Roman. Fonturile Serif funcționează excelent pentru textul mare, cum ar fi titlul, precum și pasajele lungi ale textului și copierea corpului.
- Sanseriffonturi - nu au ligaturi. Numele înseamnă fără serifuri. Printre fonturile populare din această categorie se numără Arial sau Helvetica. Similar cu serifurile, fonturile sans-serif au performanțe la fel de bune atât în titluri, cât și în conținutul corpului, deși unele experții preferă ca blocurile mari de text să evite fonturile sans-serif, deoarece sunt mai greu de citit într-un punct mic dimensiuni.