⇐ Clique aqui para expandir o post. ⇒

segunda-feira, outubro 02, 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
  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)

    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;}

  2. ⍟ Arimo (web)

    3. 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;}

  3. ⍟ Average Sans (web)

    4. 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;}

  4. ⍟ Averia Sans Libre (web)

    5. 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;}

  5. ⍟ DejaVu Sans (Linux)

    6. 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;}

  6. ⍟ Droid Sans (web)

    7. 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;}

  7. ⍟ Fira Sans (web)

    8. 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;}

  8. ⍟ FreeSans (Linux)

    9. 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;}

  9. ⍟ Hind (web)

    10. 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;}

  10. ⍟ Lato (web)

    11. 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;}

  11. ⍟ Mukta (web)

    12. 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)

    13. 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;}

  13. ⍟ Noto Sans (web)

    14. 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;}

  14. ⍟ Numans (web)

    15. 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;}

  15. ⍟ Nunito (web)

    16. 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;}

  16. ⍟ Open Sans (web)

    17. 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;}

  17. ⍟ Oxygen (web)

    18. 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;}

  18. ⍟ Quattrocento Sans (web)

    19. 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;}

  19. ⍟ Rambla (web)

    20. 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;}

  20. ⍟ Roboto (web)

    21. 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;}

  21. ⍟ Rosario (web)

    22. 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;}

  22. ⍟ Source Sans Pro (web)

    23. 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;}

  23. ⍟ Tahoma (Windows)

    24. 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)

    25. 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)

    26. 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;}

  26. ⍟ Verdana (Windows)

    27. 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

Pix meutedio arroba mail ponto com

Por às
Continue lendo sobre: , , , , ,

2 comentários:

  1. Camile1/8/12 10:08

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

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.

Assinar: Postar comentários (Atom)