Fontes ao alcance de todos – parte III

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 mmais 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ícies 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> refernte à 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.