Logo

Entradas com Tags ‘fontes web’

Mais uma fonte para a web

O Ubuntu e o seu fundador, Mark Shuttleworth, quiseram contribuir para o universo de fontes web com o lançamento da Ubuntu Font Family.
As características estavam bem definidas: tinha de ser uma fonte elegante e legível. De momento, esta fonte tem apenas a versão para Latim, Cirílico, Grego, mas está previsto alargar para o Hebreu e Árabe, porque o desejo é que possa ser utilizada em todas as línguas e com todos os caracteres.
A ideia de criar uma fonte para uso interno da Canonical e a sua disponibilização com licença 100% open source vem na linha da empresa, que procura melhorar o nível de usabilidade. As fontes de qualidade ajudam à acessibilidade e produtividade, segundo o criador e colaborador da Ubuntu em todo o processo, Bruno Maag, da Dalton Maag.
A importância que a Canonical dá ao design está bem patente no seu blogue. O impacto desta fonte já de faz sentir, pois o Museu de Design de Londres deseja fazer uma exposição sobre a fonte Ubuntu e todo o trabalho por detrás.
A plataforma escolhida para disponibilizar a fonte foi o Google Font Directory, que desde o último post em que falei de fontes, já recebeu mais fontes de boa qualidade. Actualmente dispõe de 58 fontes!


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 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.


Fontes ao alcance de todos – parte II

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.

font-squirrel-logo

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.


Fontes ao alcance de todos – Parte I

Até aqui, o uso de fontes na web esteve bastante condicionado e limitado a peritos. Os condicionamentos eram múltiplos: o comportamento dos browsers, já que uns suportavam, outros não, e ainda as licenças e a questões de segurança. Outra complicação era o conhecimento técnico necessário para embeber fontes. E assim durante vários anos, na web só encontrávamos as fontes Arial, Georgia, Helvetica, Times, Verdana, e pouco mais. Um cenário decepcionante, pois o uso intensivo da dúzia de fontes contrastava com as dezenas de milhar existentes, não todas adequadas à web, mas que poderiam ser adaptadas.

Neste post, quis abordar com algum detalhe o tema, por isso resolvi publicar por partes. Nesta primeira parte, faço uma pequena introdução, na segunda parte analiso o mercado e, na terceira e última, realizo uma experiência com @font-face.

Mudança de cenário tecnológico e vontade de dar a volta

Nos dois últimos anos, produziram-se movimentações rápidas e deram-se passos consideráveis, depois de mais de uma década de impasses e soluções que não convenciam nem mobilizavam os actores.
Para os três problemas enunciados, arranjaram-se soluções. Actualmente, a maioria dos browsers adoptou na sua base um @font-face para lidar com pedidos de fontes.
Paralelamente, assistiu-se à criação de licenças mais adequadas ao ambiente web. Isto porque os direitos de uso de fonte em meio gráfico não são extensíveis à web. Alguns exemplos mais frequentes de licenças usadas para fontes na web são: SIL Open Font License, Creative Commons, GNU Public License, EULA.
O terceiro problema, decorrente do modo anterior de embeber fontes, dificultava o controlo do uso da fonte, pois ela ficava disponível para download e uso não autorizado. Neste momento, isso não representa problema, porque a fonte é, digamos, requisitada a cada momento à plataforma, não existindo um download directo ao utilizador.

Marcos temporais

EOT

No distante ano de 1997, a Microsoft tomou a iniciativa de criar um formato para embeber fontes que consistia em transformar o tff em eot comprimido. Começou por ser um formato inteiramente proprietário, que em 2007 a empresa tentou submeter ao consórcio W3C para integrar as normas do CSS3. A rejeição por falta de segurança liquidou a iniciativa a que se juntou pouca receptividade, embora a Apple viesse em defesa do eot. Moribundo enquanto solução, ainda é usado para o IE, tendo como vantagens a compressão, encriptação, protecção, mas como grande desvantagem o facto de só funcionar no IE. O IE9 já vai suportar o formato normalizado WOFF.

.Webfont

Em 2008 surge a ideia de disponibilizar as fontes num ficheiro .zip, contendo no seu interior o ficheiro da fonte propriamente dito e um ficheiro .xml com as permissões. Mas esta proposta também não colheu candidatos, porque requeria a edição do ficheiro .xml caso a caso.

WOFF (Web Open Font Format)

Entretanto as alternativas open (TrueType and OpenType fonts) estavam em curso desde há algum tempo e como não tinham o engulho do controlo das licenças, tornava-se um problema de mais fácil solução.
Daqui deriva o formato de fonte WOFF que se baseia nos já existentes (funde-os) e incorpora a declaração normalizada para fontes – @font-face para o CSS. As figuras que estiveram na sua origem foram: Jonathan Kew (Mozilla Corporation), Tal Leming (Type Supply) Erik van Blokland (LettError) e as empresas que submeteram o formato à aprovação em Abril deste ano foram Mozilla, Opera e Microsoft.

@font-face

Esta declaração estabeleceu-se como norma para fontes na web, estando ligada ao ficheiro do estilo (CSS) que está separado do ficheiro de estrutura (HTML). Sejam plataformas de fontes de licença livre, comercial ou mista, todas usam-na, viabilizando o uso generalizado de fontes na web.
Na prática, os navegadores e dispositivos móveis lêem uma linha de código que declara a fonte ou fontes a usar no ficheiro HTML, sendo o estilo editado no ficheiro CSS.

Proponho dois links interessantes que me permitiram traçar o percurso um pouco sinuoso das fontes web. Em Web fonts — where are we?, John Boardley descreve a situação insustentável para os webdesigners e faz o ponto da situação.

webfonts_articleNum outro artigo – Fonts at the crossing, Richard Fink detalha a evolução e os principais players.

webfontscrossing_article