W podanym fragmencie CSS deklaracja font-family: Arial, Helvetica, sans-serif oznacza, że przeglądarka ma najpierw spróbować użyć czcionki Arial, jeśli jej nie znajdzie – Helvetica, a jeśli żadna z tych nazwanych czcionek nie będzie dostępna w systemie użytkownika, to sięgnie po dowolną domyślną czcionkę z rodziny sans-serif. I to właśnie jest klucz: słowo kluczowe sans-serif na końcu definiuje rodzinę kroju pisma, czyli czcionkę bezszeryfową.
Czcionki bezszeryfowe (sans-serif) nie mają tzw. szeryfów, czyli małych ozdobników na końcach liter. Przykłady takich krojów to właśnie Arial, Helvetica, Verdana, Roboto. W specyfikacji CSS (np. CSS Fonts Module Level 3) wyraźnie wyróżnia się generics: serif, sans-serif, monospace, cursive, fantasy itp. Zapis użyty w pytaniu jest zgodny z dobrymi praktykami: najpierw konkretne fonty, potem ogólna rodzina.
W praktyce taki zapis stosuje się niemal wszędzie w projektowaniu stron WWW: dla tekstów w interfejsach, nagłówków, opisów przycisków, bo krój bezszeryfowy jest bardziej czytelny na ekranach, szczególnie przy małych rozdzielczościach i na urządzeniach mobilnych. Moim zdaniem warto zapamiętać ten schemat: najpierw nazwy konkretnych fontów, na końcu zawsze jeden z generycznych typów (sans-serif, serif, monospace itd.). Dzięki temu masz pewność, że nawet jeśli użytkownik nie ma zainstalowanego Ariala czy Helvetiki, i tak zobaczy tekst w odpowiednim rodzaju czcionki – w tym wypadku właśnie bezszeryfowej. To jest standardowa i rekomendowana praktyka w CSS, stosowana praktycznie w każdym profesjonalnym projekcie webowym.
W tym pytaniu łatwo się pomylić, bo wiele osób bardziej kojarzy konkretne nazwy fontów niż ich rodziny. Kluczowe jest zrozumienie, jak działa właściwość font-family w CSS. Zapis font-family: Arial, Helvetica, sans-serif definiuje listę krojów w kolejności priorytetu. Przeglądarka sprawdza po kolei: najpierw próbuje użyć Ariala, potem Helvetiki, a jeśli żaden z nich nie jest dostępny na urządzeniu, wybiera dowolny systemowy font z rodziny sans-serif. I to właśnie ostatni element – sans-serif – określa typ czcionki, czyli że ma to być krój bezszeryfowy.
Czcionka szeryfowa (serif) to np. Times New Roman czy Georgia, z charakterystycznymi „ogonami” i ozdobnikami na końcach liter. Tutaj nie ma ani nazwy serif, ani generycznego słowa serif, więc nie ma podstaw, by mówić o kroju szeryfowym. Czcionka maszynowa, nazywana w CSS monospace, to taka, w której wszystkie znaki mają tę samą szerokość, jak w starych maszynach do pisania (np. Courier New). W kodzie nie pojawia się słowo monospace ani żaden typowy font maszynowy, więc to też odpada.
Z kolei określenia typu „dekoracyjna” mogą mylić, bo w CSS istnieje kiedyś częściej używany generic fantasy, czasem kojarzony z ozdobnymi krojami, ale w tym przykładzie nie mamy ani fantasy, ani cursive, tylko wyraźnie sans-serif. Typowy błąd myślowy polega na tym, że ktoś patrzy na nazwę Arial i nie kojarzy jej z rodziną bezszeryfową, albo sugeruje się wyglądem przykładowego tekstu z jakiegoś edytora. W praktyce jednak to właśnie Arial i Helvetica są klasycznymi reprezentantami rodziny sans-serif. Warto patrzeć na ostatni człon deklaracji font-family – ten generyczny typ jest zawsze najważniejszą wskazówką, do jakiej kategorii należy krój pisma w danym stylu.