Existe um tamanho de fonte ideal?

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

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.

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 .

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.

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 legibilidade^{1 1}:

• px

• passo do ponto

• distância de leitura

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 1}_{També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.}

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.

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

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.

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

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

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/