Logotipo Design Interativo
usando-tipografia-diferente-em-sites

Usando Tipografia Diferente em Sites


Todos nós sabemos como é difícil pensar em um trabalho para web a não ser com tipografia Arial, Verdana, Sans Serif e Helvética, bom pelo menos todos os computadores possuem essas fontes e o navegador consegue naturalmente mostrar o conteúdo com elas.

E quando nós queremos fazer um trabalho diferenciado, com tipografia bem elaborada que realmente faz parte do layout do site e passa o conceito que é concebido, bom existem diversas maneiras, sites pagos ou até o uso de Java scripts para renderizar a tipografia escolhida e a quem use imagens para mostrar esses textos, mas todos nós sabemos que esta errado, que usar imagens e não textos atrapalha na acessibilidade do site bem como a otimização nos mecanismos de busca.

A solução eficaz para isso é usar o recurso @font-face do CSS a tempos estava querendo usar esse recurso mas estava achando que só funcionaria em alguns browsers e outros não, mas descobri que esse recurso é muito bom e o código que colocarei abaixo faz com que em todos os browsers consigam interpretar o tipo e fazer a troca.

Uma observação a ser seguida é que no Internet Explorer o uso do @font-face causa um certo atraso pois o browser faz a leitura de todo o site e depois faz a conversão da tipografia. Também vale lembrar que você tem a licença de utilizar essa fonte nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da fonte. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a fonte que você utiliza. Certifique-se de que ela é uma fonte gratuita.

Veja a lista dos formatos de fontes:

String Font Format Common extensions
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Vamos para o funcionamento do @font-face:

1º Primeiramente você deve converter sua fonte para os formatos que os browsers interpretam, para isso use este site que faz a conversão em instantes em todos os formatos

http://www.fontsquirrel.com/fontface/generator

2º Feito a conversão vamos para o código CSS

@font-face {
          font-family: 'AcadianRegular';   
          src: url('acadian-webfont.eot'); 
          src: local('Acadian'), url('acadian-webfont.ttf') format('truetype');
                     
           }


Em nosso exemplo estou usando a fonte AcadianRegular, no caso uma fonte gratuita.

p{
   font-family: AcadianRegular, Arial, sans-serif; 
   font-size:23px;
  }


Espero que tenha esclarecido as dúvidas de quem quer fazer trabalhos diferenciados para web.

Comentários
  1. tio rodolfo disse:

    olá

    n lembro como achei o blog, sei que o deixei nos favoritos para n esquecer e vim hj bisbilhotar.
    gostei dos textos, pela forma fácil de compreender e pela relevância. (x) gostei irei voltar sempre que puder. estudo publicidade, mas ainda estou engatinhando nisso tudo, a área de designer é uma das possibilidades que tenho como interesse para seguir na carreira por isso a visita ao site.

    parabéns

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade