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):
Verdana
⍟ 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:
Texto do parágrafo
Uso na folha de estilos:
body {font-family:Arial, sans-serif;}
* {font-family:inherit;}
p, div {font-family:Arial, sans-serif;}
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
Uso na folha de estilos:
body {font-family:Mukta, sans-serif;}
* {font-family:inherit;}
p, div {font-family:Mukta, sans-serif;}
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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:
Texto do parágrafo
Uso na folha de estilos:
body {font-family:Tahoma, sans-serif;}
* {font-family:inherit;}
p, div {font-family:Tahoma, sans-serif;}
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:
Texto do parágrafo
Uso na folha de estilos:
body {font-family:'Trebuchet MS', sans-serif;}
* {font-family:inherit;}
p, div {font-family:'Trebuchet MS', sans-serif;}
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 ) para que a fonte funcione:
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Texto do parágrafo
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
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:
Texto do parágrafo
Uso na folha de estilos:
body {font-family:Verdana, sans-serif;}
* {font-family:inherit;}
p, div {font-family:Verdana, sans-serif;}
Leia também:
Fontes web: Google Web Fonts
Foto: Pixabay | Lernestorod
Artigo exclusivo do Meu Tédio, blog da Helen Fernanda. Reprodução proibida.