Rodziny czcionek
Po ogólnym podziale czcionek, można przejść do ich rodzin. Rodzina czcionki to wszystkie jej rodzaje, czy warianty w ramach jednej nazwy. Poszczególne czcionki w danej rodzinie mogą różnić się grubością oraz stylem.
Dla przykładu możemy wziąć rodzinę czcionki Arial. Składa się ona z kliku czcionek o różnych stylach. Podstawową czcionką jest regular, to ta, której najczęściej używamy, do długich bloków tekstowych. Czcionki, które w nazwie mają italic (ang. kursywa) są pochylone, natomiast czcionki bold (ang. pogrubienie) oraz black (ang. czarny) są pogrubione w różnym stopniu. Możemy spotkać również czcionki o nazwie narrow (ang. wąski), ich znaki są węższe, takie jakby ściśnięte.
font-family
Za pomocą własności font-family (ang. rodziny czcionki) możemy wybrać rodzinę czcionki.
p { font-family: Arial; }
Powyższa deklaracja spowoduje użycie czcionki Arial we wszystkich paragrafach. Hmmm, ale tych czcionek jest chyba dużo i chyba, żeby skorzystać z danej czcionki musimy mieć ją najpierw zainstalowaną w systemie operacyjnym na naszym komputerze. Rzeczywiście czcionek jest bardzo dużo i to czy zadana przez nas czcionka zostanie prawidłowo wyświetlona, zależy od tego czy użytkownik ją posiada na swoim urządzeniu.
Font stack
Własność font-family pozwala nam na zadeklarowanie większej ilości czcionek, w razie gdyby czcionka, którą wybraliśmy była niedostępna. Kolejne czcionki dodajemy po przecinkach, a technika ta zwana jest tzw. font stack (ang. stos czcionek). Możemy dodać dowolną ilość czcionek zapasowych, ale najlepiej, żeby wyglądem zbliżone były do czcionki przez nas preferowanej, czyli tej pierwszej w kolejce.
p { font-family: Arial, Helvetica, sans-serif; }
Zapis ten oznacza, że jeśli w systemie nie zostanie odnaleziona czcionka Arial, następna czcionka z listy (Helvetica) zostanie użyta itd. Dobrą praktyką jest dodanie na końcu stosu czcionek, typu preferowanej czcionki. Czcionka Arial jest czcionką bezszeryfową, dlatego na końcu dodajemy sans-serif.
Jeśli nazwa czcionki jest dwuczłonowa umieszczamy ją w cudzysłowach podwójnych " "
bądź pojedynczych ' '
.
p { font-family: 'Helvetica Neue', Helvetica, sans-serif; }