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):
- ⍟ Arial (Windows)
- ⍟ Arimo (web)
- ⍟ Average Sans (web)
- ⍟ Averia Sans Libre (web)
- ⍟ DejaVu Sans (Linux)
- ⍟ Droid Sans (web)
- ⍟ Fira Sans (web)
- ⍟ FreeSans (Linux)
- ⍟ Hind (web)
- ⍟ Lato (web)
- ⍟ Mukta (web)
- ⍟ Muli (web)
- ⍟ Noto Sans (web)
- ⍟ Numans (web)
- ⍟ Nunito (web)
- ⍟ Open Sans (web)
- ⍟ Oxygen (web)
- ⍟ Quattrocento Sans (web)
- ⍟ Rambla (web)
- ⍟ Roboto (web)
- ⍟ Rosario (web)
- ⍟ Source Sans Pro (web)
- ⍟ Tahoma (Windows)
- ⍟ Trebuchet MS (Windows)
- ⍟ Varela Round (web)
- ⍟ Verdana (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:
Uso na folha de estilos:
* {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 </head>) para que a fonte funcione:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Arimo, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Average Sans', sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Averia Sans Libre', sans-serif;}
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:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'DejaVu Sans', sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Droid Sans', sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Fira Sans', sans-serif;}
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:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'FreeSans', sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Hind', sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Lato, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {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 </head>) para que a fonte funcione:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Muli, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Noto Sans', sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Numans, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Nunito, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Open Sans', serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Oxygen, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Quattrocento Sans', sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Rambla, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Roboto, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Rosario, sans-serif;}
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:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Source Sans Pro', sans-serif;}
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:
Uso na folha de estilos:
* {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:
Uso na folha de estilos:
* {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 </head>) para que a fonte funcione:
</head>
Um pequeno jabuti xereta viu dez cegonhas felizes.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Uso inline:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:'Varela Round', sans-serif;}
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:
Uso na folha de estilos:
* {font-family:inherit;}
p, div {font-family:Verdana, sans-serif;}
Leia também:
Fontes web: Google Web Fonts
Foto: Pixabay | Lernestorod
Post super útil! Adorei! Não conhecia essas fontes hospedadas na Web! Muito obrigada =)
ResponderExcluirCamile, que bom que gostou. Volte sempre! :)
Excluir