Busca

Carregando...

domingo, 22 de julho de 2012

Tipologia: 12 sugestões de fontes para seu blog

Ícone de fonte

Acredito que as melhores fontes para o texto de qualquer site são aquelas sem serifa (sans-serif) e que não são monoespaçadas (monospace) porque são bem legíveis e tornam o texto bastante agradável. Seguem algumas sugestões baseadas na minha própria preferência (salvo uma exceção):

► Verdana (Windows)

Este é um parágrafo com font-family Verdana. É uma de minhas fontes favoritas porque é muito fácil de ler. A recomendo também para quem prefere fontes menores, porque mesmo com tamanho pequeno de 11 pixels esta fonte mantém um bom nível de legibilidade. Como você já notou, ela é sans-serif (sem serifa).

Uso inline:

<p style="font-family:Verdana, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Verdana, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Verdana, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs -–>

► Tahoma (Windows)

Esta era minha fonte favorita quando comecei a aprender HTML, CSS e JavaScript. Tahoma também é uma fonte sans-serif. Observe que ela é mais compacta, bem menos arredondada e por isso tem uma aparência bem mais “sisuda” do que a Verdana, mas também é fácil de ler no tamanho de 11 pixels.

Uso inline:

<p style="font-family:Tahoma, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Tahoma, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Tahoma, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Arial (Windows)

Esta é a fonte padrão dos trabalhos acadêmicos, dos documentos oficiais e provavelmente também é a mais popular da web. Arial é uma fonte sans-serif. Com 11 pixels não é tão agradável de ler. Mas sou suspeita para julgar, porque a detesto em todos os tamanhos. Quando preciso ler um texto que está com esta fonte clico no Clearly imediatamente.

Uso inline:

<p style="font-family:Arial, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Arial, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Arial, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Trebuchet MS (Windows)

Esta é a fonte atual do HTMHelen, então nem precisaria dizer que Trebuchet MS é minha sans-serif favorita. Com tamanho de 11 pixels ela é assim, bem chata de ler.

Uso inline:

<p style="font-family:'Trebuchet MS', sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:'Trebuchet MS', sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:'Trebuchet MS', sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► DejaVu Sans (Linux)

Se o público-alvo do seu blog são usuários Linux, a DejaVu Sans é uma boa escolha. Para não desprestigiar os visitantes que usam Windows e querem saber mais sobre software livre, sugiro definir como segunda fonte Verdana ou outra tipologia que você achar mais parecida. Com tamanho de 11 pixels ela é assim.

Uso inline:

<p style="font-family:'DejaVu Sans', Verdana, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:'DejaVu Sans', Verdana, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:'DejaVu Sans', Verdana, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► FreeSans (Linux)

Também para Linux temos a Free Sans, que é bonita e arredondada. Escolha como segunda fonte Verdana ou outra tipologia que você achar mais parecida. Com tamanho de 11 pixels ela é assim.

Uso inline:

<p style="font-family:'FreeSans', Verdana, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:'FreeSans', Verdana, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:'FreeSans', Verdana, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Open Sans (web)

Open Sans é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>

Uso inline:

<p style="font-family:'Open Sans', sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:'Open Sans', serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:'Open Sans', serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Numans (web)

Numans é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:

<link href='http://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
</head>

Uso inline:

<p style="font-family:Numans, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Numans, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Numans, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Oxygen (web)

Oxygen é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:

<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
</head>

Uso inline:

<p style="font-family:Oxygen, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Oxygen, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Oxygen, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Muli (web)

Muli é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:

<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
</head>

Uso inline:

<p style="font-family:Muli, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Muli, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Muli, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Varela (web)

Varela é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:

<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
</head>

Uso inline:

<p style="font-family:Varela, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Varela, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Varela, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

► Arimo (web)

Arimo é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:

<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
</head>

Uso inline:

<p style="font-family:Arimo, sans-serif;">Texto do parágrafo</p>

Uso na folha de estilos:

body {font-family:Arimo, sans-serif;} <!-- se quiser usar como fonte padrão do site -->

p, div {font-family:Arimo, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->

Leia também:

Fonte das fontes web: Google Web Fonts

Posts relacionados