🔡 26 sugestões de fontes sem serifa para seu blog
Atualizado dia 02/10/2017.
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):
1. Arial
2. Arimo
3. Average Sans
4. Averia Sans Libre
5. DejaVu Sans
6. Droid Sans
7. Fira Sans
8. FreeSans
9. Hind
10. Lato
11. Mukta
12. Muli
13. Noto Sans
14. Numans
15. Nunito
16. Open Sans
17. Oxygen
18. Quattrocento Sans
19. Rambla
20. Roboto
21. Rosario
22. Source Sans Pro
23. Tahoma
24. Trebuchet
25. Varela Round
26. Verdana
###
1. ⍟ 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.
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:Arial, sans-serif;}
###
2. ⍟ 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>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:Arimo, sans-serif;}
* Download gratuito da fonte Arimo para Windows e Mac
###
3. ⍟ Average Sans (web)
**Average 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=Average+Sans ' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Average Sans', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Average Sans', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Average Sans', sans-serif;}
* Download gratuito da fonte Average Sans para Windows e Mac
###
4. ⍟ Averia Sans Libre (web)
**Averia Sans Libre** é 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=Averia+Sans+Libre' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Averia Sans Libre', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Averia Sans Libre', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Averia Sans Libre', sans-serif;}
* Download gratuito da fonte Averia Sans para Windows e Mac
###
5. ⍟ DejaVu Sans (Linux)
Se o público-alvo do seu blog são usuários Linux, a **DejaVu Sans** é uma boa escolha. Defina uma segunda fonte para os usuários de Windows e Mac. Com tamanho de 11 pixels ela é assim.
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'DejaVu Sans', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'DejaVu Sans', sans-serif;}* {font-family:inherit;}
p, div {font-family:'DejaVu Sans', sans-serif;}
* Download gratuito da fonte DejaVu Sans para Windows e Mac
###
6. ⍟ Droid Sans (web)
**Droid Sans** é uma fonte 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=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Droid Sans', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Droid Sans', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Droid Sans', sans-serif;}
* Download gratuito da fonte Droid Sans para Windows e Mac
###
7. ⍟ Fira Sans (web)
**Fira Sans** é uma fonte 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=Fira+Sans' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Fira Sans', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Fira Sans', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Fira Sans', sans-serif;}
* Download gratuito da fonte Fira Sans para Windows e Mac
###
8. ⍟ FreeSans (Linux)
Também para **Linux** temos a **FreeSans** , que é bonita e arredondada. Defina uma segunda fonte para os usuários de Windows e Mac. Com 11 pixels ela é assim.
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:FreeSans, sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:FreeSans, sans-serif;}* {font-family:inherit;}
p, div {font-family:'FreeSans', sans-serif;}
* Download gratuito da fonte FreeSans para Windows e Mac
###
9. ⍟ Hind (web)
**Hind** é uma fonte _sans-serif_ 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=Hind' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Hind', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Hind', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Hind', sans-serif;}
* Download gratuito da fonte Hind para Windows e Mac
###
10. ⍟ Lato (web)
**Lato** é uma fonte _sans-serif_ 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=Lato' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:Lato, sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:Lato, sans-serif;}* {font-family:inherit;}
p, div {font-family:Lato, sans-serif;}
* Download gratuito da fonte Lato para Windows e Mac
###
11. ⍟ Mukta (web)
**Mukta** é 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=Mukta' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:Mukta, sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:Mukta, sans-serif;}* {font-family:inherit;}
p, div {font-family:Mukta, sans-serif;}
###
12. ⍟ 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>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:Muli, sans-serif;}
* Download gratuito da fonte Muli para Windows e Mac
###
13. ⍟ Noto Sans (web)
**Noto 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=Noto+Sans' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Noto Sans', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Noto Sans', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Noto Sans', sans-serif;}
* Download gratuito da fonte Noto Sans para Windows e Mac
###
14. ⍟ 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>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:Numans, sans-serif;}
* Download gratuito da fonte Numans para Windows e Mac
###
15. ⍟ Nunito (web)
**Nunito** é 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=Nunito' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:Nunito, sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:Nunito, sans-serif;}* {font-family:inherit;}
p, div {font-family:Nunito, sans-serif;}
* Download gratuito da fonte Nunito para Windows e Mac
###
16. ⍟ 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>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:'Open Sans', serif;}
* Download gratuito da fonte Open Sans para Windows e Mac
###
17. ⍟ 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>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:Oxygen, sans-serif;}
* Download gratuito da fonte Oxygen para Windows e Mac
###
18. ⍟ Quattrocento Sans (web)
**Quattrocento 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=Quattrocento+Sans" rel="stylesheet" type="text/css">
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Quattrocento Sans', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Quattrocento Sans', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Quattrocento Sans', sans-serif;}
* Download gratuito da fonte Quattrocento Sans para Windows e Mac
###
19. ⍟ Rambla (web)
**Rambla** é 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=Rambla ' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-Rambla , sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:Rambla , sans-serif;}* {font-family:inherit;}
p, div {font-family:Rambla, sans-serif;}
* Download gratuito da fonte Rambla para Windows e Mac
###
20. ⍟ Roboto (web)
**Roboto** é 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=Roboto' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:Roboto, sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:Roboto, sans-serif;}* {font-family:inherit;}
p, div {font-family:Roboto, sans-serif;}
* Download gratuito da fonte Roboto para Windows e Mac
###
21. ⍟ Rosario (web)
**Rosario** é 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=Rosario' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:Rosario, sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:Rosario, sans-serif;}* {font-family:inherit;}
p, div {font-family:Rosario, sans-serif;}
* Download gratuito da fonte Rosario para Windows e Mac
###
22. ⍟ Source Sans Pro (web)
**Source Sans Pro** é 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=Source+Sans+Pro' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Source Sans Pro', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Source Sans Pro', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Source Sans Pro', sans-serif;}
* Download gratuito da fonte Source Sans Pro para Windows e Mac
###
23. ⍟ 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** , e é mais difícil de ler no tamanho de 11 pixels.
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:Tahoma, sans-serif;}
###
24. ⍟ Trebuchet MS (Windows)
Durante muito tempo essa foi a fonte do HTMHelen. Usei **Trebuchet MS** até repugnar. Com 11 pixels ela é assim, bem chata de ler.
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:'Trebuchet MS', sans-serif;}
###
25. ⍟ Varela Round (web)
**Varela Round** é uma fonte que está hospedada na web. Ela é muito parecida com Varela, mas tem acabamento ainda mais arredondado nas extremidades das letras. 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+Round' rel='stylesheet' type='text/css'>
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso _inline_ :
<p style="font-family:'Varela Round', sans-serif;">Texto do parágrafo</p>
Uso na folha de estilos:
body {font-family:'Varela Round', sans-serif;}* {font-family:inherit;}
p, div {font-family:'Varela Round', sans-serif;}
* Download gratuito da fonte Varela Round para Windows e Mac
###
26. ⍟ 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).
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
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;}* {font-family:inherit;}
p, div {font-family:Verdana, sans-serif;}
Leia também:
* Como personalizar a fonte
* Fontes compatíveis com Linux
Fontes web: Google Web FontsFoto: Pixabay | Lernestorod
