Fonturile Web, istorie si actualitate

Incep prin a-mi cere scuze celor care imi urmaresc blogul, pentru cele doua luni in care am lipsit de aici, dar am lucrat la niste proiecte, unul din ele dificil, care mi-au acaparat tot timpul liber.

Astazi voi aborda problema utilizarii fonturilor in design-ul Web. Imi propun sa prezint cu aceasta ocazie si o scurta istorie dar sa prezint si solutiile actuale.

Istoria controlului afisarii fonturilor in pagina Web incepe din 1995. Pana atunci aspectul lor lor nu putea fi controlata de designer ci depindea de setarile browser-ului si de compatibilitatea dintre acesta si sistemul de operare al utilizatoruliui.

In 1995 Netscape introduce tag-ul <font>, dar si in aceste conditii se manipulau doar anumite proprietati ale fonturilor deja instalate pe calculatorul utilizatorului, adica, in continuare, designer-ul nu putea sa folosesca orice fel de font.

Atunci a aparut expresia Web Safe Fonts, ca fiind acea familie de fonturi care sunt instalate pe marea majoritate a calculatoarelor existente, exemplu: Times New Roman, Impact, Tahoma, Arial, Curier, ... Aceasta abordare avea si o parte buna, nu trebuia sa-ti bati capul cu drepturile de utilizare asupra fonturilor, atat timp cat designer-ul doar declara aceste fonturi dar ele erau folosite doar daca erau instalate pe calculatorul utilizatorului, deci era problema lui daca nu avea licenta.

Declararea lor era facuta in CSS si era de forma:

<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>

Iar utilizarea:

<p class="serif">Acest paragraf este scris in Times New Roman.</p>
<p class="sansserif">Acest paragraf este scris in Arial.</p>

In 1996 Microsoft ia initiativa de a introduce in sistemul lui de operare Core fonts for the Web: Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings si Verdana, sub licenta EULA, dar aceste fonturi nu erau implicit incluse in toate sistemele de operare.

Pentru situatiile in care un font nu era instalat pe calculatorul utilizatorului a fost implementata metoda Fallback Fonts, adica, o declaratie CSS care permitea afisarea altui font daca cel primar nu era prezent:

font-family: Helvetica, "Nimbus Sans L", "Liberation Sans", Arial, sans-serif;

Datorita acestor limitari, designer-ii trebuiau sa apeleze la tehnici laborioase, precum afisarea textelor cu fonturi speciale sub forma de imagini si apoi incadrarea acestor imagini in pagina HTML prin suprapunerea lor peste textul scris cu fonturi Safe.

CSS2 introduce regula @font-face. Aceasta regula este controversata, deoarece presupune descarcarea fontului pe calculatorul utilizatorului, incalcand astfel anumiti termeni ai licentei de utilizare. Au aparut astfel formate care rezolva aceasta problema: Embedded OpenType (EOT), Web Open Font Format (WOFF), Scalable Vector Graphics (SVG) si TrueDoc (PFR).

O declaratie @font-face arata asa:

@font-face {
    font-family: 'AlexBrushRegular';
    src: url('../fonts/AlexBrush-Regular-OTF-webfont.eot');
    src: url('../fonts/AlexBrush-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/AlexBrush-Regular-OTF-webfont.woff') format('woff'),
         url('../fonts/AlexBrush-Regular-OTF-webfont.ttf') format('truetype'),
         url('../fonts/AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Fiti linistiti, fontul dat ca exemplu este free si poate fi gasit aici.

O sa spuneti ca este complicat. Da, putea fi mai simplu daca browserele nu ar avea coada pe sus si o sa explic asta.

Ce presupune o astfel de declaratie. In primul rand sa aveti cele patru fisiere AlexBrushRegular instalate pe serverul web, in exemplu in directorul fonts. De ce patru? Aici urmeaza explicatia promisa.

Internet Explorer 8 si precedentele, nu suporta Font-face iar de la IE9+ suporta doar WOFF, dragut din partea lui. Firefox suporta din copilarie chiar, TTF si WOFF, as spune ca este mai ingaduitor. Chrome, in afara de EOT le suporta pe toate, dar trebuia sa aiba si el o codita, acolo. Opera suporta SVG si doar de la versiunea 11.10 si WOFF. Safari doar SVG si TTF. Si asta fara sa mai intru in amanunte privind browserele pentru dispozitivele mobile.

Si asa, bietul designer, trebuie sa aveti toate tipurile de font pentru a va putea exprima la fel in orice browser.

Urmeaza o intrebare legitima. Dar de unde le iau? Simplu, ori le gasesti gata facute ca in exemplul de mai sus sau, cumperi matale un font ttf, te duci la Font Squirrel, care te intreaba politicos daca ai drepturi de utilizare asupra fontului respectiv (licenta) si daca da, face gratis serviciul de transformare pentru tine. Poti sa-l minti, dar IP-ul tau este memorat.

In 2009 apare un hack, numit cofon. Este o solutie JavaScript (necesita incarcarea unui script) care "sparge" textul HTML in atatea parti cate cuvinte contine si le transforma in imagini vectoriale. Aceste imagini sunt cele care sunt afisate in browser, fara ca designer-ul sa aiba grija suprapunerii lor peste text.

Utilizarea Cufon presupune mai intai transformarea fontului TTF sau OTF intr-un fisier JavaScript (sunt servicii on line care fac asta pentru tine), care va fi la randul lui incarcat in tag-ul <head>. Apoi cu metoda cufon.replace, textul ales va putea fi afisat in pagina.

Exemplu:

    <script type='text/javascript' src='js/cufon-yui.js'></script>
    <script type='text/javascript' src='js/waukegan.font.js'></script>

    <script type="text/javascript">
        Cufon.replace('h1, h2, h3:not(#footer h3, .title-blog), h4, h5, h6, table th', {fontFamily: 'Waukegan'});
    </script>

Aici a fost folosit fontul Waukegan.

Si acum, solutia care are cele mai mari sanse sa se impuna.

In 2010 apare serviciul Google Web Fonts in care Google pune la dispozitia designer-ilor, astazi, 624 de familii de fonturi free, si este in crestere. Fiecare familie are la randul ei mai multe stiluri. Fonturile nu trebuiesc descarcate si puse pe serverul web. Ele sunt folosite on line. Raman pe serverul lui Google.

Le declari ca in exemplul urmator:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body { font-family: 'Tangerine', serif; font-size: 48px; }
</style>

iar tot textul din paginile HTML va aparea in fontul declarat.

Daca ar fi sa ma ocup pe larg de fonturile Google ar mai trebui vreo dou, trei articole.

Asa ca, deocamdata, suficient.