Original. Traduzido e adaptado por Design Blog.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Por que banir o Comic Sans?
• Tipografia na web – parte 2
• Tipografia na web – parte 1
• Fonte tipográfica beneficente
• Vídeos tipográficos – Exemplos e tutoriais

Então, vou compartilhar algumas coisas que eu tenho usado ultimamente em alguns trabalhos.

Que fontes usar?

Antes de começar a falar como escolher as fontes para seu site eu gostaria de compartilhar uma experiência pessoal. Eu gosto tanto de tipografia por um simples motivo. Eu já fiz coisas horríveis no passado. Na época em que o auge do webdesign eram os frames eu tentava fazer alguns sites com uma cara mais profissional e achava que só testando fontes no dreamweaver era o suficiente. E mais… algumas vezes eu ia apenas adicionando fontes novas como se não houvesse amanhã.

Bem, não preciso explicar por que o resultado era sempre um lixo. Muita gente consegue trabalhar apenas “sentindo” que fonte colocar. Bem… eu não. Para fazer um bom uso de tipografia eu prefiro ser mais “racional”. Ter um bom motivo pra cada família que eu escolho já é um bom começo. E se conseguir extender o conceito do site à tipografia você já fez a maior parte do trabalho.

Além disso, a não ser que você tenha um ótimo motivo, use no máximo duas famílias diferentes no seu projeto. Eu já percebi na prática porque um site com várias fontes diferentes é uma das coisas mais feias da internet.

O Grid

Eu sei que há toda uma discussão para entender se usar grid liberta ou aprisiona a criação do site, mas again… na minha experiência pessoal… usar grids só trouxe benefícios.

Primeiro porque é mais fácil de codificar. Se desde o trabalho no photoshop vc já tem as medidas, é mais prático na hora de montar o CSS. E Segundo porque é agradavel aos olhos. É uma maneira de manter o site equilibrado visualmente sem ficar experimentando muito. Me deixa com mais tempo livre para pensar nas cores, por exemplo.

The Grid System: Uma das melhores fontes de informação sobre grids na internet.

Para criação, recomendo o 960 grid system. Apenas, baixe o template do photoshop aqui e divirta-se. Um outro bom site com diversos grids é o thegridsystem.

O Pixel

E depois do grid, a consequencia é o pixel. Digo isso porque muita gente ainda fica horrorizada de pensar num layout web em pixels. Num passado não muito distante eram usados ems para definir tamanhos de fontes e caixas afim de que navegadores incompetentes não quebrassem o layout quando alguém desse zoom na página.

Bom, esses navegadores morreram e trabalhar com pixels é muito mais fácil agora. As medidas são exatas e você não precisa ficar pensando em proporções.

Num próximo artigo eu vou falar do que o CSS3 tem de bom e ruim para uma tipografia decente na web.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Carta aberta da Comic Sans a quem odeia ela
• Hierarquia visual de elementos
• Tipografia na web – parte 1
• Designers não são web designers
• Fonte tipográfica beneficente

Tipografia na internet sempre foi uma coisa meio problemática. Apesar dos diversos métodos existentes hoje em dia, até bem pouco tempo atrás as opções eram realmente limitadas. Navegadores que não renderizavam direito, regras CSS pouco conhecidas e usadas, layouts feitos em tabelas. Tudo isso atrapalhava a informação que dificilmente era apresentada de uma forma aceitável.

E, na minha opinião, a tipografia é o maior alicerce do webdesign. Quando apresentamos conteúdo numa página, na grande maioria dos casos estamos trabalhando com alguma forma de texto. Lidamos sempre com palavras. E por isso eu considero uma das habilidades mais louváveis de um bom webdesigner, fazer bom uso da tipografia.

Este artigo é sobre algumas técnicas para facilitar o seu trabalho na hora de criar/desenvolver uma boa tipografia na web. A começar pelas fontes.

Nota: Curiosamente, enquanto eu escrevia esse artigo, eu me deparei com mais dois artigos na internet que tratavam de temas muito parecidos. Um em português e outro em inglês. Apenas gostaria de citá-los aqui porque, de alguma forma, eles influenciaram o que eu estava escrevendo e também porque são duas ótimas fontes sobre algumas técnicas aqui descritas.

Web-safe fonts

Na época em que o CSS2.1 foi desenvolvido, não havia muita necessidade de uma especificação para usar fontes no CSS que não as do sistema operacional (na verdade até havia o rascunho do @font-face, mas acabou não indo pra frente). E com isso em mente foi convencionado o que se chamou de web-safe fonts. Um grupo de fontes que… mais ou menos… estavam nos sistemas operacionais mais comuns. Mais ou menos porque as fontes eram parecidas, mas não as mesmas.

