skad-sie-wziely-fonty-webowe

Skąd się wzięły fonty webowe?

Fonty webowe weszły do powszechnego użycia zaledwie kilka lat temu, a mimo to opanowały strony internetowe i podbiły serca żądnych urozmaiconej typografii na stronach projektantów. Jak to się stało i co do tego doprowadziło?

Myślę, że niemal każdy słyszał o fontach webowych, chociażby dzięki popularności biblioteki Google Web Fonts, czyli „fontów googlowych”. Każdego dnia miliony osób na całym świecie ogląda strony, które z nich korzystają. Stały się powszechne, że niektórzy nie wiedzą jak to było bez nich.

Dlatego dziś pokażę jak to było kiedyś. I jak doszliśmy do momentu, w którym jesteśmy obecnie.

 

Czy pamiętasz pierwsze strony internetowe?

Takie, które miały naprawdę kiepską szatę graficzną, mało obrazków i mnóstwo tekstowych linków? No właśnie – takie były początki, bo na pierwszych stronach internetowych typografia była bardzo uboga. Jeżeli chciało się wrzucić napis stworzony niestandardowym fontem, musiał on być obrazkiem. To powodowało, że:
a) programiści mieli więcej pracy (musieli dobrze przyciąć i ustawić obrazek),
b) nie można było zaznaczyć czy przeszukać tekstu będącego na obrazku (pozycjonowanie strony było bardzo kiepskie),
c) sporo ludzi nie widziało obrazka, gdyż transfer był na tyle drogi, że wiele osób wyłączało ściąganie obrazków w przeglądarce.

Kiepsko, prawda?

Czy znasz web.archive.org? Ta strona jest potwierdzeniem  tego, że Internet nie zapomina. Możesz cofnąć się w czasie i sprawdzić jak konkretna strona wyglądała kilkanaście lat temu. Nie wszystkie daty są dostępne, ale wystarczająco dużo, żeby zobaczyć jak wyglądała strona onet.pl w kwietniu 1996 roku:

onetplCałość zobaczysz tutaj.

Jak widzisz, głównie operowano kolorami i różnymi rodzajami krojów – technologia nie pozwalała na nic więcej. Na stronach dominowały tekstowe linki a niestandardowe fonty były umieszczane w formie banerów lub obrazków.

Ale czy wiesz w jaki sposób przeglądarka wyświetlała wtedy teksty na stronach?

 

Bezpieczne fonty

Na każdym urządzeniu masz zainstalowane fonty – część dostajesz z systemem operacyjnym (Windows, Mac OS), niektóre możesz mieć z pakietu Adobe czy Offica. Mając je w systemie, przeglądarka może wyświetlić ten font na stronie.
Czyli:
1. Przyjmijmy, że tekst na stronie ma się wyświetlić Arialem – taka jest definicja w HTMLu (tak zadecydował programista i tak została zaprogramowana strona).
2. Przeglądarka w momencie uruchomienia strony sprawdza: czy masz taki font zainstalowany na komputerze?
Jeżeli tak – wyświetli tekst Arialem.
Jeże nie – wyświetli tekst innym, podobnym fontem.

Jak widzisz, nie mając fontów webowych, można było wyświetlać teksty na stronie, bazując na fontach systemowych. Powstała nawet lista bezpiecznych fontów (było ich około 16), które działały zarówno na Macach jak i komputerach PC (lista fontów systemowych na obu systemach jest różna, ale niektóre fonty się powtarzają).

Problem był taki, że lista bezpiecznych fontów była ograniczona. W efekcie fonty te się po prostu opatrzyły, ponieważ były wszędzie. Powtarzały się na każdej stronie. Użytkownicy stron mieli dość tego zestawu fontów a projektanci stron potrzebowali urozmaicenia – chcieli bowiem tworzyć ciekawsze makiety, ale nie mieli odpowiednich narzędzi.

 

Jakie były możliwości?

Dzięki temu powstało kilka technologii, które umożliwiały wyświetlanie niestandardowych fontów na stronie.

Przykładem może być Scalable Inman Flash Replacement (sIFR) wdrożone w 2004 roku, które pozwalało na osadzenie fontu w filmiku Flash z użyciem JavaScriptu. Tekst można było zaznaczyć, ale wymagało to aktywowanego Flasha. Drugą popularną techniką był Cufon, który bazował na JavaScript – w efekcie serwował przeglądarce wektorowy format SVG. Cufon nie był zależny od Flasha, dzięki czemu trafił do powszechnego użycia.

Naprzeciw rosnącym oczekiwaniom twórców stron wyszło W3C (World Wide Web Consortium), odpowiedzialne za tworzenie standardów dotyczących stron www. Stworzono specjalną grupę, która miała znaleźć rozwiązanie pozwalające na wyświetlanie tekstu bezpośrednio na stronie, niezależnie od tego jakie fonty mamy zainstalowane na komputerach. To umożliwiłoby używanie fontów niestandardowych, których ludzie nie znają, w efekcie prowadząc do urozmaicenia typografii na stronach. Wymagało to zmiany podejścia – fonty musiały znajdować się na serwerze, z którego zostaną pobrane do naszych przeglądarek, a następnie wyświetlone na stronie w wybranym przez programistę miejscu. Format OpenType czy TrueType nie był przygotowany do wyświetlania fontów na stronach – potrzebny był plik skompresowany, który szybko zostanie pobrany przez przeglądarkę.

 

Formaty fontów webowych

Najpierw firma Microsoft stworzyła format EOT (Embedded Open Type), który działa tylko w Internet Explorerze. Ponieważ IE to nie jedyna przeglądarka dostępna na rynku, w roku 2009 rozpoczęto prace nad formatem WOFF, czyli Web Open Font Format i niedługo później został on wdrożony jako standard. WOFF jest wspierany przez Firefoxa, Chrome, Safari czy Operę, ale przez IE dopiero od wersji 9. Przez to nie można było całkowicie zastąpić EOT fontami WOFF chcąc obsłużyć starsze wersje Internet Explorera. Powstał także format SVF (Scalable Vectors Graphic) używany głównie na urządzeniach mobilnych. Formaty OpenType czy TrueType są czasami używane jako fonty webowe, ale nie jest to zbyt powszechne ze względu na ich spory rozmiar.

Dlaczego powstało aż tyle formatów?
Żeby móc obsłużyć wszystkie rodzaje i wersje przeglądarek. Utrudnia to pracę programistom, którzy muszą napisać więcej kodu, ale w efekcie wszystko bardzo dobrze działa.
Dzięki tym formatom możemy używać fontów na stronach internetowych, unikając sztucznego „przełączania się” tekstu – w poprzednich rozwiązaniach najpierw pojawiał się tekst np. z Arialem, a dopiero po chwili pojawiał się ten właściwy, stworzony z użyciem poprawnego fontu. Tekst jest też możliwy do zaznaczenia, dzięki czemu nasza strona lepiej się pozycjonuje. Pliki fontów umieszczamy na serwerze – naszym bądź producenta (to zależy od konkretnej licencji).

 

Co dalej?

Fonty webowe stały się popularne dzięki darmowej bibliotece Google Web Fonts i weszły do powszechnego użycia. Można je zaimplementować w naprawdę prosty sposób.

Jest to rewolucja jeśli chodzi o typografię na stronach. To spełnione marzenie każdego projektanta, który musiał się nagimnastykować przy wrzucaniu obrazków zamiast tekstu lub filmików Flash. Bardzo ułatwiły pracę programistom i web designerom, którzy mają znacznie większy wybór jeśli chodzi o fonty.

Warto pamiętać, że użycie fontów webowych można w bardzo prosty sposób śledzić. Wielu producentów monitoruje użycie swoich fontów w Internecie i ściąga opłaty od nieuczciwych użytkowników, którzy tworzą komercyjne strony bez wykupienia odpowiedniej licencji. Ale o licencjonowaniu fontów webowych będzie kolejny post :)

 

Mam nadzieję, że nieco przybliżyłam Ci historię fontów webowych. Jest to dla mnie fascynujące jak bardzo zmieniło się to w ciągu ostatnich kilku lat.

Jeżeli uważasz, że ten post jest wartościowy – udostępnij go! Może jest ktoś, kto chętnie poczyta o fontach webowych i powspomina jak wyglądały kiedyś strony :)

I jeszcze bardzo polecam świetny artykuł, który pomógł mi usystematyzować wiedzę w tym temacie: https://prowebtype.com/history/.

Share: