@font-face, czyli czas na wiosenne odświeżenie typografii na stronach WWW

Gdy przychodzi nam zbudować stronę internetową dla typowego, niskobudżetowego klienta, tym, co decyduje o konwersji jego kapryszenia na wystawioną fakturę, jest przede wszystkim jej wygląd. Klient nie doceni zalet CMS-a, odporności na XSS, skuteczności filtrów antyspamowych czy godzin, które spędziliśmy nad optymalizacją skryptów. Taki klient będzie najczęściej mówił, że zielone tło jest nie dość czerwone, fonty za małe, „a zdjęcie proszę przerobić na sepię”. Banalne? Pewnie tak, ale rzadko kiedy mamy okazję tworzyć nowego Twittera, a na chleb trzeba zarobić. Dlatego tak łatwo klienta zachwycić pięknym fontem. Pytanie tylko: czy faktycznie efekty typograficzne są dziś łatwe we wdrażaniu?

W ostatnich miesiącach webmasterskiej praktyki odkryliśmy, że tym, co wyjątkowo dobrze działa na takich klientów, nawet jeśli działa tylko nieświadomie, jest zastosowanie atrakcyjnej webowej typografii. Makiety zbudowane z użyciem ładnych fontów, wychodzących poza standard Ariala, Timesa, Georgii czy Verdany, były wybierane przez właścicieli przyszłych witryn za prawie każdym razem, mimo że towarzyszyła im nieco wyższa cena. Co jest tego powodem?

Wpływ fontów na estetykę publikacji, zarówno webowych jak i papierowych, jest niezaprzeczalny. To one decydują o ergonomii czytania treści umieszczanych na witrynie, to one tworzą charakter strony i pozwalają jej uzyskać bardziej indywidualny wymiar.

Indywidualny – a mimo to, jak wynika z badań redaktorów Smashing Magazine, najczęściej stosowanymi fontami dla tekstu są Georgia (32%), Arial (28%) i Verdana (20%), zaś dla nagłówków Georgia (28%), Arial (28%) i Helvetica (20%). Wszystkie te fonty, poza ostatnim, to część tzw. Core Web Font Packu od Microsoftu, wydanego przez giganta z Redmond zestawu fontów TrueType, które miały ujednolicić internetową typografię. Jak widać, ujednoliciły skutecznie.

Czemu tak się stało? Pomimo rosnącej popularności technik podmiany fontów i pojawiania się usług takich jak Google Font API, większość webdesignerów po prostu nie chce ryzykować i używa tego, co zna. Zabawy z rozwiązaniami takimi jak sIFR czy Cufón to za dużo zachodu, WOFF to wciąż przyszłość.

Jest jednak rozwiązanie dobre na teraźniejszość, które bez większego zachodu możemy zaimplementować zarówno w witrynach już istniejących, jak i dopiero budowanych.

Wśród darmowych fontów można znaleźć prawdziwe perełki: JustOldFashion Manfreda Kleina.

Mowa o @font-face, które na dzień dzisiejszy jest najpowszechniej obsługiwaną technologią fontów, sterowaną przez kaskadowe arkusze stylów, pozwalającą na wykorzystanie zarówno wolnych, darmowych jak i komercyjnych (choć to z licencyjnymi problemami) krojów czcionek.

W tym tekście pokażemy Wam, jak najlepiej wykorzystywać @font-face, zapewniając obsługę tej dyrektywy na wszystkich przeglądarkach, i jak pozyskać odpowiednie fonty.

Kompatybilność

Na wiosnę 2011 roku trudno w Polsce znaleźć użytkowników przeglądarek, które nie radziłyby sobie z @font-face. Zobaczcie sami:

Mozilla Firefox (niemal 48% rynku) obsługuje @font-face od wersji 3.5. Z wersji 3.0 przeglądarki korzysta jakieś 3% internautów.
Internet Explorer (27% rynku) obsługuje @font-face od wersji (sic!) 4. Przez te wszystkie lata przeglądarka Microsoftu wymagała jednak specjalnego formatu fontów, dopiero IE9 przynosi obsługę standardowej technologii WOFF.
Google Chrome (ponad 13% rynku) obsługuje @font-face od wersji 4. Dziś trudno spotkać kogokolwiek, kto używa wcześniejszych wersji Chrome.
Opera (niemal 10% rynku) obsługuje @font-face od wersji 10. Liczba użytkowników Opery 9.x jest już znikoma.
Safari/Safari Mobile/Webkit (nieco ponad 1%) obsługuje @font-face od wersji 3.1.

W praktyce pojawiają się oczywiście problemy. Za wyjątkiem Internet Explorera i starszych wersji mobilnego Safari (do wersji 4.1 iOS-a włącznie), wszystkie przeglądarki obsługują fonty TrueType. Firefox, Chrome, Opera i Safari obsługują dodatkowo OpenType i WOFF. Internet Explorer wymaga własnego formatu Embedded OpenType (EOT), zaś starsze wersje mobilnego Safari obsługują tylko fonty SVG.

Jak widać, aby uzyskać dobry efekt, musimy liczyć się z koniecznością przygotowania przynajmniej trzech formatów dla wykorzystanych na witrynie fontów – TTF, EOT i SVG.

Dostępność fontów

Dobre fonty kosztują, a co więcej, wydawane są na restrykcyjnych licencjach, zakazujących ich redystrybucji. W praktyce oznacza to, że wykorzystanie w @font-face topowych fontów od Adobe czy Corela, które dostajemy w pakietach oprogramowania tych firm, choć technicznie możliwe, stanowi naruszenie praw autorskich. Internauta otrzymuje bowiem dostęp do pliku fontu, który może później wykorzystywać do własnych celów, bez opłacania licencji.

Każdą stronę możecie odmienić na lepsze dzięki odpowiedniemu dobraniu fontów.

Na szczęście rośnie liczba serwisów oferujących niezłe fonty, dostępne na wolnych licencjach, które możemy legalnie zastosować na naszych stronach w tej technologii. W ich ofercie, co szczególnie dla nas ważne, znaleźć można kroje zawierające polskie znaki diakrytyczne.

My polecamy zapoznać się szczególnie z hostującymi darmowe fonty serwisami Fontex i Font Squirrel. Jeśli mamy budżet na opłacenie licencji pozwalającej na wykorzystanie komercyjnych fontów na stronach WWW, warto zajrzeć do Fonts Live i Typotheque.

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

7 skomentuj »

Komentarze

#1 wujekbogdan 2011-04-04 13:35:12 0
Niestety nie jest do końca tak pięknie jak by się mogło wydawać. Co prawda są proste rozwiązania cross-browser i konwertery fontów, ale pojawiają się inne problemy.

Pierwszy to dostępność fontów ze znakami PL, który np. w Google Font API jest jak na lekarstwo.

Kolejny to konieczność zamieszczenia fontów w trzech, albo nawet 4 wariantach: regular, bold, italic i ewentualnie bold+italic.

I tutaj Google Font API wydaje się być najprostszym i najszybszym rozwiązaniem.

BTW, w artykule wkradł się babol. Arial i Helvetica to zamienniki. Na macach mamy Helvetice, na Windowsach Arial. http://typografia.ogme.pl/index.php?option=com_content&task=view&id=48&Itemid=4
IP: 89.78.194.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.27 (KHTML, like Gecko) Chrome/12.0.712.0 Safari/534.27
#2 eimi^® 2011-04-04 13:42:02 0
Arial i Helvetika są tylko rozmiarowo zamiennikami. Estetycznie już nie są. Za głoszenie takich haseł każdy hipster zgarotowałby Cię wujku bogdanie łańcuchem swojego roweru ;-).

A Google Font API nie ma niestety za wiele polskich fontów. Z 5-6 w miarę interesujących krojów można znaleźć.

Dziękuję za uwagę o wariantach, przeoczyłem niewyspany :/ Dopiszemy.
IP: 90.156.40.[...] Mozilla/5.0 (X11; Linux i686; rv:2.0.0) Gecko/20100101 Firefox/4.0
#3 Ole 2011-04-04 16:00:27 0
Niestety osadzanie własnych fontów ma jeszcze jedną wadę. Wzrasta bardzo mocno waga strony. Zwykłe, pogrubione, kursywa. I już możemy mieć 500kB więcej. Do tego .eot po konwersji wygląda masakrycznie.
IP: 77.252.252.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.204 Safari/534.16
#4 dns-revolver 2011-04-04 17:38:27 0
Paweł Wimmer ostatnio pisał o fontach (czyżby zbieg okoliczności? ;) ) i podał listę fontów z Google Font zawierających polskie ogony

http://poradnikwebmastera.blox.pl/2011/04/Polskie-znaki-w-Google-Web-Fonts.html
IP: 178.235.217.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13 ChromePlus/1.6.0.0
#5 eimi^® 2011-04-04 17:48:14 0
Kto to jest Paweł Wimmer? :)

Całkiem niedawno o fontach pisało Smashing Magazine. I wiele innych liczących się serwisów dla webdesignerów :).

Zgadzam się, że waga strony rośnie, ale też to nie są już lata zerowe, a typowy klient nawet nie zauważy. Będzie za to widział, że strona jest ładniejsza. Przyrzekam, jeszcze nie spotkałem się z narzekaniem na szybkość ładowania, za to permanentnie tacy klienci marudzą, że kolor czerwony jest za mało zielony.
IP: 90.156.40.[...] Mozilla/5.0 (X11; Linux i686; rv:2.0.0) Gecko/20100101 Firefox/4.0
#6 Krisq 2011-04-05 09:35:14 0
Witam.

Dziekuje. Ciekawy artykuł.

Jeśli chodzi o klientów to staram się im uświadomić zeby nie uzywać fontów których nie ma klient.

Strony internetowe to nie DTP, mają być funkcjonalne i użyteczne dla usera.

Jeśli muszę używam Cufon lub fonty Googla. Wg mnie się sprawdza.
IP: 83.24.115.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
#7 Ashi 2011-04-15 12:27:25 0
A spotkał się ktoś z problemami w renderowaniu takich fontów w Operze? Ucinanie wysokości i końców linii, pomijanie cyfr, skopany kerning, obniżenie tekstu i ogólna koślawość. Może trzeba ustawić jakieś specyficzne parametry w generatorze Font Squirrel? Na pewno robię coś nie tak bo nie wierzę by Opera miała bezużyteczny silnik renderowania fontów.
IP: 178.73.50.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.204 Safari/534.16

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.