Jun92006

Typefaces na medida certa

É sabido que quando criamos uma família de fontes (font-family) para um site, esta se comporta de acordo com as fontes instaladas na máquina do usuário. Se o usuário não tem a primeira fonte da lista, a segunda é testada e assim sucessivamente até a última fonte definida na sua família.

Para não ter problemas de compatibilidade entre fontes de PC e Mac para a família a ser criada, pode-se usar Times para fontes serifadas, Arial e Helvetica para fontes não serifadas e Courier para fontes monospace. Mas… Por que não fugir deste padrão em determinados casos?

Arrojando a família de fontes

Existem várias técnicas para usar fontes que não são comumente encontradas em computadores de usuários, mas estas são muito limitadas e muitas das vezes restringem-se apenas à estilização de títulos.

Na maioria dos casos, nada melhor que uma família de fonte bem definida. Uma “família de fonte bem definida” seria a criação de uma família que seja apresentada igual ou similarmente em PC's e em Mac's. Podemos usar, então, as web-safe fonts.

Usando um typeface web-safe

Typeface, basicamente, é o conjunto de caracteres, símbolos e ideogramas que formam uma fonte.

As typefaces possuem quatro famílias básicas. São elas: serif, sans-serif, monospace e display.

  • Fontes serif são as que apresentam extensões decorativas nas extremidades de seus caracteres (pontas salientes). A fonte Times New Roman talvez seja a mais clássica das fontes serifadas.
  • Fontes sans-serif são fontes não serifadas (sans vem do francês sem), ou seja, fontes sem as pontas salientes. A nossa boa e velha Arial está na lista das não serifadas.
  • Fontes monospace são as que possuem os caracteres com mesma largura. Lembra-se das letras das máquinas de escrever? Pois então, elas são monospace. As fontes monospace são comumente utilizadas em programação para tipografar os códigos fonte.
  • Fontes display são fontes ornamentais e decorativas. Ela desencadeia em outras famílias de fonte, como as coursivas (Comic Sans MS) e as fantasy (Impact), por exemplo.

As fontes web-safe são as instaladas por default em um SO e econtradas tanto nos PC's quanto nos MAC's. Para cada família de fonte, temos algumas fontes web-safe. São elas:

serif:
  • Georgia
  • Times New Roman
  • Palatino
sans-serif:
  • Arial
  • Arial Narrow
  • Arial Black
  • Helvetica
  • Trebuchet MS
  • Verdana
monospace:
  • Andale Mono
  • Courier
  • Courier New
display:
  • Comic Sans MS
  • Impact

Usando as fontes acima, a probabilidade de ter um layout com tipografia diferente entre PC's e MAC's é mínima. Lembrando sempre que a ordem de utilização das fontes e a família a ser usada deve estar diretamente relacionada à finalidade do site a ser criado.

Referências

Uma resposta para “Typefaces na medida certa”

Poste um comentário




Você pode utilizar as seguintes tags para formatação: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Oscomentários

Comentários diversos dos visitantes

e-okul disse:

A idéia também veio das tabelas, já que, quando cheguei na agência, eles usavam tabelas pra fazer layouts e eu fui o responsável (e ainda continuo sen...

Yogourt disse:

A mistura dos dois estilos de construção, com e sem tabelas, seria a solução? Já construi sítios totalmente em tableless e realmente o códifo C...

keylla rios de oliveira disse:

quero uma maquete de como é fabricado o lapis de sua matéria prima até sua produção final o que nenhum site me forneceu então peço que o site publique...

Jader Rubini disse:

Bacana. Faço algo bastante parecido com isso, mas só que divido o grid em 5. Veja um exemplo no site da agência onde tabalho: http://interag.net/fal_...

RamonPage disse:

@High: realmente... Andei meio sumido no site, mas agora estou de volta. E sobre o Ubuntu, qualquer semelhança é mera coincidência...

Quemsou

Uma prévia de quem é RamonPage

Avatar RamonPageMeu nome é Ramon Bispo. Sou web developer/ designer e natural do Rio de Janeiro, Brasil. Saiba mais sobre mim…