segunda-feira, 2 de outubro de 2017

🔡 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 (Windows)
  2. 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;}

  3. ⍟ Arimo (web)
  4. 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;}

  5. ⍟ Average Sans (web)
  6. 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;}

  7. ⍟ Averia Sans Libre (web)
  8. 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;}

  9. ⍟ DejaVu Sans (Linux)
  10. 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;}

  11. ⍟ Droid Sans (web)
  12. 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;}

  13. ⍟ Fira Sans (web)
  14. 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;}

  15. ⍟ FreeSans (Linux)
  16. 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;}

  17. ⍟ Hind (web)
  18. 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;}

  19. ⍟ Lato (web)
  20. 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;}

  21. ⍟ Mukta (web)
  22. 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;}

  23. ⍟ Muli (web)
  24. 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;}

  25. ⍟ Noto Sans (web)
  26. 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;}

  27. ⍟ Numans (web)
  28. 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;}

  29. ⍟ Nunito (web)
  30. 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;}

  31. ⍟ Open Sans (web)
  32. 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;}

  33. ⍟ Oxygen (web)
  34. 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;}

  35. ⍟ Quattrocento Sans (web)
  36. 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;}

  37. ⍟ Rambla (web)
  38. 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;}

  39. ⍟ Roboto (web)
  40. 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;}

  41. ⍟ Rosario (web)
  42. 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;}

  43. ⍟ Source Sans Pro (web)
  44. 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;}

  45. ⍟ Tahoma (Windows)
  46. 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;}

  47. ⍟ Trebuchet MS (Windows)
  48. 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;}

  49. ⍟ Varela Round (web)
  50. 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;}

  51. ⍟ Verdana (Windows)
  52. 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:

Fontes web: Google Web Fonts
Foto: Pixabay | Lernestorod

2 comentários:

  1. Post super útil! Adorei! Não conhecia essas fontes hospedadas na Web! Muito obrigada =)

    ResponderExcluir
    Respostas
    1. Camile, que bom que gostou. Volte sempre! :)

      Excluir

Posts relacionados