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.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

3 comentários em “Usando Tipografia Diferente em Sites

  1. tio rodolfo 24 de julho de 2011 10:55

    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

    • Robson Moulin 24 de julho de 2011 21:07

      opa, obrigado rodolfo, são pessoas como você que fazem com que eu continue na missão de passar o conhecimento que tenho a todos os amigos!
      volte sempre!!! abração e boa sorte nas suas lutas!

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>