Esta é a última parte da minha odisseia em torno das fontes para web com experiências à mistura. Espero que gostem e dêem feedback da vossa perspectiva e uso deste novo meio.

Vantagens claras do uso de fontes web

• qualidade que dá ao resultado final com um toque distinto e mais carácter quando as fontes são bem usadas
• facilidade de uso, pois só se acrescentam umas linhas de código
• websites menos carregados de ficheiros pesados, sem a anterior necessidade de usar imagens de background onde texto estava plasmado. Agora a fonte é gerada on the fly
• versatilidade prometida pela dupla revolucionária HTML5 e CSS3, já que passa a ser possível criar efeitos sombra, rotação
• funcionamento em todos os navegadores, estando para breve o uso em smartphones e tablets
• comodidade máxima, permitindo muitas vezes (sobretudo no caso de fontes open source) o uso no desktop com download e trabalho offline

Escolher e editar fontes

Alguns conselhos são do bom senso e funcionam para a tipografia em geral, mas outros são específicos da web. Há quem defenda até que a tradição deve ser esquecida, porque há cânones não aplicáveis ao ambiente www.
Usar com moderação as fontes numa mesma página ou site, caso contrário obtém-se uma salada russa sem qualquer interesse ou função.

Não ir com ideias feitas acerca das fontes serifadas e não serifadas. Esta chamada de atenção vem de John Boardley neste artigo em que afirma que é comum ver-se tipos com um efeito espectacular na web e muito maus no papel e vice-versa. Aconselha a ler o texto, a experienciar a leitura e a usabilidade dos tipos escolhidos e a realizar testes, inclusive em vários monitores.

Ser criterioso na escolha da fonte, porque a fonte não é mero veículo de sentido. Ela tem também uma carga e pode tornar-se mais facilmente memorável, reconhecível, familiar. Por exemplo a helvetica perdura na memória.

Procurar a expressão máxima da fonte: bom controlo do contraste; tamanho não inferior a 10/12px, de preferência deve ser maior; uso de caixas e hierarquia de fontes; ceder espaço para o texto respirar; usar a largura entre as letras adequada (line-height), são ainda outros pontos sublinhados.

Comportamento dos navegadores

Com a solução @font-face são os navegadores que processam a fonte. O formato WOFF será no futuro usado por quase todos os navegadores, mas para já o cenário é o seguinte:

• TTF – para Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT – para Internet Explorer 4+
• WOFF – para Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG – para iPad, iPhone

A forma de processar de cada navegador é diferente. Enquanto uma página com fontes @font-face é carregada, há dois comportamentos típicos: no caso do Chrome, Safari, IE, o espaço onde as fontes vão aparecer mostra-se em branco até ficarem totalmente carregadas e disponíveis. No caso do Firefox, é carregado um formato de fonte por defeito que é substituído pela fonte seleccionada assim que ela fica disponível.

À pergunta se o processamento das fontes pelos navegadores torna as páginas mais difíceis de carregar, há para já algum risco disso, sobretudo se é necessário carregar muitas fontes. Por isso é tão importante a plataforma que disponibiliza as fontes e o uso comedido e responsável das mesmas. Porém, há um truque para minimizar efeitos que consiste em colocar a tag <link> referente à fonte em primeiro lugar. O Web Font Loader do Google/ Typekit é um aplicativo em java que optimiza e parametriza este processo.

Recursos de excelência

A tipografia é uma paixão e os seus profissionais levam-na muito a sério. Os blogues transpiram conteúdos muito pertinentes, além de serem eles próprios um exemplo do bom uso das fontes. Quem achava que a tipografia estaria condenada, que se desengane, porque o fôlego é maior e a força dos tipos é imparável. São muito profissionais envolvidos e com muita experiência (tipógrafos, webdesigners, editores, criativos, comunicadores…)

A list apart tem bons artigos e dá perspectiva histórica

I Love typography tem também muitos tópicos sumarentos e bom gosto.

Aplicação prática

O procedimento é muito simples, como se pode ver nesta sequência de passos. Fiz a experiência neste mesmo blog do Wordpress, que dá acesso aos ficheiros css ou php através da interface. Mas qualquer tipo de blog ou website permitem com mais ou menos facilidade realizar isto mesmo.

Experiência com Google Font Directory

1. Criar tag HTML nova a que vou aplicar o estilo, caso contrário terei a fonte por todo o site se usar uma das existentes. No exemplo, crio a tag exp1 (experiência 1)
2. Guardar a nova tag no ficheiro style.css exp1 { }
3. Ir a Google Web Fonts http://code.google.com/webfonts
4. Escolher a fonte pretendida, clicando depois em Get the code e copiar essa linha de código
5. Colar essa linha no ficheiro header.php, na parte referente ao head, no início da lista de links que houver
6. Ir de novo ao ficheiro styles.csss e editar o estilo para a tag criada ou ir afinando de acordo com o efeito pretendido {font-family: ‘Reenie Beanie’, arial, serif; font-size: 30px; }
7. Escrever num texto (modo HTML) o texto aplicando-lhe a tag criada

