Tipography Article
Artigo Tipografia revista webdesign – novembro de 2009
link da revista
1 - Dos primórdios da web até os dias atuais, permeados pelos conceitos de interatividade e pelas novas tecnologias, quais foram os principais avanços na aplicação de tipografia em projetos digitais e interativos?
A aplicação de tipografia em projetos digitais e interativos evoluiu junto de algumas técnicas que não se restringiram às fontes de sistema operacional (Arial, Times, Verdana, Trebuchet, Georgia, Geneva, Sans, Courier, Tahoma, Lucida). Por exemplo, trabalhar fontes como imagem foi uma das primeiras soluções para burlar este requisito, sendo utilizada até hoje principalmente em formatos .gif .png ou .jpg. Numa evolução do caso, arquivos em flash têm se tornado cada vez mais comuns pela facilidade em editar e modificar suas características. Num futuro próximo dos mais novos navegadores, alterando a estrutura padrão de sistema configurações, arquivos CSS são capazes de incluir outras famílias dentro do código dos projetos.
2 - Quais são os principais parâmetros e as boas práticas que o designer de interfaces deve seguir na hora de se definir a tipografia de um projeto digital e interativo? Como você procura trabalhar esta questão em seu cotidiano profissional?
Para elaboração das interfaces digitais, o designer deve adotar uma postura minimalista, que enfatize a exibição dos conteúdos ali propostos. No meu cotidiano, questões como legibilidade, estética e densidade informacional são elementos fundamentais para a compreensão dos conceitos digitais e estão diretamente relacionados à tipografia.
Enfim, cada projeto possui relação específica com a tipografia aplicada, como outros elementos da composição (cor, forma, alfabeto iconográfico, fotografia, espaçamentos, entre outros). Para mim, o bom uso da tipografia é o diferencial de um bom projeto para um excelente projeto. Detalho aqui 12 dicas de boas práticas que devem ser utilizadas na composição tipográfica:
3 - Na edição de julho de 2009, falamos sobre os riscos de se seguir os modismos no design digital e algumas tendências atuais do mercado criativo. O uso de fontes grandes, por exemplo, se tornou algo muito comum em projetos digitais e interativos. Quando se justifica utilizar este tipo de característica em fontes? E quais são os riscos de se seguir determinadas tendências pela web?
Quando falamos em modismo no design digital, identificamos a cultura da repetição. O design tem como compromisso influenciar e replicar aquilo que atende ao contexto do usuário. Nisto incluem-se características psicológicas, culturais e técnicas que devem ser observadas para satisfazer as expectativas e costumes. A Internet é colaborativa e reforça esse tipo de ação, ou seja, aquilo que encanta se manifesta como modismo e repetição.
Quando penso no aumento do tamanho das fontes junto aos projetos não vejo a assinatura de um designer específico por detrás disso. Para mim é uma contextualização de base técnica aonde os limites da tela se expandiram, os processadores ficaram mais poderosos e a Internet, de uma maneira geral, mais veloz. O conjunto de tudo isso permite ao designer de interfaces explorar e chamar mais a atenção para determinadas características como, no caso em questão, a tipografia.
No final das contas todos seguem, copiam, mas no fundo não sabem bem o porquê. A grande questão é saber quando usar essa inspiração e saber condicionar o seu trabalho sempre para a originalidade.
4 - No artigo “Web, fontes como serviço e outros horizontes paralelos” (http://www.tiposdobrasil.com/blg/?p=495), Ricardo Fontes aponta as movimentações e os estudos pelo mercado para se utilizar, em projetos web, “fontes diferentes daquelas padrões de sistema”. Diante disso, quais são os cuidados que devem ser tomados ao se escolher o tipo de fonte a ser utilizada em um site? Hoje, já é seguro aplicar fontes que não estejam dentro dos padrões dos sistemas operacionais?
Ricardo Fontes aponta que “com o lançamento das últimas versões de navegadores como o Safari 4 e o Firefox 3.5, com pleno suporte para o CSS3 é seguro aplicar fontes que não estejam dentro dos padrões dos sistemas operacionais”. Com certeza as possibilidades aumentaram e isso é muito bacana, mas ainda não existe segurança plena em aplicar fontes, além das padronizadas pelo sistema, para os navegadores restantes, utilizados em maioria no Brasil.
Infelizmente, os designers de interface ainda devem se preocupar com usuários que utilizam navegadores como o IE 6 por se tratar de uma realidade do nosso público alvo. A seleção da tipografia aplicada depende deste nivelamento tecnológico e por isso ainda não conseguiu encontrar a liberdade criativa que áreas como a do design impresso possuem.
5 - Existe algum limite para a combinação de mais de uma família tipográfica em projetos digitais e interativos? E quando é recomendado o uso de mais de uma família de fontes?
Contextos ou situações similares devem ter tratamentos similares. O reconhecimento gera aprendizado previsível pelo usuário. Elementos como formato, cor, localização e denominação identificam situações e elementos semelhantes, realizando tarefas com maior rapidez. A tipografia pode trabalhar junto desses outros elementos dentro de um formato que traga lógica e referência para o usuário.
Não existe uma regra que nos diga se devemos combinar duas, três, cinco ou dez famílias tipográficas a não ser a própria coerência do designer de interfaces com o projeto. Mas aconselho que ao sentir necessidade de acrescentar uma nova família tipográfica opte primeiramente em testar negrito, cor e tamanho da mesma família. Caso não funcione como o esperado acrescente uma nova família que pode funcionar.
6 - Quais características vão determinar, direta e indiretamente, a legibilidade tipográfica de um site? E quais recursos podem contribuir para atingir este padrão?
Na mídia impressa o uso de fontes serifadas é considerado ideal por facilitar a leitura. No caso dos formatos digitais, as fontes não-serifadas são as mais recomendadas porque o pixel não intepreta a visualização das serifas com a qualidade ideal. Desta forma, recomendo a eliminação das fontes serifadas principalmente em tamanhos menores que 11 pontos. Outra questão importante é o efeito de suavização (anti-aliasing) em fontes com menos de 12 pontos. Ele deve ser evitado. Nos caracteres maiores esse recurso cria a aparência de uma borda suave, mas em tamanhos menores, esses textos ficam desfocados e perdem a nitidez.
Como recursos de contribuição, recomendo testar vários tamanhos de fonte para sistematizar o padrão. Os tamanhos 10, 12 e 14 são os mais comuns, mas não esqueça de criar opções de tamanho para o usuário.
7 - Quais são os erros mais comuns cometidos na definição tipográfica de um projeto digital e interativo?
Legibilidade, contraste e definição são os erros mais comuns e básicos porque estão diretamente relacionados com a exibição do conteúdo. Se o usuário não consegue ler, não existe projeto. Efeitos nas fontes, combinação de cores e tamanhos distintos devem ser trabalhados de maneira minimalista.
8 - A ferramenta on-line Typetester (http://www.typetester.org/) é muito útil para se comparar o uso de fonte na tela. Que tipo de estudos você costuma fazer para testar a eficácia do uso de uma família tipográfica em um projeto web?
Estudar a identidade visual do cliente é o passo inicial, o designer deve consultar os manuais de marca e todos os trabalhos já desenvolvidos em nome daquele que assina a interface. A partir dali você já terá boas referencias do que funciona e o que não funciona para o projeto.
Como nem sempre é possível realizar testes com usuários para avaliar o tamanho da fonte utilizo uma tabela recomendada por Jacob Nielsen para textos no ambiente web. As variações nas famílias tipográficas influenciam nos testes também.
9 - Quais dicas de leitura você daria para o profissional que deseja se aprofundar no assunto?
Separei dentro do link http://delicious.com/marcosloureiro/typography algumas dicas de leitura para aprofundar o assunto. Lá os leitores encontrarão algumas das referências para pesquisa, opiniões de outros designers e ferramentas no auxílio da escolha tipográfica em projetos de interface digital.
10 - Por favor, indicar dois projetos que utilizem com eficácia os princípios tipográficos na web, justificando o porquê da escolha em três linhas.
Alias
O portal do grupo de comunicação utiliza pequenos parágrafos num conjunto de cores harmônicas. Contrasta letras com o fundo, num mínimo de fontes de tamanho legível. A escolha tipográfica combina perfeitamente com a marca e identidade visual do projeto.
Frente
O site que divulga artistas independentes realça textos com cores vivas dentro de duas famílias tipográficas. Equilibrio na hierarquia de navegação principal e auxílio. Mesmo com muita cor e imagens na composição, os textos não ficam comprometidos na legibilidade.
PDF DOWNLOAD
<< Voltar
blog comments powered by Disqus
link da revista
1 - Dos primórdios da web até os dias atuais, permeados pelos conceitos de interatividade e pelas novas tecnologias, quais foram os principais avanços na aplicação de tipografia em projetos digitais e interativos?
A aplicação de tipografia em projetos digitais e interativos evoluiu junto de algumas técnicas que não se restringiram às fontes de sistema operacional (Arial, Times, Verdana, Trebuchet, Georgia, Geneva, Sans, Courier, Tahoma, Lucida). Por exemplo, trabalhar fontes como imagem foi uma das primeiras soluções para burlar este requisito, sendo utilizada até hoje principalmente em formatos .gif .png ou .jpg. Numa evolução do caso, arquivos em flash têm se tornado cada vez mais comuns pela facilidade em editar e modificar suas características. Num futuro próximo dos mais novos navegadores, alterando a estrutura padrão de sistema configurações, arquivos CSS são capazes de incluir outras famílias dentro do código dos projetos.
2 - Quais são os principais parâmetros e as boas práticas que o designer de interfaces deve seguir na hora de se definir a tipografia de um projeto digital e interativo? Como você procura trabalhar esta questão em seu cotidiano profissional?
Para elaboração das interfaces digitais, o designer deve adotar uma postura minimalista, que enfatize a exibição dos conteúdos ali propostos. No meu cotidiano, questões como legibilidade, estética e densidade informacional são elementos fundamentais para a compreensão dos conceitos digitais e estão diretamente relacionados à tipografia.
Enfim, cada projeto possui relação específica com a tipografia aplicada, como outros elementos da composição (cor, forma, alfabeto iconográfico, fotografia, espaçamentos, entre outros). Para mim, o bom uso da tipografia é o diferencial de um bom projeto para um excelente projeto. Detalho aqui 12 dicas de boas práticas que devem ser utilizadas na composição tipográfica:
- Use pequenos parágrafos, subtítulos e listas.
- Utilize porcentagens no lugar de valores fixos da fonte para ela se adaptar a resolução da tela.
- Use um conjunto limitado de cores harmônicas.
- Para realçar textos, use cores ao invés de sublinhado ou elementos piscando. O usuário pode confundir o termo sublinhado com um link.
- Contraste letras com o fundo.
- A identidade visual do projeto deve ser a base para a harmonia tipográfica.
- Leia os manuais das marcas, eles são as maiores referências para definição tipográfica.
- Use um mínimo de fontes.
- Use tamanho de fonte legível e crie opções de tamanho para o usuário.
- Teste vários tamanhos de fonte para o padrão. Tamanhos 10, 12 e 14 são os mais comuns.
- Questione o seu projeto sempre que possível e procure diferentes opiniões.
- Nunca apresente algo que você se sinta inseguro para defender.
3 - Na edição de julho de 2009, falamos sobre os riscos de se seguir os modismos no design digital e algumas tendências atuais do mercado criativo. O uso de fontes grandes, por exemplo, se tornou algo muito comum em projetos digitais e interativos. Quando se justifica utilizar este tipo de característica em fontes? E quais são os riscos de se seguir determinadas tendências pela web?
Quando falamos em modismo no design digital, identificamos a cultura da repetição. O design tem como compromisso influenciar e replicar aquilo que atende ao contexto do usuário. Nisto incluem-se características psicológicas, culturais e técnicas que devem ser observadas para satisfazer as expectativas e costumes. A Internet é colaborativa e reforça esse tipo de ação, ou seja, aquilo que encanta se manifesta como modismo e repetição.
Quando penso no aumento do tamanho das fontes junto aos projetos não vejo a assinatura de um designer específico por detrás disso. Para mim é uma contextualização de base técnica aonde os limites da tela se expandiram, os processadores ficaram mais poderosos e a Internet, de uma maneira geral, mais veloz. O conjunto de tudo isso permite ao designer de interfaces explorar e chamar mais a atenção para determinadas características como, no caso em questão, a tipografia.
No final das contas todos seguem, copiam, mas no fundo não sabem bem o porquê. A grande questão é saber quando usar essa inspiração e saber condicionar o seu trabalho sempre para a originalidade.
4 - No artigo “Web, fontes como serviço e outros horizontes paralelos” (http://www.tiposdobrasil.com/blg/?p=495), Ricardo Fontes aponta as movimentações e os estudos pelo mercado para se utilizar, em projetos web, “fontes diferentes daquelas padrões de sistema”. Diante disso, quais são os cuidados que devem ser tomados ao se escolher o tipo de fonte a ser utilizada em um site? Hoje, já é seguro aplicar fontes que não estejam dentro dos padrões dos sistemas operacionais?
Ricardo Fontes aponta que “com o lançamento das últimas versões de navegadores como o Safari 4 e o Firefox 3.5, com pleno suporte para o CSS3 é seguro aplicar fontes que não estejam dentro dos padrões dos sistemas operacionais”. Com certeza as possibilidades aumentaram e isso é muito bacana, mas ainda não existe segurança plena em aplicar fontes, além das padronizadas pelo sistema, para os navegadores restantes, utilizados em maioria no Brasil.
Infelizmente, os designers de interface ainda devem se preocupar com usuários que utilizam navegadores como o IE 6 por se tratar de uma realidade do nosso público alvo. A seleção da tipografia aplicada depende deste nivelamento tecnológico e por isso ainda não conseguiu encontrar a liberdade criativa que áreas como a do design impresso possuem.
5 - Existe algum limite para a combinação de mais de uma família tipográfica em projetos digitais e interativos? E quando é recomendado o uso de mais de uma família de fontes?
Contextos ou situações similares devem ter tratamentos similares. O reconhecimento gera aprendizado previsível pelo usuário. Elementos como formato, cor, localização e denominação identificam situações e elementos semelhantes, realizando tarefas com maior rapidez. A tipografia pode trabalhar junto desses outros elementos dentro de um formato que traga lógica e referência para o usuário.
Não existe uma regra que nos diga se devemos combinar duas, três, cinco ou dez famílias tipográficas a não ser a própria coerência do designer de interfaces com o projeto. Mas aconselho que ao sentir necessidade de acrescentar uma nova família tipográfica opte primeiramente em testar negrito, cor e tamanho da mesma família. Caso não funcione como o esperado acrescente uma nova família que pode funcionar.
6 - Quais características vão determinar, direta e indiretamente, a legibilidade tipográfica de um site? E quais recursos podem contribuir para atingir este padrão?
Na mídia impressa o uso de fontes serifadas é considerado ideal por facilitar a leitura. No caso dos formatos digitais, as fontes não-serifadas são as mais recomendadas porque o pixel não intepreta a visualização das serifas com a qualidade ideal. Desta forma, recomendo a eliminação das fontes serifadas principalmente em tamanhos menores que 11 pontos. Outra questão importante é o efeito de suavização (anti-aliasing) em fontes com menos de 12 pontos. Ele deve ser evitado. Nos caracteres maiores esse recurso cria a aparência de uma borda suave, mas em tamanhos menores, esses textos ficam desfocados e perdem a nitidez.
Como recursos de contribuição, recomendo testar vários tamanhos de fonte para sistematizar o padrão. Os tamanhos 10, 12 e 14 são os mais comuns, mas não esqueça de criar opções de tamanho para o usuário.
7 - Quais são os erros mais comuns cometidos na definição tipográfica de um projeto digital e interativo?
Legibilidade, contraste e definição são os erros mais comuns e básicos porque estão diretamente relacionados com a exibição do conteúdo. Se o usuário não consegue ler, não existe projeto. Efeitos nas fontes, combinação de cores e tamanhos distintos devem ser trabalhados de maneira minimalista.
8 - A ferramenta on-line Typetester (http://www.typetester.org/) é muito útil para se comparar o uso de fonte na tela. Que tipo de estudos você costuma fazer para testar a eficácia do uso de uma família tipográfica em um projeto web?
Estudar a identidade visual do cliente é o passo inicial, o designer deve consultar os manuais de marca e todos os trabalhos já desenvolvidos em nome daquele que assina a interface. A partir dali você já terá boas referencias do que funciona e o que não funciona para o projeto.
Como nem sempre é possível realizar testes com usuários para avaliar o tamanho da fonte utilizo uma tabela recomendada por Jacob Nielsen para textos no ambiente web. As variações nas famílias tipográficas influenciam nos testes também.
9 - Quais dicas de leitura você daria para o profissional que deseja se aprofundar no assunto?
Separei dentro do link http://delicious.com/marcosloureiro/typography algumas dicas de leitura para aprofundar o assunto. Lá os leitores encontrarão algumas das referências para pesquisa, opiniões de outros designers e ferramentas no auxílio da escolha tipográfica em projetos de interface digital.
10 - Por favor, indicar dois projetos que utilizem com eficácia os princípios tipográficos na web, justificando o porquê da escolha em três linhas.
Alias
O portal do grupo de comunicação utiliza pequenos parágrafos num conjunto de cores harmônicas. Contrasta letras com o fundo, num mínimo de fontes de tamanho legível. A escolha tipográfica combina perfeitamente com a marca e identidade visual do projeto.
Frente
O site que divulga artistas independentes realça textos com cores vivas dentro de duas famílias tipográficas. Equilibrio na hierarquia de navegação principal e auxílio. Mesmo com muita cor e imagens na composição, os textos não ficam comprometidos na legibilidade.
PDF DOWNLOAD
<< Voltar
blog comments powered by Disqus