Melhores fontes para melhorar a experiência de leitura

13

Estou construindo um site cujo principal objetivo é veicular conteúdo (legislatura) e quero oferecer a melhor experiência de leitura aos usuários. Você pode dar uma olhada na página de exemplo em:

http://iura.cl/cc/44

Como você pode ver, retirei tudo o que estou usando no momento Telex webfont. Também tenho uma opção para leitura noturna que deve reduzir o brilho:

http://iura.cl/cc/44?estilo=nocturno

Gostaria de saber o que devo considerar sobre a fonte que escolho para garantir que seja legível, se houver algum guia a seguir?

Dan
fonte
2
"Que fonte você recomenda" é uma pergunta muito ampla para respondermos. Observe também que, enquanto uma fonte é certamente uma parte importante de como algo 'legível' é, há também uma infinidade de outras variáveis (largura da coluna, espaçamento entre linhas, cor, insinuando, layout, etc.)
DA01
@ DA01 talvez exista um guia que você possa recomendar?
Dan
1
A pergunta parece boa para mim - não é "Qual fonte você recomenda", é "Como escolher uma fonte de alta legibilidade para um site " - montes de critérios.
usar o seguinte comando

Respostas:

10

Na verdade, existem alguns princípios bastante simples se o seu critério número um for uma fonte de alta legibilidade para um site .

  1. Pense mainstream. Graças a @font-facevocê, você pode escolher entre milhares e milhares de fontes - mas fontes menos populares ou mais recentes geralmente apresentam problemas de renderização entre navegadores e sistemas operacionais, às vezes até mesmo quando são de fundamentos respeitáveis. Se a legibilidade for sua prioridade e você não quiser fazer uma grande quantidade de testes entre navegadores e sistemas operacionais, convém jogar com segurança e usar uma fonte confiável, testada e comprovada. As fontes antigas seguras para a Web gostam Verdanae Georgiasão apostas seguras, pois são tão amplamente usadas que foram testadas mesmo em configurações mais raras de navegadores / sistemas operacionais. Além disso, a familiaridade ajuda na legibilidade.
  2. Altura x alta e larga. Você não sabe qual é a qualidade ou densidade de pixels da tela do seu leitor; portanto, se você estiver priorizando a legibilidade, verifique se os importantes recursos distintivos das letras são extremamente claros. As fontes projetadas para facilitar a leitura na Web, como Verdanae Georgia, usam o máximo possível de pixels para a altura x, onde estão os principais detalhes de uma letra, e usam o mínimo de pixels em ascendentes ou descendentes, onde um aumento de um ou dois pixels é suficiente para facilitar com facilidade diga a bde um oou a p.
  3. Não é muito leve. O tipo de luz fica ótimo nas telas de impressão ou de alta densidade de pixels - mas há uma boa razão pela qual ele raramente foi usado nas telas até a ios7 e era controverso até então: se o espectador não estiver visualizando em condições ideais, como uma tela de alta qualidade em constante iluminação interna, corre o risco de ser legível. Escolha uma fonte com um bom peso regular - eu mencionei Verdanae Georgia?

Há uma abundância de fontes que atendem a esses diferentes critérios Verdanae Georgia, é claro, e estes dois são considerados às vezes um pouco chato porque até 2009 ou assim quando @fontface se tornou amplamente utilizado foram sido o go-to fontes para grande parte da web .

Mas você realmente não pode errar com eles - eles foram projetados para facilitar a leitura na Web, e todas as combinações de navegadores e sistemas operacionais foram testadas para exibi-las bem.


Edit: Quando os vendedores webtype e foundaries não ir para o trabalho de testar para uma boa legibilidade, eles estão propensos a gritar sobre isso em seu marketing. Por exemplo, o tipo de web "Reading Edge" (dica de Chris Burton que mencionou isso aqui ). Ainda assim, teste amplamente.

user56reinstatemonica8
fonte
1
Não sou designer e tenho alguns problemas com meus olhos. Eu gosto de ler alguns textos da legislatura, mas acho que o site brasileiro dói algumas vezes, então peguei sua sugestão (Verdana) e coloquei um plugin chamado Stylish , com 1,5 de altura de linha, tamanho de fonte 16px e cor preta. É muito confortável para mim agora.
Fabio Montefuscolo 27/11
5

Ok, eu vou em frente e dar meus pensamentos sobre isso. Não existe uma 'melhor fonte' definitiva nem porque a escolha de uma fonte depende de muitos aspectos diferentes. O que pode haver é um 'melhor método para escolher uma fonte'.

Portanto, coisas a serem consideradas para ajudar a escolher a melhor fonte para o seu projeto;

Mídia: como a fonte será exibida, papel, tela, dispositivo online, portátil, etc. Você deseja ter certeza de que está escolhendo uma fonte apropriada para a mídia em que será exibida, por exemplo, um bloco de Times New Roman pode ser bom para um documento impresso, mas, na tela (especialmente uma tela pequena), um bloco do Times New Roman pode ser bastante difícil de ler. Você também deseja ver o que está disponível para você, se estiver restrito a fontes da Web, recursos como as fontes do Google podem ajudá-lo aqui. (Da Wikipedia: "Fontes seguras da Web As fontes seguras da Web são fontes que podem estar presentes em uma ampla variedade de sistemas de computador e usadas pelos autores de conteúdo da Web para aumentar a probabilidade de que o conteúdo seja exibido na fonte escolhida. Se um visitante de uma Web site não possui a fonte especificada, o navegador tenta selecionar uma alternativa semelhante, com base nas fontes de fallback especificadas pelo autor e nas famílias genéricas ou usa a substituição de fonte definida no sistema operacional do visitante. ")