Escrito com a fonte Reenie Beanie do Google Fonts Directory

Experiência com Font Squirrel

1. Criar tag HTML nova a que vou aplicar o estilo, caso contrário terei a fonte por todo o site se usar uma das existentes. No exemplo, crio a tag exp2 (experiência 2)
2. Escolher fonte no Font Squirrel, ler a licença e descarregar o zip @font-face
3. Descomprimir o ficheiro e copiálo para o directório de ficheiros do website/ blog (no caso coloquei na pasta /wp-content)
4. Abrir o ficheiro stylesheet.css e copiar o seu conteúdo (declaração @font-face)
5. Abrir o ficheiro style.css e colar a declaração copiada anteriormente: @font-face { font-family: ‘GondolaSDRegular’; src: url(’/wp-content/Gondola-SD-fontfacekit/Gondola_SD-webfont.eot’); …}
6. Acrescentar uma linha no mesmo ficheiro style.css com a tag exp2 em que se chama o tipo em teste: exp2 { font-family: ‘GondolaSDRegular’, arial, serif; }
7. Escrever num texto (modo HTML) o texto aplicando-lhe a tag criada

Nota: é preciso ter em atenção na definição do URl que é preciso dizer onde está a pasta com os ficheiros da fonte. O path deve ter /.

Escrito com a fonte Gondola Regular do Font Squirrel

Conclusão

Abrem-se muitas possibilidades com esta forma tão simples e rápida de obter fontes. Relativamente às plataformas, inclino-me para a Font Squirrel já que tem muito mais fontes que o Google e é 100% free. Devemos contudo ter o cuidado de seguir escrupulosamente as indicações de licença dos respectivos autores e actuar em conformidade. Na maior parte dos casos, o que é determinantemente proibido é comercializar e vender/ redistribuir a fonte.
Boas experiências com estes novos serviços.

Dediquei algum tempo a sondar as plataformas que oferecem alojamento, pesquisa, download, licenciamento e serviços acrescentados na área das fontes para a web. Apesar da variedade, impõe-se uma linha, por um lado a de facilitar ao máximo a vida aos webdesigners, por outro a oferta de produtos/ serviços freebies, ou seja, gratuitos ou parcialmente gratuitos.

A onda começou com projectos como o Typekit e Kernest, mas seguiram-se muitos outros. O curioso é que as plataformas open source estão ao nível e até acima das plataformas comerciais.

Muitas considerações vão sendo feitas a propósito dos vários modelos de negócio. Muitos defendem que a qualidade e grande quantidade de fontes livres existentes não faz crer que as plataformas comerciais venham a ter muito sucesso. Outros acham ridículo o zelo excessivo em criar e controlar licenças de fontes para a web de usos em PC, numa época em que a publicação é sobretudo no ambiente web. Enfim, é sem dúvida um tema quente e em que tudo é questionado, inclusive os cânones do uso convencional dos tipos.

O projecto é ambicioso e organiza-se em três frentes, que concorrem para o mesmo fim, impulsionar e viabilizar o uso generalizado de fontes na web.

O lado mais visível e menos técnico é o Google Font Directory que reúne num repositório aberto 18 fontes totalmente licenciadas para uso por qualquer um, com informação das fontes e autores. São poucas, mas é o pontapé de saída para uma colecção que aumentará sem dúvida, à custa de parcerias e de uploads dos utilizadores. Por enquanto esta funcionalidade não é possível, mas olhando as práticas da empresa noutros projectos, como o Android, por exemplo, tudo aponta para aí. Este directório é meramente informativo e de consulta/ pesquisa.

Outra face do mesmo projecto é o Google Font API, a aplicação que permite embeber as fontes do repositório numa página/ sítio web, estabelecendo a comunicação entre o website destino e os serviços do Google de fornecimento das fontes disponibilizadas. A operação é muito simples e darei dela conta no próximo post.

O terceiro elemento do projecto, na realidade fruto de uma parceria com a Typekit, chama-se WebFont Loader que faz o upload de fontes e controla a forma como é visualizada a fonte, sejam fontes com origem no repositório do Google, do Typekit ou do servidor da pessoa.

Esta plataforma open source para fontes tem a virtude de ter sido pioneira, mas face aos seus comparsas, é tida como tendo um desempenho mais fraco, sobretudo quando comparada com o Typekit e mesmo o Typopheque.

Tal como todas, funciona como repositório, com pesquisa por vários critérios e um processo simplificado de 4 passos para a instalação de qualquer fonte no website desejado. Nos termos de uso, é claramente dito que o uso se limita exclusivamente aos browsers. Apesar de ser possível comprar fontes, a percentagem é residual e a preços acessíveis (máximo $15), porque o padrão são fontes gratuitas.

O responsável e mentor desta iniciativa, Garrick Van Buren, considera que é preferível disponibilizar fontes web nativas e licenças abertas, primeiro porque muita fontes de impressão não se adequam à web e são ficheiros pesados, por outro lado têm um passado de restrições que não se enquadra no novo ambiente. Na mesma linha posiciona-se Chank Diesel no texto “The Sad State of Today’s Web Typography – Fertile Ground for Font License Revolution”, que entra no projecto.O uso pode ser materializado de duas formas: usando a @font-face ou fazendo download para instalação dos ficheiros da fonte no servidor do website.

