it-swarm-pt.tech

Existe um tamanho de fonte ideal?

Para a maioria dos projetos de sites com os quais me envolvi, o tamanho da fonte do texto em massa geralmente é de 12 a 13 pixels, mas estou me perguntando se esse é um bom tamanho. Lembro-me de ler um artigo dizendo que os tamanhos das fontes nos sites devem ser muito maiores, em torno de 17 px para que o texto em massa corresponda aos tamanhos das fontes impressas.

Existe um tamanho de fonte ideal. Quando é algo muito grande/pequeno para o usuário médio?

Existe algum favor/contra para tamanhos de fonte pequenos/médios/grandes?

Atualização:
Gostaria de obter sua experiência com as reações reais dos usuários dos testes, etc. É fácil isso, isso e isso é muito grande ou pequeno, mas aprendi que os usuários às vezes surpreendem e reagem de forma diferente de opiniões de especialistas .

Além disso, a capacidade de alterar o tamanho da fonte é uma boa discussão, mas não é o que é solicitado aqui. Estou interessado em saber mais sobre como os usuários reagem a diferentes tamanhos de fonte, e não como devem poder alterá-los.

56
googletorp

Este é um assunto amplamente debatido. Uma das melhores maneiras pelas quais eu já vi isso explicado é a partir da apresentação Design para desenvolvedores: fazendo com que seus front-end sugem menos by Idan Gazit.

Este teve o seguinte slide: alt text Este é um texto de 16 pixels em uma tela normal e um texto de 12 pontos em um livro. A mensagem é que 12pt é excelente para um livro, mas geralmente também é mantido muito mais próximo do leitor do que de uma tela. Levando em consideração a distância, os 16 pixels na tela e os 12 pontos no livro parecem ter o mesmo tamanho. 12pt no papel = 16px na tela

Existem todos os tipos de exceções, nas quais o texto menor é preferido. Mas, para otimizar a legibilidade de textos mais longos, concordo com 16px.

É recomendável alterar as unidades escalonáveis ​​como em ou % do que as unidades de tamanho fixo como pt ou px. Leia mais: Tamanho da fonte CSS: em vs. px vs. pt vs. percent

34
user745

Não existe tamanho de fonte ideal. Procurar um significa que você está esquecendo algo importante: a legibilidade do texto não é apenas um produto de tamanho.

Criei cerca de uma dúzia de sites como designer de interface do usuário nos últimos cinco anos, e todos eles tiveram diferentes públicos. Uma das coisas que descobri foi que o tamanho não é o maior fator. É uma combinação de diferentes aspectos relacionados à exibição de texto:

  • contraste
  • família de fontes
  • altura da linha
  • posição na página

A combinação desses resultados leva a uma métrica aproximada para legibilidade geral e descobri que esse é o destino de design mais importante para o texto.

Como uma anedota do teste (desde que você perguntou): trabalhei em um site da comunidade com 700 mil visitas mensais em que o público principal era de usuários que não conheciam computadores. Usamos 12px Verdana para o tipo de corpo e 14px-16px Arial para os títulos. Ocasionalmente, reduzíamos para 11px Verdana em cinza para texto menos importante. Ao fazer testes de usabilidade no site, recebemos comentários não sobre o tamanho do texto, mas sobre como as cores ao redor do design pareciam estar olhando para uma lâmpada. Nós interpretamos isso como o site sendo muito brilhante e ajustamos o contraste de todo o design para ser menos brilhante. Parcialmente devido a essas alterações e parcialmente devido a alterações na estrutura de navegação, observamos um aumento significativo mensal nas visualizações de página por visitante.

Uma coisa a lembrar sobre os tamanhos de fonte pequenos é que eles têm um objetivo: quando você precisa que algo seja menor que outro (duh!). Mas como um designer de interface do usuário, é importante lembrar que seu trabalho é criar clareza e usabilidade (entre outras coisas) na interface e que enfatize alguns elementos da interface do usuário, você pode melhorar sua usabilidade. Cabe a você decidir quais elementos devem ser reduzidos e quais aspectos do texto devem ser modificados (da minha lista acima).

20
Rahul

12px parece funcionar bem para a maioria das pessoas. Ter algo em 17px torna mais difícil a leitura, assim como tê-lo abaixo de 10px. Eu acho que 12-13px é uma boa orientação.

Mas, na verdade, você deve definir o tamanho do texto para algo como 1em. Isso ocorre porque alguns navegadores não permitem que os usuários redimensionem o texto se ele estiver definido em pixels. Independentemente do tamanho do texto, as pessoas com olhos nítidos o tornarão menor para que possam ler mais, e as pessoas com deficiência visual aumentarão o texto.

