Daniele V Silva - Webdesigner, desenvolvedor front-end, programador de interfaces, Gerente de projetos web, consultora e freelancer

Untitled – Rise

Design baseado em Tipografia – Mais elementos de texto

Publicado em , por , 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.

Fonte - Sofia ScriptUm pouco mais modernaEstilo Retrô

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.

Logomotive Logomotive Logomotive

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

7 opiniões sobre “Design baseado em Tipografia – Mais elementos de texto”

  1. Cláudio Sout (Paraíba) disse:

    Parabéns pelo site e pelos artigos também.

    São ótimos!

  2. Ingrid disse:

    adore este site

  3. Olá Moça, eu sempre visitei seu blog, mas nunca comentei – sim meio preguiça, meio pq eu vou lendo vou clicando ai ja viu – Mas adorei esse post sobre tiporafia, eu mesma ja tive muito problemas com isso, e um gente simples é o replacement mesmo. adorei. beijos

  4. vinicius marcos disse:

    SO PARABÉNS POR TODAS AS IDEIAS QUE DISTRIBUI GRATUITAMENTE!

  5. Pablo Rezende disse:

    Oi Daniele,
    gostaria de te dar os parabéns pelo seu blog, achei alguns posts muito interessantes por aqui e acabei de assinar o feed, espero que ainda venham mais alguns para ajudar seu amigo de profissão aqui!
    Beijão e parabéns!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *