Design baseado em Tipografia - Mais elementos de texto
Publicado em 29/10/06, na categoria Elementos e técnicas, Webdesign
Uma boa tipografia na web é algo que realmente me impressiona, porque é tão fácil escolher a fonte errada. Eu propriamente acho que nunca fui muito bem sucedida na realização de um projeto baseado em fontes.
Com milhões de combinações possíveis, nós designers acabamos desistindo antes mesmo de começar. No entanto, temos que agradecer a perseverança de alguns de nossos colegas, que por não desistirem acabaram criando as maravilhas que serão listadas no final desse artigo.
Apesar do meu gosto pela analise mais profunda da tipografia, esse artigo tratará apenas da tipografia como elemento fundamental do design: títulos, manchetes e áreas de destaque, etc. Pretendo publicar brevemente algum material sobre “legibilidade na web”.
A tipografia tem tudo para ser a parte mais elegante de um projeto.
Os resultados finais, normalmente, são o que chamamos de clean: elegantes e legíveis.
A boa escolha da tipografia pode reduzir consideravelmente a necessidade de fotos e ilustrações, porem, como eu falei no artigo sobre “Estilo retrô”, somando uma boa família de fontes a esses elementos o projeto pode ficar muito mais interessante.
É importante lembrar que cada sistema operacional possui a sua família tipográfica e que, caso você utilize uma fonte que não existe no computador do usuário, ela será substituída por outra previamente definida ou pela fonte padrão do sistema.
Apesar das fontes existentes no Internet Explorer serem muito parecidas com as fontes do Mac, é preciso lembrar que existem outros sistemas operacionais e que é necessário garantir que o conteúdo terá o mesmo aspecto (ou o mais parecido possível) em todos eles. No caso do linux, por exemplo, o número de fontes instaladas varia de versão pra versão.
Para trabalhar com fontes alternativas, a melhor solução, na minha opinião é através da técnica "Image Replacement". Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, assim é possível utilizar qualquer fonte sem a preocupação se ela será exibida corretamente, pois imagens são sempre imagens. Dessa forma ganhamos em compatibilidade!
Veja no "Pinceladas da Web"a técnica mais comum para trabalhar com substituição de textos por imagens, ou então, faça uma comparação entre os principais métodos conhecidos no "Mezzoblue" (em inglês).
Tudo depende do contexto. Uma mesma fonte pode apresentar diversos aspectos bastando apenas mudar a cor do fundo, adicionar uma borda ou uma imagem…Veja alguns exemplos se pode fazer:
Exemplo 1 - Fonte Sofia Script
Fonte - Sofia Script - Fonte manuscrita e sem acentuação. Perfeita para estilos arrojados, pode ser moderna ou retrô dependendo somente de como vem acompanhada.
Exemplo 2 - Fonte Logomotive
Uma fonte básica desenvolvida por um designer gráfico Acentuada, com maiúsculas, minúsculas, pontuação e números.
Mais uma vez eu digo: procure sempre a compatibilidade na maioria das plataformas possíveis, dispensando a necessidade de instalação de programas, plugins ou acessórios para o funcionamento do site.
Exemplos de uso
Links
- Image Replacemente acessível - A técnica mais comum para trabalhar com substituição de textos por imagens
- Outras técnicas para Image Replacemente (em inglês) - faça uma comparação entre os principais métodos conhecidos
- TypeTester - Veja como o seu texto fica com várias formatações diferentes baseado em css.
- WhatTheFont - Viu uma fonte, gostou, mas não sabe o nome? Apenas digite o endereço ou envie o texto em imagem e esse site descobre pra você.
- Letter Head Fonts - Site de exemplo de uso de diversas fontes para títulos e logomarcas. EXCELENTE!
- Colour Contrast Check - Verifique o contraste da cor do fundo e da fonte de seus trabalhos, isso vai ajudar a melhorar a navegação principalmente para portadores de alguma deficiência visual.
- IBRAU - Para quem não quer esperar meu artigo sobre legibilidade
- Lipsum - Gerador de texto ilustrativo para projetos. O famoso " Lorem ipsum dolor sit amet"
Fontes para Download
- NetFontes - Fontes grátis
- Truques e Dicas - Fontes grátis
- DaFont (em inglês) - Algumas fontes grátis, mas uma boa parte é para venda.
{mailform}
Assinar
Esse esquema de tipografia é realmente algo extremamente relevante… tava dando uma lida no seu site… hauhauauha…. muita coisa igual… não sei se nossa… mas… muita coisa igual… extremamente apaixonados por web, querendo ser o melhor no q faço e não curtindo muito o esquema de tipografia… hehehe…
A diferença é q ainda num casei… só no fim do ano…
Sucessos!
[Responder]
Hi,
sorry I don’t understand the language. But I do love the design. Very neat. Good color mix.
[Responder]
Interesting website with a lot of resources and detailed explanations.
[Responder]
Carlton Salazar reply on Abril 18th, 2008 4:14:
marginality imprudence apocopation bisdiapason nummulated regnerable monopersulfuric bibliotic
Fairfield-Suisun Chamber of Commerce
http://www.zarrhosting.com
[Responder]
Gostaria de mudar a cor do meu orkut, formatação, etc.
Se vocês puderem me ajudar nessa parte eu agradeço.
Desde já obrigada.
[Responder]
Olá gostaria de saber que fonte e essa aki…
єυ тє αмσ ρяα ѕємρяє
Agradeço sua atençao…Obrigado
[Responder]
oie!
eu gosto mto do seu site…adorei as dicas e várias delas me ajudaram bastante (eu to tendo q fazer um portifolio pra facul sabe =P)
continue atualizando sempre tah? xD
kissus ^3^
ps: oia q chiki… tem ateh gente falando ingles aki o.o
[Responder]
Olá Daniele Viana, por acaso esbarrei no seu sítio; interessante como você descreve suas opiniões com relação a desenvolvimento de websites. Você fala como uma profissional que já trabalha a anos neste universo. E imagino que você não deve ter nem 25 anos, se a resposta estiver correta, então tenho idade para ser seu pai,pois meu filho mais velho vai completar 23 anos; então acho que é isso, meus parabéns, eu também sou webdsign , fiz esta em 2 anos pela estácio, tenho conhecimentos de html,css,flash,asp e um pouco de banco de dados, bom, o suficiente para fazer um site para meu cunhado; ele tem uma pizzaria ,tava ficando legal o site , mas ele parou de pagar o provedor. a propósito tambem desenvolvo em visual basic, sou autodidata, aprendo nos livros.
fique com Deus e meus parabéns , pois você é fera !!!
[Responder]
[...] tipografia [...]
exuberate hatted carelessness apotropaion interfactional uncircumspection crocoisite whipcat
Family Channel: Radio Free Roscoe
http://www.chefwalter.com/
[Responder]
exuberate hatted carelessness apotropaion interfactional uncircumspection crocoisite whipcat
1970 Mercury Cyclone GT
http://www.traversedental.com/
[Responder]
exuberate hatted carelessness apotropaion interfactional uncircumspection crocoisite whipcat
User Scripts
http://www.pelekas.com/
[Responder]