Felizmente a propriedade font-family (ou apenas font) aceita substitutos caso a fonte específica não seja encontrada. Por isso quando declaramos uma fonte da maneira convencional, precisamos da versão windows, Mac e uma genérica caso as duas primeiras não existam.

font-family: Helvetica, Arial, "sans-serif";

Seria um trabalho cansativo ficar descobrindo qual fonte combina com qual em cada sistema operacional. Alguns softwares (como o Adobe Dreamweaver) até montaram stacks de fontes para ajudar. Mas, na minha opinião, este é o melhor stack de websafe fonts já feito. Reparem como até separação por título e parágrafo foi pensada. Esse autor realmente merece ir para o céu.

Image Replacement

Isso é usado geralmente em sites estáticos quando queremos que um título (por exemplo) dê lugar a uma imagem. Em resumo basta definir o elemento como block, aplicar a imagem de background e empurrar o texto 9999px para a esquerda com text-indent. Uma dica: se o elemento for um link, overflow:hidden; previne que uma caixa pontilhada que some no lado esquerdo da tela apareça quando clicado.


#logo{
display:block;
background: url(logo.png) transparent;
width:100px;
height:100px;
text-indent:-9999px;
overflow:hidden;
}


Substituição por Javascript/Flash/PHP

Essas são técnicas (bem elaboradas eu diria) para se resolver o problema das web-safe fonts. Mas nenhuma é perfeita.

As mais comuns são Sifr, Cufón e FLIR.

SIFR basicamente utiliza Flash para renderizar as fontes e javascript para colocá-las no lugar correto. Infelizmente requer que o usuário tenha javascript e flash habilitado. Cufón utiliza o elemento Canvas do HTML5 e VML no Internet Explorer para renderizar o texto com a fonte selecionada, mas o texto não pode ser selecionado. FLIR envia uma request ao servidor (PHP apenas) para criar uma imagem com o texto de marcação usando a fonte que você quer. Mas denovo… nada de texto selecionável.

Para saber mais a respeito dessas técnicas:

• Tipografia em sites com conteúdo dinâmico
• Cufon vs sIFR vs FLIR

@font-face

Ah… A grande esperança da tipografia de qualidade na internet.

Essa é a minha propriedade favorita do CSS3. Primeiro porque já podemos usá-la e ela funciona corretamente em todos IEs (com a extensão EOT infelizmente, mas já é alguma coisa). Segundo porque finalmente podemos usar a fonte que quisermos na web. Claro, com as devidas restrições de direitos autorais. Mas o interessante é que já existem sites especializados em distribuir fontes grátis usadas no @font-face.

• Font Squirrel (meu preferido)
• 10 Great Free Fonts for @font-face embedding
• Fonts available for @font-face embedding

Como usar

Para usar o @font-face, primeiro precisamos definir a fonte num seletor separado e depois declarar normalmente no elemento desejado. É importante utilizar o formato TTF(padrão) e EOT(formato fechado utilizado pela microsoft). Assim, garantiremos que ela funcionará em todos os navegadores modernos.

Por exemplo:


@font-face{
font-family: Alexandria;
src: url(Alexandria.eot);
src: local(Alexandria), url(Alexandria.ttf) format(“opentype”);
}

p{
font-family: Alexandria, serif;
}


Além disso, algumas empresas como o Typekit oferecem fontes de qualidade por uma mensalidade (ou de graça no plano básico) para usar em seus projetos.

Problemas

O único problema ainda na versão atual do @font-face é que em alguns navegadores ele é dependente do anti-aliasing do sistema. Por exemplo, no firefox 3.5 num windows XP com a opção cleartype desligada, a maioria das fontes fica horrível. Por sorte, do Windows Vista em diante, a Microsoft optou por deixar o cleartype ligado por padrão. Mas o problema é que se for usada num site onde grande parte dos usuários utiliza windows xp, teremos problemas como esse aqui.

Eu não quis aqui apenas simplificar as possibilidades de tipografia na web. Mesmo porque esse é um assunto muito complexo para apenas um post. Apenas apresentei as melhores formas (na minha opinião) de mostrar as fontes num site.

No próximo artigo vou falar mais especificamente de CSS e do que é possível fazer com as propriedades para melhorar a aparência do seu texto.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Desenvolvendo sites para mobile
• Novo Forum de Design
• Fluxograma: Quando usar introduções em Flash

O objetivo da SOTA (Society of Typographic Aficionados – ou “Sociedade de Aficionados por Tipografia” em tradução livre) ao criar a fonte “Coming Toghether” era de poder beneficiar vítimas do terremoto no Haiti.

A fonte – que contém mais de 400 &’s – teve a contribuição do mesmo número de tipógrafos espalhados por quase 40 países (inclusive alguns brasileiros) e é fornecido como uma única fonte multi-plataforma OpenType.