Basta definir as coisas em 1em e deixar que as pessoas e seus navegadores resolvam o resto.

É bom testar sua página com tamanhos de fonte diferentes, para ver se o layout permanece gerenciável.

9
Vincent McNabb

De acordo com evidências científicas recentes:

  • 18 e 22 pontos levarão a uma legibilidade objetiva significativamente melhorada (medida com rastreador ocular)
  • 10 e 12 pontos levarão a uma compreensão significativamente prejudicada (medida com perguntas de compreensão)
  • quanto maior, melhor, porque a legibilidade objetiva melhora continuamente com o aumento do tamanho da fonte.

Não tome minha palavra para isso. Leia os detalhes em artigo científico .

7
Martin

O tamanho ideal da fonte é individual e é definido pelo sistema operacional/navegador dos usuários. Então não mude.

Se você precisar aumentar a fonte (por exemplo, títulos), faça-o relativamente (por exemplo, 200% ou 2em).

Nunca reduza o tamanho da fonte e sempre mantenha um bom contraste para manter a legibilidade.

5
George Pavelka

Não.
... não está em px de qualquer maneira.

As unidades certas para expressar um tamanho ótimo, se houver, seriam ângulo subtendido na retina.

Se você está vendo px, está vendo apenas um dos três fatores necessários para determinar a legibilidade1 1:

A afinação de pontos ou a definição adequada de "resolução" (pixels/distância) é como você converte de px para uma distância real.

É necessário ler a distância, é claro, porque caracteres da mesma dimensão não são igualmente legíveis em todos os lugares.

... e, claro, a legibilidade aumenta com:

  • px mais alto
  • ponto mais alto (ou resolução mais baixa)
  • menor distância de leitura

1 1Também há a cor do texto, a cor do plano de fundo, a fonte etc. (o texto em negrito, preto e branco, precisa de um tamanho menor do que o texto em itálico amarelo e laranja), mas px, pitch e distância de leitura cobrem o que você precisa tomar uma decisão baseada apenas em dimensão.

3
A.M.

Você não deve tentar definir um tamanho de fonte. Você pode usar + N para indicar "tornar isso maior que a linha de base" (ou -N para diminuir). Qualquer tamanho que você especificar estará errado em algumas circunstâncias; a única opção viável que não exige que os usuários tomem medidas corretivas no site é deixar o navegador decidir.

2
Monica Cellio

Você deve nunca usar pixels para tamanhos de fonte. Tentar ler fontes de 14px em uma tela de 12 "que suporta resolução Full HD fornece texto em caracteres de 1 a 2 mm de altura (e dor de cabeça em muito menos de uma hora).

2
JanC

12 px é bom, mas também é importante que os usuários aumentem o tamanho da fonte e que seu site não seja quebrado quando isso acontecer.

2
Ryan Shripat

Existem alguns posts estranhos e conceitos errados neste tópico. Parece que muitas pessoas querem ignorar a ciência e os aspectos bem pesquisados ​​de como lemos e compreendemos o texto. Por acaso, estou pesquisando novos padrões sobre esse assunto, então aqui está um pouco do estado da arte atual:

A Ciência da Arte

Pesquisas existentes definiram que a velocidade ideal de leitura para indivíduos com visão normal, com uma fonte com contraste máximo, é uma altura x entre 0,2 ° e 2 ° de ângulo visual. Altura X é o tamanho vertical real do x minúsculo de uma fonte. Obviamente, o tamanho real da fonte varia com base na distância de visualização, mas felizmente o pixel de referência CSS - px - é baseado no ângulo visual. Um ângulo visual de 0,2 ° é conhecido como tamanho crítico da impressão, pois é nesse ponto que a velocidade máxima de leitura é alcançada. (Acima de 2 °, ele volta para baixo.)

Um px corresponde a 0,0213 graus ou 1,278 minutos de arco. Isso é baseado em um dispositivo com uma densidade de pixels de 96dpi @ distância e 28 polegadas. Assim, os fabricantes de dispositivos podem usar o px de referência para definir um tamanho com base na distância visual pretendida/esperada. Isso é discutido nos padrões CSS do W3C. Os fabricantes de dispositivos usam o px de referência para definir o tamanho real da rasterização com base na distância pretendida da visualização. 16px não será necessariamente 16 pixels de dispositivo. Em um iPhone com uma proporção de 2: 1, seriam 32 pixels de dispositivo, por exemplo.

