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