Ela está sendo vendida a US$ 20 e pode ser adquirida pelas distribuidoras de fontes Ascender Fonts, Veer, FontShop, e MyFonts. O valor integral será repassado ao fundo do Doctors Without Borders (“Médicos Sem Fronteiras”) que está prestando ajuda no Haiti.

Você acha que é uma ação válida? Você compraria esta fonte para ajudar vítimas de desastres naturais?

Update: Obrigado André Luiz pela correção de título ;)

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• O que é tipografia?
• Download da fonte Helvetica
• Carta aberta da Comic Sans a quem odeia ela
• Tipografia na web – parte 2
• Tipografia na web – parte 1

A tipografia cinética se refere a arte e técnica de expressão utilizando movimento e animação de textos e palavras. A tipografia cinética tem demonstrado a abilidade de adicionar conteúdo emotivo significante e trazer apelo ao texto, permitindo que algumas qualidades normalmente encontradas em filmes e na palavra falada sejam usadas em texto estático. (Não sabe o que é tipografia? Tenho um artigo inteiro explicando isto).

Exemplos de vídeos tipográficos

Mais exemplos e inspiração

Mais alguns sites onde você pode encontrar exemplos e inspirações para vídeos tipográficos.

• Typeinspire – Inspiração para obras tipográficas em geral
• Kinetic Typography – Canal no Vimeo
• Nicetype – Outro canal no Vimeo
• I Love Typography – Um dos melhores sites de tipografia
• Webdesigner depot – Mais exemplos de vídeos tipográficos

Como fazer um vídeo tipográfico

Existem vários tutoriais de como fazer vídeos tipográficos na web, vou selecionar apenas alguns aqui. Infelizmente, todos são em inglês (se alguém souber de algum tutorial em português, por favor comente!). De qualquer forma, como são vídeo-tutoriais em sua maioria, é só seguir o que é feito na tela que não deve ter problema. Os tutoriais abaixo são para Adobe After Effects – um dos melhores softwares para criação de efeitos em vídeo. Caso alguém tenha sugestões melhores, por favor comente!

• Tipografia cinética em Illustrator e After Effects
• Tutorial básico de animação com tipografia
• Ótimo tutorial que te dá o básico da animação com tipografia
• Tutorial do Video Copilot muito bom também

Ah, e como sei que vai ter um ou outro pedindo pra eu ensinar, deixo avisado: sou bem amador ainda então não vou fazer nenhum vídeo tutorial até aprender bem ;) (mesmo assim, sempre tem um mané que não lê o artigo todo).

Fontes: designflakes, Hiato Criativo, YouTube

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• O que é tipografia?
• Vídeos tipográficos
• Vídeos tipográficos
• Carta aberta da Comic Sans a quem odeia ela
• Tipografia na web – parte 2

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Carta aberta da Comic Sans a quem odeia ela
• Inspiração de segunda – parte 6
• Tipografia na web – parte 2
• Tipografia na web – parte 1
• Inspiração de segunda – parte 5

A história do Comic Sans

O designer Vincent Connare que na época trabalhava na Microsoft, começou a trabalhar na fonte Comic Sans em Outubro de 1994. Connare já tinha criado algumas fontes direcionadas a softwares para crianças, então quando viu a versão beta do Microsoft Bob que usava Times New Roman nos balões de fala dos personagens de desenho, decidiu criar uma nova fonte baseada no estilo de escrita usada em desenhos em quadrinhos que ele possuía em seu escritório, especificamente The Dark Knight Returns (letras criadas por John Costanza) e Watchmen (letras por Dave Gibbons).

Connare acabou demorando demais e sua fonte não foi incluída no MS Bob, mas os programadores do Microsoft 3D Movie Maker – que também iriam usar balões de fala – decidiram adotar a nova fonte. Mais tarde, a fonte foi inclusa com o pacote Windows 95 Plus! De lá em diante, a fonte só ganhou mais e mais popularidade.

O problema do Comic Sans

O Comic Sans foi classificada como uma fonte casual, de script não-conectivo (as letras não se conectam) e foi criado para imitar a escrita a mão em histórias em quadrinhos e para um uso em documentos informais. “Documentos informais” é a palavra-chave aqui, então guarde-a em sua cabeça.

Famílias tipográficas são criadas sempre para representar algo. Alguns focam na legibilidade em todos os tamanhos, outros são específicos para tamanhos pequenos. Ainda há aquelas fontes meramente decorativas. Uma fonte pode dizer muito sobre uma empresa quando ela está em seu logo.

A fonte Comic Sans é uma fonte relaxada e informal. O motivo pelo qual querem banir o Comic Sans é que ele é usado exaustivamente em locais inapropriados.

Documentos importantes, impressos que querem passar uma mensagem séria, logos de lojas que não são relacionadas a crianças, brinquedos ou qualquer coisa brincalhona ou informal, e a lista continua. Por ser uma fonte que já vem inclusa com o sistema operacional mais usado, e ser uma fonte “diferente”, as pessoas acabam usando de forma irrestrita em todos os seus documentos.

Usar Comic Sans em uma lápide? Só se o morto tivesse sido um palhaço.

Espalhe o bem gráfico no mundo: diga não ao uso indiscriminado do Comic Sans.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Carta aberta da Comic Sans a quem odeia ela
• Tipografia na web – parte 2
• Tipografia na web – parte 1
• Fonte tipográfica beneficente
• Vídeos tipográficos – Exemplos e tutoriais

A família tipográfica Helvetica foi criada por Max Miedinger em 1957 para a tipografia suíça Haas’sche Schriftgießerei. Já escrevi sobre ela no artigo “Helvetica – a fonte mais famosa“.

O que muita gente não sabe é que esta é uma fonte proprietária. Ou seja, não dá pra baixar de graça. A fonte custa em média 24 Euros pelo site Linotype. Fazer o download dela de graça é ilegal. Simples assim.

No entanto, a boa notícia é que há fontes bem similares a Helvetica que podem ser baixadas de graça. Uma rápida pesquisa em alguns sites retornam fontes como Sanskrit Helvetica. Essa é bem similar a Helvetica e é de graça.

Outra solução seria usar Arial e fazer as alterações mínimas via vetor. Fica a critério de cada um. Deixo claro que, por motivos legais, este blog condena a pirataria. Espero que, de uma vez por todas, este problema esteja resolvido.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Fonte tipográfica beneficente
• Helvetica – a fonte mais famosa
• O que é tipografia?
• Texturas que todo designer deve ter
• Carta aberta da Comic Sans a quem odeia ela

Em entrevista a revista sueca de design CAP&DESIGN, a empresa alega que a troca foi feita para que a fonte fosse entendível em todos os países, inclusive no oriente (países asiáticos). Eles também querem dar a mesma impressão visual na web e mídia impressa.

Muitos designers discutem que Verdana é uma fonte para ser usada na web pois facilita a leitura. Já em mídia impressa, o visual fica amador.

O catálogo da IKEA antes e depois.

Pessoalmente, creio que poderia ser pior. Não ficou tão ruim assim. Ainda mais, poderiam ter usado Comic Sans.

Tá até rolando uma discussão no Forum de Design sobre isso. Dê uma conferida!

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Mais um entre os demais
• Logo infeliz
• O perigo do briefing mal feito
• Re-design do logo da NASA
• Quando usar logo, logotipo ou logomarca?

O objetivo da tipografia conhecida hoje com Helvetica, era de criar um tipo claro, sem significados culturais, de fácil legibilidade e que pudesse ser usado em diferentes tipos de suporte: desde sinais de trânsito até impressos em papel.

Helvetica é uma das fontes sem-serifa mais usadas no mundo. Existem versões para línguas derivadas do latim, cirílico, hebreu e grego além de versões especiais para hindu, urdu, khmer e vietnamita. Variantes dos sistemas de escrita baseado em caractéres incluem chinês, japonês e koreano foram desenvolvidos para complementar a Helvetica.

Entre as empresas mais famosas que usam Helvetica nas suas marcas incluem a 3M, American Airlines, a rede de jornalismo BBC News, Boeing, Jeep, linhas aéreas Lufthanse, Microsoft, Panasonic e muitos outros. A fonte está até impressa nos ônibus espaciais da Nasa, além de ter seu próprio filme.

Em 1982, Robin Nicholas e Patricia Saunders, da Monotype Typography, criaram a Sonora Sans Serif, que acabou sendo renomeado para Arial quando a Microsoft passou a distribuí-lo com o Windows 3.1 em 1992. Existe muita controvérsia quanto a esta fonte, pois muitos dizem que é uma cópia quase igual da fonte Helvetica.

Entre as similaridades, nota-se que ambas tem uma largura muito próxima. O jeito mais fácil de distinguir uma fonte da outra é observando as letras em caixa-alta C, G e R, assim como as em caixa-baixa a, e, r e t.

Com mais de 50 anos de existência, é seguro dizer que Helvetica é a fonte mais popular do mundo.

Faça o download de diferentes pesos da Helvetica (Bold, Condensed, Light, etc) aqui.

Referências: “How to spot Arial“, “Fontes: conheça 10 alternativas originais para a Arial e a Helvetica“

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Download da fonte Helvetica
• Texturas que todo designer deve ter
• Carta aberta da Comic Sans a quem odeia ela
• Tipografia na web – parte 2
• Tipografia na web – parte 1