Assim, o tamanho crítico de impressão para a web é uma altura x de 9,4px. Dependendo do design da fonte específica, isso se refere a uma fonte entre 17 e 20 pixels. Isso resultou em padrões de acessibilidade que indicam que 18 px é o tamanho mínimo da fonte desejada.

Mas espere, há mais

Há também um nível crítico contrast. Os tamanhos de fonte acima mencionados estão relacionados a um contraste máximo. Mas e quanto aos contrastes mais baixos? Muitos designers estão afetando seriamente a legibilidade de seus sites usando cores de baixo contraste. Parte disso se deve à falha da WCAG 2.0 na especificação de contrastes corretos em relação à frequência espacial. 4.5: 1 é mais do que o necessário para um título grande e gordo, mas 4.5: 1 é insuficiente para o texto pequeno e fino do corpo.

Para pessoas com visão normal, o contraste crítico pode ser tão baixo quanto 10% para títulos grandes e gordos no pico da função de sensibilidade ao contraste. Mas nas frequências espaciais muito altas de fontes pequenas e finas, o contraste precisa ser 20 vezes maior. Veja o diagrama a seguir, onde todo o texto está na mesma cor CSS (e isso nem sequer está discutindo a maneira como o antialiasing controla o contraste do texto além de qualquer reconhecimento).

contrast sensitivity curve sowing relation to text size

Assim, o tamanho da fonte, o contraste e vários outros recursos de design trabalham juntos, fornecendo um texto "mais legível". Independentemente disso, um tamanho de fonte de 12px que muitos pôsteres neste segmento estão recomendando é surpreendentemente pequeno demais, e onde eles chegaram a esse número é uma incógnita. Você pode usar algo como 12px para talvez um aviso de direitos autorais ou algo que não queira que ninguém leia, mas 12px não é de forma alguma o tamanho apropriado para o texto do conteúdo.

Os glifos têm

A recomendação oficial é o tamanho mínimo de 18px, no entanto, algumas fontes como Verdana (uma fonte projetada para uso na Web) podem funcionar até 16px. Mas o Times New Roman nunca deve ser definido em menos de 18px, pois possui uma altura x muito pequena e, geralmente, baixa legibilidade (graças à Microsoft, ugh). Para outra fonte que a Microsoft desconfigurou, vamos tentar nunca usar o "Courier New", onde a Microsoft pegou o que era uma fonte monoespaçada geralmente legível e a tornou muito fina e leve. Como, o que eles estavam pensando?

Para algumas considerações gerais sobre a escolha da fonte para acessibilidade e legibilidade, eu tenho este preliminar PDF na minha conta do portal de pesquisa que você pode baixar gratuitamente: https: //www.researchgate. net/publicação/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

Um comentário final mais importante

Mais importante do que o que você define como tamanho da fonte, é que você permita que os usuários aumentem o tamanho do texto para o tamanho desejado, sem interromper o conteúdo. O padrão atual especifica o zoom 200% sem quebrar, mas isso é insuficiente. 500% é muito mais razoável da perspectiva do usuário.

CONSIDERAR:

20/20 é visão média. Os tamanhos de fonte mencionados acima (18px) são baseados nessa média de 20/20 usuários. 20/40 precisa DUAS VEZES desse tamanho para a mesma percepção. Os usuários do 20/200 precisam de DEZ VEZES esse tamanho (ou seja, podem querer aumentar o zoom em 1000%). Menciono 500% no mínimo, pois considera as implicações do fato de a página ter fontes maiores e o tamanho físico do dispositivo.

Uma tecnologia que está faltando e que está sendo pesquisada no momento está ampliando as fontes menores, mas ampliando as fontes maiores, para que as manchetes grandes não fiquem grandes demais para facilitar a leitura.

Enquanto isso, considere que uma grande parte das pessoas que estão lendo seu site não possui um monitor tão bom quanto o seu e não tem uma visão tão boa quanto a sua. Se você quiser ter uma idéia de como seu site pode ser visto por alguns menos afortunados, obtenha um monitor barato, viciado em lixo, pequeno e de baixa resolução (você pode ter um em armazenamento) e defina-o a 10 a 15 metros de distância (ou seja, mais de um metros de distância). Você consegue ler o seu site? Agora amplie o texto - o seu site quebra por causa dos limites do monitor pequeno?

Esse é o tipo de problema que muitos usuários têm em muitos sites. Só porque você tem visão 20/15 e uma bela tela retina de 32 "não significa que seus usuários tenham quase esse nível de acomodação visual.

-Andy

0
Myndex

Concordo com Erik, 16pt parece ser o melhor padrão no que diz respeito à legibilidade . Leia mais aqui: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell