Dobór czcionek na stronę www

Dobór czcionek na stronę www

Autor: Renata Windroos

Projektując stronę www, zastanawiamy się jaka czcionka najlepiej będzie oddawać charakter witryny. Musimy wziąć pod uwagę nie tylko wygląd czcionki lecz również prawidłowe jej wyświetlanie w różnych przeglądarkach. Co ciekawe - brak jest czcionek, które można uznać za „zupełnie bezpieczne”.

Co oznacza że czcionka jest bezpieczna?

Otóż zdarza się, że projektanci stron internetowych zapominają
o użytkownikach systemów operacyjnych innych niż Windows. Znane
i często używane w tym systemie czcionki nie zawsze mają swe odpowiedniki w innych systemach (MacOS, różne dystrybucje Linux'a, Android …).

Weźmy dla przykładu czcionkę Tahoma. Czcionka ta w systemie MacOS ma odpowiednik o nazwie Geneva, w niektórych dystrybucjach Linuxa istnieje podobna (lecz nie identyczna) czcionka Kalimati, w innych zaś najbardziej zbliżona będzie znana także z Windowsa Verdana.

Mimo że istnieje niewiele użytecznych a jednocześnie bezpiecznych zestawów czcionek,

to te które mamy do dyspozycji także mogą stać się efektywnym rozwiązaniem, szczególnie przy użyciu pewnych mechanizmów CSS takich jak rodziny czcionek (font stacks).

Rodziny czcionek

Rodziny czcionek uporządkowane są zestawami według „ważności”. Definiujemy je w CSS-owym atrybucie font-family, np.:

font-family: Tahoma, Geneva, Kalimati, Verdana, sans-serif

Przeglądarka dopasowuje czcionki do danego elementu html kierując się kolejnością nazw podanych jako wartość font-family. W naszym przykładzie przeglądarka najpierw próbuje znaleźć czcionkę Tahoma, a jeśli jej nie ma
w systemie, szuka czcionki Geneva itd.

Wszystko zostaje w Rodzinie

Definiując rodzinę czcionek, po pierwsze należy rozważyć kontekst jej zastosowania, to jest funkcję jaką będzie spełniać tekst zapisany wybraną czcionką. Inaczej należy dobrać rodzinę dla nagłówków, inaczej dla treści artykułu a inaczej dla notek typu keywords czy copyright – inaczej bowiem niektóre czcionki „sprawują się” gdy wyświetlimy je w dużych rozmiarach,
a inaczej gdy występują w rozmiarze 12px w dużych blokach tekstu.

Na przykład, Helvetica wygląda dobrze na ekranie, gdy tekst jest wystarczająco duży, zaś Arial wygląda i „czyta się” nieco lepiej niż Helvetica w mniejszych formatach. Dlatego też w Twojej rodzinie czcionka Helvetica może występować w zależności od tego, czy projektujesz ją dla zawartości czy też dla tytułu strony.

Projektując rodzinę czcionek najpierw wybierajmy idealnego „kandydata”, potem zaś w zależności od kontekstu dokonujmy wyboru pozostałych czcionek rodziny.

Możemy przy tym kierować się zasadami wymienionymi poniżej:

Tytuły [ więcej niż 12px ]:

font-family: [czcionka]Idealna, Alternatywna,Podobna,Generyczna;

Idealna – Wybór nie musi być ograniczony tym co jest uważane powszechnie za "czcionkę bezpieczną". Istnieje wiele innych czcionek, które mają dość wysoki poziom popularności,

i spośród nich wybieramy. Nie stosujemy jedynie czcionek specyficznych,
a ograniczamy się do takich które są standardowymi czcionkami systemów.

Alternatywna – Wybierając czcionkę na tytuł lub nagłówek musimy pamiętać że przy większych rozmiarowo znakach bardziej zauważalne są szczegóły ich kroju, stąd starajmy się aby czcionka alternatywna oddawała przede wszystkim styl i ducha czcionki idealnej, natomiast mniej istotny może okazać się faktyczny lub względny jej rozmiar. Aby odnaleźć czcionkę stylowo zbliżoną do idealnej poszukać możemy w klasyfikacji krojów. Ogólnie zwracamy uwagę na podobieństwa formy poszczególnych znaków.

Podobna – Tutaj bierzemy pod uwagę czcionki „na oko” podobne, a przede wszystkim takie, które nie burzą oczekiwanego przez nas wyglądu stron.

Generyczna – Czcionki należące do tej samej grupy (np. sans-serif)

Akapity [ poniżej 12px ]:

font-family: [czcionka]Idealna, Alternatywna,Zgodna,Generyczna;

Idealna – Nawet jeśli zamierzamy dopasować wygląd tekstu do stylu tytułu, może warto rozważyć czytelność kroju pisma na przestrzeni kilku akapitów. Na przykład: Neue Helvetica i Arial są lepiej przystosowane do odczytu
z ekranu niż Helvetica.

Zgodna – Szukamy tutaj czegoś co jest szeroko implementowane
w systemach, a co nie psuje naszego layoutu. Dla przykładu pomiędzy czcionkami Times New Roman i Georgia jest jedynie 2pt różnicy, ale zastosowanie jednej jako zamiennika drugiej spowoduje na przestrzeni akapitów testu znaczne przesunięcia i w efekcie może całkowicie pogrzebać nasz skądinąd ładny projekt.

Podobna – Coś w podobnym stylu a jednocześnie szeroko implementowane na rożnych platformach

Generyczna – Czcionki należące do tej samej grupy (np. sans-serif).

Jeśli projektujemy strony w mniej popularnym systemie (np. MacOs) starajmy się jako idealnych używać czcionek typowych dla Windows, ponieważ większość z internautów pracuje w tym systemie.

Stwórz swoją rodzinę

Poniżej kilka propozycji rodzin czcionek dostosowanych do akapitów (a)
oraz tytułów (t)

Arial, “Helvetica Neue”, Helvetica, sans-serif - a, t

“Courier New”, Courier, monospace - a, t

Times, “Times New Roman”, Georgia, serif - a, t

Baskerville, Times, “Times New Roman”, serif - t

Garamond, “Hoefler Text”, Palatino, “Palatino Linotype”, serif - t

Tahoma, Verdana, Geneva - t

Garamond, “Hoefler Text”, Times New Roman, Times, serif - a

Tahoma, Geneva, Verdana - a

Verdana, Geneva, Tahoma, sans-serif - a

---

Renata Windroos, renata.windroos@gmail.com

Po więcej informacji zapraszam na naszą stronę oraz bloga.

Licencjonowane artykuły dostarcza Artelis.pl.