Público: Pense em quem o lerá. Uma criança pequena pode se sair melhor sem uma fonte com serifa ou uma única história 'a' em oposição a uma história dupla 'a' . No entanto, se fosse um convite de casamento, fontes como a Escritura Eduardiana são as mais populares nesse contexto, porque vamos ser mais Serif, mais decorativos, melhor - de acordo com algumas noivas;) embora ainda o material decorativo seja usado principalmente para títulos e não para todo o conteúdo. Como um ol sábio

Contraste / Cor: Novamente, isso é algo a considerar em termos de seu projeto. É claro que você não deseja cegar as pessoas como resultado de um contraste terrivelmente alto ou dar-lhes rugas por olharem para algo que tenha um contraste terrivelmente baixo - essa parte é óbvia. Mas, dependendo do seu esquema de cores, você pode querer mexer nas configurações de brilho e contraste. Você notará que o GD.SE, por exemplo, não é completamente preto e branco (conforme solicitado e respondido aqui ) - ele tem um contraste menor do que isso; consequentemente, é muito fácil olhar neste site por períodos muito longos em comparação a olhar para algo com um contraste muito maior - seus olhos se cansariam!

Peso: em geral, as fontes com peso mais leve, dez por serem um pouco mais legíveis do que as mais pesadas, isso é discutido mais adiante aqui, juntamente com outros aspectos da legibilidade que você pode achar úteis.

Quantas: dependendo da sua mídia, público e conteúdo, você pode escolher várias fontes. Sugiro ser cauteloso. Você certamente não quer confundir o conteúdo. O ponto principal da fonte é comunicar algo, o que você está procurando é a maneira de fazer isso de maneira mais eficaz. Muitas fontes podem ser confusas, embora uma única fonte possa às vezes ser entediante. Geralmente, misturá-lo em termos de negrito / itálico e tamanho com talvez duas fontes é o que costuma acontecer. O emparelhamento de fontes é discutido um pouco mais aqui .

Esses são alguns dos aspectos que você deve restringir se estiver indo de uma lousa em branco, mas, embora haja muito a considerar quando realmente se trata disso, não é tão ruim assim. O valor de escolher a fonte / fontes corretas no estágio inicial de um projeto não tem comparação! Há mais fatores a serem considerados ao escolher uma fonte aqui.

Uma boa analogia é que é como se vestir, um conceito simples que é discutido aqui .

Então, como o formato da minha resposta caiu naturalmente, primeiro você quer descobrir para quem é e o que tem a dizer - então você quer descobrir os meios de comunicação, qual fonte :) e, já que isso não seria um Resposta da Jenna sem muitos links, isso será discutido aqui .

Eu sugiro fortemente a leitura dos links que forneci, eles são bastante úteis e ajudarão a equipá-lo para escolher a fonte certa para o seu projeto, é isso que melhorará a experiência do leitor. Não se trata apenas da legibilidade, mas também de todo o contexto em que a fonte está contribuindo, para não mencionar a estética que uma fonte adequadamente legível pode tirar de um design inteiramente quando e, igualmente legível, mas mais apropriada, uma pode passar despercebida e, portanto, faz com que a fonte design e as informações as coisas mais importantes. Ter tempo para fazer isso na minha opinião é bastante essencial.

Espero ter ajudado e não tenha divagado muito, sou um pouco apaixonado pela fonte certa :) Boa sorte com seu projeto.

Jenna
fonte
2

Acredito que as fontes Serif tendem a ser mais fáceis aos olhos por longos períodos de leitura. Para uma melhor experiência de leitura, acho que uma fonte com serifa como o Adobe Garamond funciona bem. Não é tão "blá" quanto o Times. Existem algumas curvas interessantes nas serifas que ajudam a torná-la um pouco mais "pura" no que diz respeito às fontes serifas.

insira a descrição da imagem aqui

Aqui está um artigo sobre o assunto com o qual concordo:

Serif vs. Sans: a batalha final

ckpepper02
fonte
1
Não há evidências conclusivas de que os rostos com serifa sejam mais ou menos legíveis que os rostos sem serifa. A única exceção seria na tela, onde exibições de baixa resolução podem dificultar a renderização dos detalhes de uma face com serifa.
DA01 16/01
1
Garamond pode ser bonito, mas sua baixa proporção de ex-em prejudicaria a legibilidade se fosse usada como fonte do corpo. As fontes serif com alturas mais generosas incluem Georgia, Bitstream Charter e Charis SIL.
Gavin R. Putland
@ GavinR.Putland Você poderia elaborar sobre a relação ex / em? Isso pode prejudicar a legibilidade apenas se o espaçamento entre linhas for muito pequeno = incorreto. Recomenda-se pelo menos 140% de espaçamento entre linhas.
11556 Mikhail V
Notei uma tendência das pessoas mencionarem algum argumento de "evidência". Como especialista, posso dizer que as fontes do tipo Garamond são mais legíveis, e o mesmo dirá a outros especialistas em tipografia. Isso não é "evidência" para você?
Mikhail V
@MikhailV isso não é evidência. Essa é a opinião. Que evidência existe lá fora (que é mínima) tende a inclinar-se para "a maioria dos rostos legíveis são os rostos da pessoa é leitura mais familiar"
DA01