A fonte é exibida sem qualquer necessidade de ficheiros javaScript, Flash ou outra tecnologia. O trabalho é feito inteiramente pelos navegadores, não importa quais.

Na origem do Typekit estão Jeffrey Veen e Jason Santa Maria que projectaram uma plataforma tecnológica de alojamento de fontes gratuitas e comerciais com implementação rápida, simples e excelente performance ao nível dos resultados de publicação nos websites. É aliás uma das bandeiras do Typekit, a qualidade dos seus servidores para lidar com os pedidos e satisfazer com profissionalismo os pedidos à plataforma oriundos de todo o mundo. Garantem também a protecção dos direitos de autor das fontes que aí são publicadas com restrições.

O funcionamento é simples: registo prévio, criação de kit (lista de websites we fontes a usar), com adição de linha de código de JavaScript ao ficheiro HTML de cada website. O CSS é editável no interface do Typekit.

São três os planos: personal, professional, performance, desde os $24,99 aos $99,9 variando o leque de fontes acessíveis, a quantidade de fontes a usar num website e o nº máximo de websites. Por $50/ano é possível ter acesso a todas as fontes e usar aplicá-las sem limite de nº de fontes e nº de sites. A BD da autoria de Brad Colbow explica o funcionamento.

Projecto que tem a Monotype Imaging por trás, sendo a versão web fonts do site fonts.com O que impressiona neste projecto é a quantidade de recursos: 2000 fontes gratuitas (na versão beta do lançamento da plataforma) e aguardam-se 7000 comerciais. O suporte multi-língua é outro ponto forte, o que não é de subestimar, quando o tema são fontes. Nesta fase, o registo é gratuito, mas depende de convites que são limitados, sendo que para tal se cria um projecto a que se associam determinadas fontes.

Como já esboçado, é preciso criar projectos ou um projecto em quatro etapas, depois de já estar provido de código de subscritor. Primeiro; escolher as fontes que deseja usar; listar os websites ou website em que deseja intervir; definir o CSS para as etiquetas do HTML (h1, h2, body, nav, etc.); adicionar uma linha de código no ficheiro HTML. Este sistema tem a vantagem de permitir gerir as fontes usadas em cada website, permitindo as alterações a partir do interface da plataforma sem ter de mexer de novo nos ficheiros do website em questão. Estes serviços de valor acrescentado é que acabam por marcar a diferença.

The League of Movable Type é um movimento interiramente open source. Os mentores, Caroline and Micah, sublinham a importância do projecto que não é contra as tipografias nem criadores de tipos, antes pelo contrário. Explicam que é uma forma de promoverem e aprenderem a estar na web. Defendem que um bom criador só ganha em disponibilizar um tipo criado por si para uso gratuito, tanto para fins comerciais como não. Porém, esclarecem que qualquer fonte modificada requererá uma licença open como a sua antecedente – SIL Open Font License.

É um projecto original que reúne para já 11 fontes de muito boa qualidade, já que a aceitação de fontes propostas para a colecção exige critérios elevados de qualidade.

As fontes estão prontas para download e uso por qualquer utilizador e são efectivamente bonitas e elegantes. Nos 11 tipos, é possível encontrar um leque variado.

Reúne centenas de fontes, podendo ser descarregadas em ficheiro ttf simples ou em kit @font-face. Este kit traz a fonte em ficheiros de vários formatos formatos (ttf, eot, svg, woff), o texto da licença, uma demo e ainda o ficheiro css para ser colado no style.css do website.

Este repositório oferece ainda a possibilidade de testar fontes com texto próprio, de submeter fontes através do seu @Font-Face Generator.

Relativamente às licenças aplicadas às fontes, é preciso ter em atenção e ler com cuidado a secção license em cada fonte, porque há licenças para todos os gostos. EM princípio, são os próprios autores que definem como querem que seja usada a fonte, se há restrições de uso, etc. Existe também disponível o contacto. No entanto, há muitas fontes que foram recolhidas na web e cuja autoria não foi reclamada (fontes “órfãs”). A Font Squirrel descarta responsabilidades relativamente a má interpretação e incorrecto uso das fontes. As licenças sem restrições são: End User License Agreement (EULA), SIL Open Font License.

OUTRAS

No Typotheque é possível comprar licenças de uso do software, havendo várias modalidades de uso: licença básica (utilizador único), multi-utilizador; @font-face com código para embeber; licença global, etc. Esta última não impõe qualquer restrição, como por exemplo o tráfego por mês.

Em FontSpring paga-se uma vez e tem-se acesso por subscrição anual a fonte para uso num website.

No FontDeck a licença é paga à unidade e começa nos $6.49/ano, defendendo-se o custo à medida do uso.

Finalmente, em Just Another Foundry o preço de uma família começa nos $19/ano.